移动端 JSBridge 的逻辑梳理

移动端 JSBridge 的逻辑梳理

JSBridge 可以分为两个阶段,每个阶段执行不同的逻辑

• 初始化阶段: 保证两端的 JSBridge 环境,配置初始化信息
• 交互阶段:
  • web 端发送消息到 app 端
  • app 端 端发送消息到 web 端

初始化阶段

1. app 端的 JSBridge 初始化并与 webView 绑定,往 JSBridge 注册 handler
2. web 端注册监听事件 WebViewJavascriptBridgeReady,回调方法内注册 handler
3. app 端根据条件注入 JavaScript 的 JSBridge 代码,确保 web 端有 JSBridge 环境
4. web 端运行后, 修改 iframe 标签的 src,发送 WebViewJavascriptBridgeReady事件
5. 初始化完毕

交互阶段

web 发送消息到 app

1. web 端将message加到messageQueue,修改iframe标签的src
2. app 端验证 Scheme 和 Host 建立通信,之后读取 web 端的messageQueue.然后遍历messageQueue,执行原先 app 端相应的handler
3. app 端执行完毕,根据message的callBackId属性区分是否有callBack.如果有,注入 js 代码,执行 web 端的handler,并清理messageQueuev
4. 流程结束

app 发送消息到 web

1. app 端注册新的handler,将message转成JSON.注入 js 代码,执行 web 端的 handler
2. web 端JSBridge执行完handler之后,根据message的callBackId属性区分是否有callBack.
3. 如果有callBack,重复流程web 发送消息到 app,执行 app 端的handler.
4. 流程结束