一篇文章了解JsBridge

[[345068]]

一、jsbridge 定义

JSBridge 是一种 JS 实现的 Bridge，连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native 调用 JS，JS 调用 Native ，是双向通信的通道。JSBridge 主要提供了 JS 调用 Native 代码的能力，实现原生功能如查看本地相册、打开摄像头、指纹支付等。

二、JSBridge 用途

JSBridge 就像其名称中的『Bridge』的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间消息通信的通道，而且是双向通信的通道。

双向通信的通道:

1) JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。

2) Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。

H5与Native交互如下图：

三、JSBridge 的实现原理

JavaScript 是运行在一个单独的 JS Context 中（例如，WebView 的 Webkit 引擎、JSCore）。由于这些 Context 与原生运行环境的天然隔离，我们可以将这种情况与 RPC（Remote Procedure Call，远程过程调用）通信进行类比，将 Native 与 JavaScript 的每次互相调用看做一次 RPC 调用。

在 JSBridge 的设计中，可以把前端看做 RPC 的客户端，把 Native 端看做 RPC 的服务器端，从而 JSBridge 要实现的主要逻辑就出现了：通信调用（Native 与 JS 通信）和句柄解析调用。

四、JSBridge 的通信原理

一、JavaScript 调用 Native的方式

JavaScript 调用 Native 的方式，主要有两种：注入 API 和拦截 URL SCHEME。

1､注入API

注入 API 方式的主要原理是，通过 WebView 提供的接口，向JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的。

对于 iOS 的 UIWebView，实例如下：

 
 
 
 
  
  
  
  JSContext *context = [uiWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];   
  
  
  context[@"postBridgeMessage"] = ^(NSArray *calls) {   
  
  
  // Native 逻辑   
  
  
  };   
  
  
  前端调用方式：   
  
  
  window.postBridgeMessage(message);

2､拦截 URL SCHEME

先解释一下 URL SCHEME：URL SCHEME是一种类似于url的链接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的，

例如: qunarhy://hy/url?url=ymfe.tech，protocol 是 qunarhy，host 则是 hy。

拦截 URL SCHEME 的主要流程是：Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作。

在时间过程中，这种方式有一定的缺陷：

1) 使用 iframe.src 发送 URL SCHEME 会有 url 长度的隐患。

2) 创建请求，需要一定的耗时，比注入 API 的方式调用同样的功能，耗时会较长。

因此：JavaScript 调用 Native 推荐使用注入 API 的方式

二、Native 调用 JavaScript 的方式

相比于 JavaScript 调用 Native， Native 调用 JavaScript 较为简单，直接执行拼接好的 JavaScript 代码即可。

从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上。

对于 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 = {   
  
  
    // 调用 Native   
  
  
    invoke: function(msg) {   
  
  
      // 判断环境，获取不同的 nativeBridge   
  
  
      nativeBridge.postMessage(msg);   
  
  
    },   
  
  
    receiveMessage: function(msg) {   
  
  
      // 处理 msg   
  
  
    }   
  
  
  };

在上面的文章中，提到过 RPC 中有一个非常重要的环节是句柄解析调用，这点在 JSBridge 中体现为句柄与功能对应关系。同时，我们将句柄抽象为桥名（BridgeName），最终演化为一个 BridgeName 对应一个 Native 功能或者一类 Native 消息。基于此点，JSBridge 的实现可以优化为如下：

 
 
 
 
  
  
  
  window.JSBridge = {   
  
  
    // 调用 Native   
  
  
    invoke: function(bridgeName, data) {   
  
  
    // 判断环境，获取不同的 nativeBridge   
  
  
      nativeBridge.postMessage({   
  
  
        bridgeName: bridgeName,   
  
  
        data: data || {}   
  
  
      });   
  
  
    },   
  
  
    receiveMessage: function(msg) {   
  
  
      var bridgeName = msg.bridgeName,   
  
  
      data = 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。

本文名称：一篇文章了解JsBridge
URL地址：http://www.csdahua.cn/qtweb/news10/365710.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容