JavaScript与Native通信在许多App中一般都会使用WebView控件去嵌入一些Web页面，从而去避免频繁的

前言

在许多App中一般都会使用WebView控件去嵌入一些Web页面，从而去避免频繁的发版问题。但有时Web页面是需要去调用原生的一些功能，这时候就需要JavaScript与Native之间去进行一些交互。

JSBridge

1.首先我们看一下JavaScript相关的桥接代码：

const UA = navigator.userAgent;
const isAndroid = UA.indexOf("Android") > -1 || UA.indexOf("Linux") > -1;
const isiOS = !!UA.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

function setupWebViewJavascriptBridge(callback) {
  //Android使用
  if (isAndroid) {
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge);
    } else {
      document.addEventListener(
        "WebViewJavascriptBridgeReady",
        () => {
          callback(window.WebViewJavascriptBridge);
        },
        false
      );
    }
  }
  //iOS使用
  if (isiOS) {
    if (window.WebViewJavascriptBridge) {
      return callback(window.WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    let WVJBIframe = document.createElement("iframe");
    WVJBIframe.style.display = "none";
    WVJBIframe.src = "https://__bridge_loaded__";
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(() => {
      document.documentElement.removeChild(WVJBIframe);
    }, 0);
  }
}

// 注册回调函数，第一次连接时调用(进入H5页面)初始化函数(android需要初始化)
setupWebViewJavascriptBridge((bridge) => {
  if (isAndroid) {
    //初始化
    bridge.init((message, responseCallback) => {
      let data = {
        "Javascript Responds": "Wee!",
      };
      responseCallback(data);
    });
  }
});

export default {
  /**
   * Js调Native方法
   * @param {*} name 方法名
   * @param {*} data 数据
   * @param {*} callback 回调
   */
  callHandler(name, data, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.callHandler(name, data, callback);
    });
  },
  /**
   * Native调用Js方法
   * @param {*} name 方法名
   * @param {*} callback 回调
   */
  registerHandler(name, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.registerHandler(name, (data, responseCallback) => {
        callback(data, responseCallback);
      });
    });
  },
};

2.客户端也需要引入相应的包：

Android：JsBridge

iOS：WebViewJavascriptBridge

DSBridge

DSBridge是H5页面与Native之间通信的桥梁，它有如下特点：

跨平台；同时支持ios和android
双向调用；js可以调用native，native可以调用js
不仅支持异步调用，而且页支持同步调用
支持进度回调，多次返回
Android支持腾讯x5内核
三端易用；无论是前端还是android或ios

Android：DSBridge-Android

iOS：DSBridge-IOS

JavaScript与Native通信

JSBridge

DSBridge

相关链接