前端同学在进行混合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参数进行了传递。
-
拦截console alert prompt 全局方法
alert('sslocal://openModal?text=hello')
native可以拦截webview中的这些方法，从而调用原生方法。 - 拦截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请求，从而调用原生方法。
-
API注入
Native可以给webview注入全局变量并挂载在window对象上，这样前端js就可以通过window上全局对象方法来调用一些native的方法。
eg：native注入到webview全局对象为gidoorJS，通过全局对象gidoorJS可以调用挂载在其上的方法，来触发调用native的方法。window.gidoorJS.onBaackPress()
JSBridge如何引用
-
由h5引入npm包
优点：JavaScript 端可以确定 JSBridge 的存在，直接调用即可
缺点：如果后期 Bridge 的实现方式改变，双方需要做更多的兼容，维护成本高 -
Native注入
注入方式和 Native 调用 JavaScript 类似，直接执行桥的全部代码。
优点：有利于保持 API 与 Native 的一致性
缺点：在 Native 注入的方法和时机都受限，JS 调用 Native 之前需要先判断 JSBridge 是否注入成功
双向通信
前面我们介绍的几种方法，都只能单向通信。如何进行双向通信呢？这时候就需要前端自己实现一个JS-SDK，维护js回调函数的Map。
详情参考 jsbridge初探
