移动端 JSBridge 的逻辑梳理
JSBridge 可以分为两个阶段,每个阶段执行不同的逻辑
- 初始化阶段: 保证两端的 JSBridge 环境,配置初始化信息
- 交互阶段:
- web 端发送消息到 app 端
- app 端 端发送消息到 web 端
初始化阶段
- app 端的 JSBridge 初始化并与 webView 绑定,往 JSBridge 注册
handler
- web 端注册监听事件
WebViewJavascriptBridgeReady
,回调方法内注册handler
- app 端根据条件注入 JavaScript 的 JSBridge 代码,确保 web 端有 JSBridge 环境
- web 端运行后, 修改
iframe
标签的src
,发送WebViewJavascriptBridgeReady
事件 - 初始化完毕
交互阶段
web 发送消息到 app
- web 端将
message
加到messageQueue
,修改iframe
标签的src
- app 端验证 Scheme 和 Host 建立通信,之后读取 web 端的
messageQueue
.然后遍历messageQueue
,执行原先 app 端相应的handler
- app 端执行完毕,根据
message
的callBackId
属性区分是否有callBack
.如果有,注入 js 代码,执行 web 端的handler
,并清理messageQueue
v - 流程结束
app 发送消息到 web
- app 端注册新的
handler
,将message
转成JSON
.注入 js 代码,执行 web 端的handler
- web 端
JSBridge
执行完handler
之后,根据message
的callBackId
属性区分是否有callBack
. - 如果有
callBack
,重复流程web 发送消息到 app
,执行 app 端的handler
. - 流程结束