JSBridge应用实践

发表于 分类于 阅读次数： 本文字数： 3.3k 阅读时长 ≈ 3 分钟

JSBridge 是一种用于实现 Web 页面与原生应用之间通信的技术，广泛应用于 H5 页面与手机 App 的交互场景。

以下是 JSBridge 的主要接口应用场景和实现方式：

JSBridge 的主要应用场景

Web 调用原生：例如，Web 页面需要调用原生的摄像头功能，通过 JSBridge 发送请求，原生端接收并调用相机。

原生调用 Web：例如，原生端需要更新 Web 页面的状态，通过 JSBridge 调用 Web 端的 JavaScript 方法。

  1. 调用设备原生功能

    • 相机与相册：通过 JSBridge，Web 页面可以调用原生的相机或相册功能，例如拍照或选择图片。
    • 地理位置：获取设备的地理位置信息，用于地图定位或位置服务。
    • 设备信息：获取设备型号、IMEI 等硬件信息。

  2. 用户认证与登录

    • 原生登录弹窗：通过 JSBridge 触发原生的登录界面，完成用户身份验证。

  3. 数据同步

    • 实时更新状态：将原生应用的状态（如推送通知）实时同步到 Web 页面，无需刷新整个页面。

  4. 页面跳转与交互

    • 跳转到原生页面：从 Web 页面跳转到原生应用的特定页面。
    • 返回操作：处理 Web 页面的返回操作，与原生应用的返回逻辑保持一致。

  5. 其他功能

    • 文件存储：读取或写入本地文件。
    • 自定义功能：根据业务需求扩展原生接口，实现更多定制化功能。

JSBridge 的实现方式

1. Android 平台

  • JavaScript 接口注入：通过 WebView.addJavascriptInterface() 方法，将原生对象注入到 Web 页面中，供 JavaScript 调用。

  • 示例代码：

    1
    webView.addJavascriptInterface(new NativeBridge(context), "NativeBridge");

2. iOS 平台

  • WKWebView 的消息处理：在 iOS 中，通过 WKUserContentController 注册消息处理器，监听 JavaScript 的调用。

  • 示例代码：

    1
    2
    WKUserContentController *userCC = configuration.userContentController;
    [userCC addScriptMessageHandler:self name:@"nativeBridge"];

3. HarmonyOS 平台

  • 消息交互：通过 WebCallApp 和 AppCallWeb 方法实现 Web 与原生的双向通信。

4. Web 端调用

  • 调用原生方法：通过注册的接口名称调用原生功能，并传递参数。

  • 示例代码：

    1
    2
    const bridge = new JSBridge();
    bridge.openAlbum(); // 调用原生相册接口

JSBridge 封装

封装 JSBridge 的目的是为了实现 Web 页面与原生 App 之间的高效、安全通信。

1. 封装思路

封装 JSBridge 的核心是创建一个统一的接口，用于处理 Web 与原生端的双向通信。封装时需要考虑以下两个方向：

  • 前端调用原生方法：通过封装的方法将请求发送到原生端，并处理原生端的回调。
  • 原生调用前端方法：在前端注册方法，供原生端调用。

封装的 JSBridge 通常挂载在全局对象 window 上，例如命名为 window.JSBridge。

2. 封装步骤

（1）定义 JSBridge 对象

在全局对象 window 上定义一个 JSBridge 对象，用于存储回调函数和通信方法：

1
2
3
window.JSBridge = {
  _cbMap: {}, // 存储回调函数
};

（2）注册方法供原生调用

通过 register 方法，将前端方法注册到 JSBridge 上，供原生端调用：

1
2
3
window.JSBridge.register = function (method, callback) {
  this._cbMap[method] = callback;
};

（3）封装前端调用原生的方法

通过 send 方法发送请求到原生端，并处理回调：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.JSBridge.send = function (method, data, callback) {
  let callbackId;
  if (callback) {
    callbackId = `${method}_${Date.now()}`;
    this._cbMap[callbackId] = callback;
  }
  const params = {
    method,
    callback: callbackId,
    data,
  };
  // 调用原生端提供的方法，例如通过 WebView 注入的 JavaScript 接口
  callNative(JSON.stringify(params));
};

（4）处理原生端的回调

原生端通过调用 handler 方法将数据回调到前端：

1
2
3
4
5
6
7
window.JSBridge.handler = function (obj) {
  const { callbackId, data } = JSON.parse(obj);
  if (this._cbMap[callbackId]) {
    this._cbMap[callbackId](data);
    delete this._cbMap[callbackId]; // 回调完成后删除回调函数
  }
};

3. 使用示例

（1）前端调用原生方法

1
2
3
JSBridge.send('showNativeDialog', { message: 'Hello from Web!' }, (response) => {
  console.log('Native response:', response);
});

（2）原生端调用前端方法

1
2
3
4
JSBridge.register('updateUI', (data) => {
  console.log('Update UI with data:', data);
  // 执行前端逻辑
});

Hybrid 和 JSBridge 关系

Hybrid 和 JSBridge 是混合开发中密切相关的技术概念，以下是它们之间的关系和定义：

Hybrid（混合开发）

Hybrid 是一种结合了原生技术和 Web 技术的开发模式，通常用于移动应用开发。它通过在原生应用中嵌入 WebView 控件来加载 HTML5 页面，从而实现动态更新和跨平台开发。

  • 优点：

    • 开发速度快，维护成本低。
    • 跨平台支持，减少开发周期。
    • 可以利用 Web 技术快速更新内容，无需重新打包和发布。

  • 原理：

    • 使用 WebView 加载 H5 页面，同时通过 JSBridge 实现 Web 端与原生端的双向通信。

Hybrid 与 JSBridge 的关系

  • Hybrid 是开发模式，而 JSBridge 是通信机制。
  • 在 Hybrid 开发中，JSBridge 是实现 Web 端与原生端交互的关键技术，它使得 Web 页面能够调用原生功能，同时原生端也可以与 Web 端进行数据交互。
  • 没有 JSBridge，Hybrid 开发中的 Web 页面将无法与原生应用进行深度交互。

JSBridge 是 Hybrid 开发中的核心通信机制，它使得 Web 端和原生端能够实现双向通信，从而充分发挥 Web 技术的灵活性和原生技术的强大功能。

注意事项

  1. 安全性：避免在全局对象中暴露过多敏感信息，确保回调函数的安全性。
  2. 异步调用：原生方法的调用通常是异步的，需要合理处理回调。
  3. 兼容性：不同平台（Android、iOS、HarmonyOS）的实现方式有所不同，需要分别适配。

通过 JSBridge，Web 页面可以无缝调用原生功能，提升用户体验和应用的扩展性。开发者可以根据实际需求选择合适的实现方式，并确保接口的安全性和稳定性。

相关链接

[1] 前端 H5 与客户端 Native 交互原理 - JSBridge

[2] jsbridge-example