#ref #Done
为什么是 JSBridge
为什么是 JSBridge？（而不是 PythonBridge 等等
——因为相 JS 的主要载体 web 对于其他 UI 构建方式，更加容易编写和维护
在 开发维护成本 和 更新成本 的综合考虑下，web 就是成为混合开发中的不二之选
而 web 开发的技术逻辑核心 JS 也担负起了与其他技术【桥接】的职责，且大多数移动操作系统中都包含了 JS 运行的容器（WebView 和 JSCore），运行 JavaScript 不用像运行其他语言时，要额外添加 运行环境
基于以上原因，JSBridge 应运而生
两张技术方案
基于 Web 的 Hybrid 解决方案：例如微信浏览器、各公司的 Hybrid 方案
非基于 Web UI 但业务逻辑基于 JavaScript 的解决方案：例如 React-Native
微信小程序基于 Web UI，但是为了追求运行效率，对 UI 展现逻辑和业务逻辑的 JavaScript 进行了隔离。因此小程序的技术方案介于上面描述的两种方式之间
作用
作用：给 JavaScript 提供调用 Native 功能的接口
核心：构建 native 和非 native 端消息通信的通道（双向通道）
JS 向 Native 发送消息 : 调用相关功能、通知 Native 当前 JS 的相关状态等。
Native 向 JS 发送消息 : 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。
通信原理
类比成 JSONP 的流程
H5 页面和 native 端的 JS Bridge 通信，是通过在 native 端的 Webview 中注入原生的 JS 对象来实现的。具体实现步骤如下：
- 在 native 端创建一个 Webview 并加载 H5 页面。
- 在 Webview 中注入一个 JS 对象，这个 JS 对象是原生端和 H5 页面通信的桥梁。
- 在 H5 页面中通过 JS 代码调用注入的 JS 对象中的方法，传递需要传递的数据。
- JS Bridge 接收到 H5 页面传递过来的数据，将其解析成 JSON 格式并封装成一个 URI 字符串。
- JS Bridge 通过调用 native 端提供的 API，将封装好的 URI 字符串传递给 native 端。
- 在 native 端接收到 URI 字符串后，将其解析成 JSON 格式并处理数据。
- 在 native 端处理完数据后，将处理结果返回给 H5 页面，将结果封装成 URI 字符串并通过 JS Bridge 传递给 H5 页面。
- 在 H5 页面中接收到 native 端返回的数据后，将其解析成 JSON 格式并进行相应的处理。
JS 调用 Native
注入 API
通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行相应的 Native 代码逻辑，达到 JavaScript 调用 Native 的目的
window.postBridgeMessage(message);拦截 URL SCHEME
URL SCHEME 是一种类似于 url 的链接，是为了方便 app 直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的，例如: qunarhy://hy/url?url=ymfe.tech，protocol 是 qunarhy，host 则是 hy
Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作
Native 调用 JS
执行拼接 JavaScript 字符串，从外部调用 JavaScript 中的方法，因此 JavaScript 的方法必须在全局的 window 上。（闭包里的方法，JavaScript 自己都调用不了，更不用想让 Native 去调用了——IIFE 可以实现）
接口实现
调用 Native（给 Native 发消息） 和 被 Native 调用（接收 Native 消息）
当发送 JSONP 请求时，url 参数里会有 callback 参数，其值是 当前页面唯一 的，而同时以此参数值为 key 将回调函数存到 window 上，随后，服务器返回 script 中，也会以此参数值作为句柄，调用相应的回调函数。
JSBridge：用一个自增的唯一 id，来标识并存储回调函数，并把此 id 以参数形式传递给 Native，而 Native 也以此 id 作为回溯的标识。这样，即可实现 Callback 回调逻辑
引入方式
在 Native 注入
注入方式和 Native 调用 JavaScript 类似，新开一个 WebView 直接执行桥的全部代码
优点：
- 无需关注 JSBridge 版本
缺点： - 注入时机不确定，需要实现注入失败后重试的机制，保证注入的成功率
- JavaScript 端在调用接口时，需要优先判断 JSBridge 是否已经注入成功
由 JS 端引用
直接与 JS 一起执行
优点：
- JavaScript 端可以确定 JSBridge 的存在，直接调用即可
缺点： - 如果桥的实现方式有更改，JSBridge 需要兼容多版本的 Native Bridge
总结
jsbridge 调用本地方法，h5 监测到调用，判断方法是否可以调用，可以调用的话，h5 页面通过 jsbridge 对象触发一个 url scheme，native 捕获，分析 scheme 知道了调用哪种方法，知道回调函数 id；执行原生方法，调用 jsbridge 回调函数的 id 和参数
ref
贡献者
jiechen