jsbridge

JSBridge用于在js在原生移动程序之间的通信的技术

• JsBridge是一种 “桥梁” 机制

• 允许js代码调用原生应用程序的接口方法, 同时也允许原生应用程序调用js代码

• h5无法直接访问手机操作系统的功能，通过JSBridge就可以解决这个问题

使用场景

常用于h5移动端和原生进行通信

• 调用原生功能
• 获取原生数据
• 事件通信

通信原理

JSBridge 的通信原理通常是通过原生应用程序提供的接口来实现的。在 Android 和 iOS 中，通常会提供一个 JavaScript 接口对象，JavaScript 通过这个接口对象来调用原生功能

• H5 调用原生
  • window.postMessage
• 原生调用 H5
  • webView.evaluateJavascript("jsFunc('data')")

JSBridge 的本质是消息传递+回调

JSBridge封装

js

// JSBridge.js
const JSBridge = {
  // 调用原生方法
  call(handler, params = {}, callback) {
    // 生成唯一回调名
    const callbackName = `JSBridge_cb_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
    if (typeof callback === 'function') {
      window[callbackName] = function (...args) {
        callback(...args);
        delete window[callbackName]; // 用完即删
      };
      params.callback = callbackName;
    }

    // 兼容不同平台
    if (window.Android && window.Android[handler]) {
      // Android addJavascriptInterface
      window.Android[handler](JSON.stringify(params));
    } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[handler]) {
      // iOS WKWebView
      window.webkit.messageHandlers[handler].postMessage(params);
    } else {
      // URL Scheme 方式
      const url = `jsbridge://${handler}?params=${encodeURIComponent(JSON.stringify(params))}`;
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
      document.body.appendChild(iframe);
      setTimeout(() => document.body.removeChild(iframe), 100);
    }
  },

  // 原生回调 JS（可选，原生直接调用 window[callbackName]）
  // 这里一般不需要额外封装
};

export default JSBridge;