jsbridge

JSBridge 是 Native 代码与 JS 代码的通信桥梁。

目前的一种统一方案是：H5 触发 url scheme->Native 捕获 url scheme->原生分析,执行->原生调用 h5。如下图

Web 端和 Native 可以类比于 Client/Server 模式，Web 端调用原生接口时就如同 Client 向 Server 端发送一个请求类似，JSBridge 在此充当类似于 HTTP 协议的角色，实现 JSBridge 主要是两点：

1. 将 Native 端原生接口封装成 JavaScript 接口

2. 将 Web 端 JavaScript 接口封装成原生接口

Native->Web

先来说 Native 端调用 Web 端，这个比较简单，JavaScript 作为解释性语言，最大的一个特性就是可以随时随地地通过解释器执行一段 JS 代码，所以可以将拼接的 JavaScript 代码字符串，传入 JS 解析器执行就可以，JS 解析器在这里就是 webView。

Web->Native

Web 调用 Native 端主要有两种方式

1. 拦截 Webview 请求的 URL Schema

URL Schema 是类 URL 的一种请求格式，格式如下：<protocol>://<host>/<path>?<qeury>#fragment

我们可以自定义 JSBridge 通信的 URL Schema，比如：jsbridge://showToast?text=hello Native 加载 WebView 之后，Web 发送的所有请求都会经过 WebView 组件，所以 Native 可以重写 WebView 里的方法，拦截 Web 发起的请求，我们对请求的格式进行判断：

如果符合我们自定义的 URL Schema，对 URL 进行解析，拿到相关操作、操作，进而调用原生 Native 的方法

如果不符合我们自定义的 URL Schema，我们直接转发，请求真正的服务

2. 向 Webview 中注入 JS API

这个方法会通过 webView 提供的接口，App 将 Native 的相关接口注入到 JS 的 Context（window）的对象中，一般来说这个对象内的方法名与 Native 相关方法名是相同的，Web 端就可以直接在全局 window 下使用这个全局 JS 对象，进而调用原生端的方法。

Android（4.2+）提供了 addJavascriptInterface 注入

// 注入全局JS对象
webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");

class NativeBridge {
  private Context ctx;
  NativeBridge(Context ctx) {
    this.ctx = ctx;
  }

  // 增加JS调用接口
  @JavascriptInterface
  public void showNativeDialog(String text) {
    new AlertDialog.Builder(ctx).setMessage(text).create().show();
  }
}

---

参考：JSBridge 的原理 https://www.cnblogs.com/dailc/p/5931324.html (opens new window)

聊一聊桥接（JSBridge）的原理 https://www.likecs.com/show-129596.html (opens new window)

JSBridge 的实现原理 https://segmentfault.com/a/1190000020303655 (opens new window)