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

最新推荐文章于 2024-08-21 10:51:18 发布

浮沉半生

最新推荐文章于 2024-08-21 10:51:18 发布

阅读量7.3k

点赞数 6

分类专栏：前端开发 IOS 开发安卓开发 JavaScript 文章标签：前端开发 JavaScriptBridge 安卓开发 IOS 开发

本文链接：https://blog.csdn.net/zgd826237710/article/details/95518433

版权

本文提供了一种使用JSBridge在H5与原生iOS（Objective-C和Swift）、Android（Java和Kotlin）之间进行交互的方法。详细介绍了H5、iOS、Android端的代码实现，包括初始化、事件函数注册和调用。同时提供了Demo地址供参考。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

本文详细讲述了如何使用 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 () {