使用 JSBridge 与原生 IOS、Android 进行交互（含 H5、Android、IOS 端代码，附 Demo）

本文详细讲述了如何使用 JSBridge 在 H5 和原生 Android、IOS之间进行交互。IOS 端包含 OC 和 Swift 的版本，Android 端包含 Java 和 Kotlin 版本。

一、写在前面

本文主要是通过代码讲述了如何使用 JSBridge 在 H5 和 原生之间进行通信。文中包含 H5、IOS、Android 三部分的代码。
IOS 中使用 OC 和 Swift 分别进行了代码实现。Android 中使用 Java 和 Kotlin 分别进行了代码实现。

Demo 地址：jsbridge-example

• JSBridgeH5：H5 端代码实现
• JSBridgeIOSOC：原生 IOS 端 OC 代码实现
• JSBridgeIOSSwift：原生 IOS 端 Swift 代码实现
• JSBridgeAndroidJava：原生 Android 端 Java 代码实现
• JSBridgeAndroidKotlin：原生 IOS 端 Kotlin 代码实现

本文没有讲解关于原理的部分，只是详细使用代码介绍了 JSBridge 的使用。想要了解原理的朋友，可以另行搜索关于原理的博客。

---

二、H5 端代码

• 初始化 WebViewJavascriptBridge，方式代码如下
• 注册供原生调用的事件函数：
  window.setupWebViewJavascriptBridge(bridge => bridge.registerHandler('fnName', function) )
• 调用原生事件函数：
  window.setupWebViewJavascriptBridge(bridge => bridge.callHandler('fnName', data, callback) )

1、初始化 WebViewJavascriptBridge

在项目入口文件或者根 js 文件下，添加以下代码：

// 这里根据移动端原生的 userAgent 来判断当前是 Android 还是 ios
const u = navigator.userAgent;
// Android终端
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
// IOS 终端
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 

/**
 * 配合 IOS 使用时的初始化方法
 */
const iosFunction = (callback) => {
   
    if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge) }
    if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback) }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function(){
   
         document.documentElement.removeChild(WVJBIframe);
    }, 0);
}

/**
 * 配合 Android 使用时的初始化方法
 */
const androidFunction = (callback) => {
   
    if (window.WebViewJavascriptBridge) {
   
        callback(window.WebViewJavascriptBridge);
    } else {
   
        document.addEventListener('WebViewJavascriptBridgeReady', function () {
   
            call