一篇文章了解 JsBridge( 二 )
对于 iOS 的 UIWebView ， 示例如下：
result = [uiWebview stringByEvaluatingJavaScriptFromString:javaScriptString]; * javaScriptString为JavaScript 代码串 对于 iOS 的 WKWebView ， 示例如下：
[wkWebView evaluateJavaScript:javaScriptString completionHandler:completionHandler]; 三、通信原理总结通信原理是 JSBridge 实现的核心1）JavaScript 调用 Native 推荐使用 注入 API 的方式（iOS6 忽略 ， Android 4.2以下使用 WebViewClient 的 onJsPrompt 方式） 。
2）Native 调用 JavaScript 则直接执行拼接好的 JavaScript 代码即可 。
四、JSBridge 接口实现
JSBridge 的接口主要功能有两个：调用 Native（给 Native 发消息） 和 被 Native 调用（接收 Native 消息） 。 因此 ， JSBridge 可以设计如下：
window.JSBridge = {// 调用 Nativeinvoke: function(msg) {// 判断环境 ， 获取不同的 nativeBridgenativeBridge.postMessage(msg);},receiveMessage: function(msg) {// 处理 msg} }; 在上面的文章中 ， 提到过 RPC 中有一个非常重要的环节是 句柄解析调用， 这点在 JSBridge 中体现为 句柄与功能对应关系 。 同时 ， 我们将句柄抽象为 桥名（BridgeName） ， 最终演化为 一个 BridgeName 对应一个 Native 功能或者一类 Native 消息 。 基于此点 ， JSBridge 的实现可以优化为如下：
window.JSBridge = {// 调用 Nativeinvoke: function(bridgeName, data) {// 判断环境 ， 获取不同的 nativeBridgenativeBridge.postMessage({bridgeName: bridgeName,data: data || {}});},receiveMessage: function(msg) {var bridgeName = msg.bridgeName,data = http://kandian.youth.cn/index/msg.data || {};// 具体逻辑} }; 对于 JSBridge 的 Callback， 其实就是 RPC 框架的回调机制 。 当然也可以用更简单的 JSONP 机制解释：
当发送 JSONP 请求时 ， url 参数里会有 callback 参数 ， 其值是 当前页面唯一 的 ， 而同时以此参数值为 key 将回调函数存到 window 上 ， 随后 ， 服务器返回 script 中 ， 也会以此参数值作为句柄 ， 调用相应的回调函数 。
整体流程：在 Native 端配合实现 JSBridge 的 JavaScript 调用 Native 逻辑也很简单 ， 主要的代码逻辑是：接收到 JavaScript 消息 => 解析参数 ， 拿到 bridgeName、data 和 callbackId => 根据 bridgeName 找到功能方法 ， 以 data 为参数执行 => 执行返回值和 callbackId 一起回传前端 。
Native调用 JavaScript 也同样简单 ， 直接自动生成一个唯一的 ResponseId ， 并存储句柄 ， 然后和 data 一起发送给前端即可 。
五、JSBridge 如何引用对于 JSBridge 的引用 ， 常用有两种方式 ， 各有利弊 。
1) 由 Native 端进行注入注入方式和 Native 调用 JavaScript 类似 ， 直接执行桥的全部代码 。
优点：桥的版本很容易与 Native 保持一致 ， Native 端不用对不同版本的 JSBridge 进行兼容；与此同时 ，
缺点：注入时机不确定 ， 需要实现注入失败后重试的机制 ， 保证注入的成功率 ， 同时 JavaScript 端在调用接口时 ， 需要优先判断 JSBridge 是否已经注入成功 。
2) 由 JavaScript 端引用
直接与 JavaScript 一起执行 。 与由 Native 端注入正好相反 。
优点：JavaScript 端可以确定 JSBridge 的存在 ， 直接调用即可；
缺点：如果桥的实现方式有更改 ， JSBridge 需要兼容多版本的 Native Bridge 或者 Native Bridge 兼容多版本的 JSBridge 。
推荐阅读
- 111完美邮箱上线，定位“年轻人的专属邮箱”
- 给你的iPhone12全方位保护：6款手机保护壳横评
- 华云大咖说 云计算云运维浅谈
- 在线音乐用户寄望用爱发电，资本不愿无米之炊
- 36岁，我在大厂，和先生养育“互联网孤儿”
- 虾米音乐，下个月正式停止服务
- 支付宝年账单来了，你可能错失了一套房……
- 河北省首家“政策智通”计算器正式上线
- “全能神”开发谷歌应用APP传播邪教教义
- 向美国靠拢？瑞典绕开华为部署5G！华为已2次起诉