移动端开发之JSBridge

前端同学在进行混合app开发的时候，可能会需要调用原生的方法，例如相机等。这个时候就用到了JSBridge。JSBridge是连接Native(客户端)和JavaScript前端的桥梁，通过JSBridge 两端的代码才可以通信。

Native 调用 JS

因为h5网页是通过原生端的webview加载的，所以原生端对当前网页拥有很高的权限：Native端可以直接在当前webview里执行js代码。

// web端
function nativeCallback(data) {
  console.log('data', data);
}

我们在js的执行环境里定义了一个全局方法nativeCallback，native端可以直接执行nativeCallback(123)方法，也就把数据传给了js。

JS 调用 Native

scheme协议：可以简单理解为自定义的url 形式如：[scheme:][//domain][path][?query][#fragment] 举个栗子：jsbridge://openPage?url=https://www.baidu.com/

客户端通过分析scheme就知道web端要调用原生的哪些方法，同时数据也通过query参数进行了传递。

1. 拦截console alert prompt 全局方法
   alert('sslocal://openModal?text=hello')
   native可以拦截webview中的这些方法，从而调用原生方法。
2. 拦截url请求

function schemeJump (url) { // 通过iframe子窗口执行URL
  let iframe = document.createElement('iframe')
  iframe.src = url
  iframe.style.display = 'none'
  document.documentElement.appendChild(iframe)
  setTimeout(() => {
    document.documentElement.removeChild(iframe)
  }, 0)
}
schemeJump('sslocal://openModal?text=hello')

web端加载了一个iframe，请求了sslocal://openModal?text=hello, native端通过拦截url请求，从而调用原生方法。

3. API注入
   Native可以给webview注入全局变量并挂载在window对象上，这样前端js就可以通过window上全局对象方法来调用一些native的方法。
   eg：native注入到webview全局对象为gidoorJS，通过全局对象gidoorJS可以调用挂载在其上的方法，来触发调用native的方法。window.gidoorJS.onBaackPress()

JSBridge如何引用

1. 由h5引入npm包
   优点：JavaScript 端可以确定 JSBridge 的存在，直接调用即可
   缺点：如果后期 Bridge 的实现方式改变，双方需要做更多的兼容，维护成本高
2. Native注入
   注入方式和 Native 调用 JavaScript 类似，直接执行桥的全部代码。
   优点：有利于保持 API 与 Native 的一致性
   缺点：在 Native 注入的方法和时机都受限，JS 调用 Native 之前需要先判断 JSBridge 是否注入成功

双向通信

前面我们介绍的几种方法，都只能单向通信。如何进行双向通信呢？这时候就需要前端自己实现一个JS-SDK，维护js回调函数的Map。
详情参考 jsbridge初探