JS Bridge

什么是 JS Bridge?

1. JS 无法直接调用 native API，即 App 的 API
2. 需要通过一些特定的格式来调用
3. 这些格式就统称 JS-Bridge，例如微信 JSSDK

概念理解

1. 一个操作系统即 OS 下会有多个 App
2. 一个 App 中会有一个 webview 组件，用来承载网页展示
3. 如微信 App 可以打开网页，其实它有一个 webview 的组件来承载
4. 如 chrome 浏览器，它其实也是一个 App，只不过是一个以 webview 为主的 App

JS Bridge 的原理

1. App 会往 webview 组件去提供封装好丰富的 API
2. JS 再去调用对应的 API
3. 中间这个提供封装好丰富的 API 就是 JS Bridge
4. 注意：如果有涉及到网络请求的 API，会先到 App 层面，再由 App 进行处理

JS Bridge 常见的方式

1. 注册全局 API
2. URL Scheme

Android、iOS 和 Web 双向通讯的对比

1. 相同点：

   1. 都是通过 WebView 来完成网页的加载
   2. 都是通过向 Window 注入对象的方式来提供可被 Web 端调用的方法
   3. 都可以直接调用 Web 端挂载到 window 对象下的方法

2. 不同点：

   1. 注入对象不同：Android 可提供注入对象名，iOS 固定为 webkit
   2. Js 调用 Native 方式不同：
      1. 面向 Android 可直接获取注入对象，调用方法
      2. 面向 iOS 为相对固定写法：window.webkit.messageHandlers.方法名.postMessage('入参对象')
   3. 传递数据格式不同：
      1. 面向 Android 只能接受基本类型数据
      2. 面向 iOS 可以接受任意类型数据
   4. 返回值不同：
      1. 面向 Android 可以直接接收返回值
      2. 面向 iOS 没有办法直接获取返回值，需要通过 js 回调

DSBridge 原理解析

Android

Android 向 window 注入了 _dsbridge 对象，里面有 call 方法，用于 browser 和 native 之间的通讯

iOS

iOS 拦截了 prompt('_dsbridge=method', arg) 这个弹框内容，解析里面的 method 和 arg，用于 browser 和 native 之间的通讯

具体调用

browser ==> native 即通过上述方法进行调用

native ==> browser 需要 browser 先调用 register 方法，native 把对应的方法进行存储，然后 native 在特定的时期进行调用指定的方法名即实现调用，其 register 方法的原理也是上述方法进行调用

作者：chenjie
链接：https://webchenjie.cn
来源：ChenJieBlog