虽然这样达到了跨平台的效果，但是，这些网页是没有直接调用原生设备的能力的。

基于此，JS Bridge 桥就成了 H5 应用与原生通讯的关键。

1 JS Bridge 是什么

JS Bridge 实际上就是一段 JS 代码，里面封装好H5访问原生的方法，原生访问H5的方法，即可作为一个“桥”架在 H5 和 原生 中间。

2 JS Bridge 技术实现

要实现 JS Bridge，我们需要按以下步骤进行：

（注：本篇文章基于 Android6 以上，以阐述原理为主）

• 第一步：定义一个 Native 与 JS 交互的全局桥对象

• 第二步：JS 调用 Native

• 第三步：Native 接收 JS 传递过来的参数

• 第四步：Native 返回数据给 JS

• 第五步：JS 接收原生传递过来的参数

• 第六步：回调事件处理

2.1 全局桥对象

定义全局桥对象。

后续，我们需要用它来访问我们定义的与原生“通讯”方法。

var JSBridge = window.JSBridge || (window.JSBridge = {})

2.2 JS 调用原生

关于 JS 如何主动调用原生，Android 官方封装了接口。

首先需要创建 JS 访问原生的命名空间：

webView.addJavascriptInterface(this, "androidPlatform");

关于这个方法，官方给予了解释，

Injects the supplied Java object into this WebView. The object is injected into all frames of the web page, including all the iframes, using the supplied name.

将提供的 Java 对象注入到此 WebView 中。将提供的命名空间注入到网页的所有框架中，包括所有 iframe。这允许从 JavaScript 访问 Java 对象的方法。

Android 这边定义好命名空间后，JS 就可以通过该命名空间传递数据给原生：

window.androidPlatform.postString(jsonStr); // 这样就将参数传给了原生的 postString 方法

2.3 Native 接收 JS 传递过来的参数

在传给webView的 Java 对象中创建postString方法，接收 JS 传递的数据。

@JavascriptInterface // 从 Android 4.2 开始必须要加上该注解，postString 方法才能被 JS 访问 public void postString(String jsonStr) {// jsonStr 就

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

是 JS 传递过来的数据}

2.4 Native 返回数据给 JS

Native 如何返回数据给 JS，Android 的 webView 提供了方法。

final String script = "javascript:window.JSBridge.postMsg(" + data + ")";webView.evaluateJavascript(script, null));

2.5 JS 接收原生传递过来的参数

// JS 定义 window,JSBridge.postMsg 方法接收数据 JSBridge.postMsg = function postMsg(result) {// 处理返回数据}

2.6 回调事件处理

一般而言，JS 调用原生方法，都希望得到返回数据。

所以 JSBridge 最好可以返回一个异步的Promise给调用者，等到原生返回数据后，通过该 Promise 接收到数据。

// 通过 JSBridge.call 调用原生 window.JSBridge.call(data).then();

// JSBridge.call()返回 PromiseJSBridge.call = function (data) {// 返回 Promisereturn new Promise(function (resolve, reject) {JSBridge.callNative(data, {resolve: resolve,reject: reject});});