js-bridge原理

[MJingv]

schema 概要 url-scheme 方案/格式 統一資源標誌符方案 (URI scheme)

https://mp.weixin.qq.com/s/bXXXBEzAHVTWcuGNNqCgpw

桥分为

• js调native
• native调js

url shceme

• 特殊的url，用于web页面唤起app
• deeplink（web里打开app对应内容）基于url scheme实现，eg：知乎的在app里打开此问题
• eg：weixin:// 唤起微信，mqq:// 唤起qq

原理

• app安装后在手机系统注册一个scheme
• 一般在 Android 里面需要到 AndroidManifest.xml 文件中去注册 scheme
• 在 iOS 中需要在 Xcode 里面注册，有一些已经是系统使用的不应该使用，比如 Maps、YouTube、Music

js调native

• ios里的webview分2种：uiwebview和webview
• webview内存少，新，支持h5，不支持缓存，自己注入cookie，发post不能带参数

js调native有3种方法

• 拦截scheme
• 弹窗拦截
• 注入js上下文

拦截scheme

• native拦截js的请求（a、重定向、iframe），获取callback执行
• 不建议使用，location.href 信息会丢失，url长度有限制

弹窗拦截

• 利用弹窗会触发webview的事件，uiwebview不支持

注入上下文

• ios内置了jscore，不依赖拦截，js可直接调native

native调用js

• 类似微eval去执行js代码

js-bridge设计

方案：scheme协议+上下文注入