HarmonyOS NEXT ArkTS与H5的交互详解

ArkTS与H5的交互实现：JSBridge桥接机制详解

在现代移动应用开发中，ArkTS（ArkUI框架的TypeScript实现）与H5的交互是一个常见的需求。为了实现这种跨平台的交互，开发者通常需要借助JSBridge桥接机制。本文将详细介绍如何在ArkTS侧与H5之间建立JSBridge桥接，并通过具体的代码示例展示如何实现双向通信。

1. JSBridge桥接机制概述

JSBridge是一种用于连接原生代码（如ArkTS）与Web页面（H5）的桥梁。通过JSBridge，H5页面可以调用原生功能，而原生代码也可以将数据传递回H5页面。这种机制的核心在于通过JavaScript与原生代码的交互，实现双向通信。

在ArkTS与H5的交互中，JSBridge的主要职责是：

在ArkTS侧封装调用方法，供H5调用。
在H5侧提供调用原生方法的接口。
处理异步回调，将原生代码的执行结果返回给H5。

2. 初始化JSBridge

首先，我们需要在ArkTS侧定义一个JSBridge类，并在其中封装call方法和initJsBridge方法。initJsBridge方法的作用是将JSBridge初始化脚本注入到H5页面中，以便H5能够调用原生方法。

ini 复制代码

// CodeConstant.ets
export const code = `
const JSBridgeMap = {};
let callID = 0;
// 执行H5回调函数
function JSBridgeCallback (id, params) {
    JSBridgeMap[id](params);
    JSBridgeMap[id] = null;
    delete JSBridgeMap[id];
}

// 在window中声明callNative方法供H5调用
window.ohosCallNative = {
    callNative(method, params, callback) {
        const id = callID++;
        const paramsObj = {
            callID: id,
            data: params || null
        }
        JSBridgeMap[id] = callback || (() => {});
        JSBridgeHandle.call(method, JSON.stringify(paramsObj));
    }
}

在上述代码中，JSBridgeMap用于存储H5侧的回调函数，callID用于标识每次调用的唯一性。ohosCallNative对象是H5调用原生方法的入口，H5通过调用callNative方法，将方法名、参数以及回调函数传递给ArkTS侧。

3. 注入JavaScript对象到H5

接下来，我们需要通过Web组件的javaScriptProxy属性，将ArkTS侧的JSBridgeHandle对象注册到H5的window对象中。这样，H5就可以通过window.JSBridgeHandle调用ArkTS侧的方法。

kotlin 复制代码

// JsBridge.ets
export default class JsBridge {
    get javaScriptProxy(): JavaScriptItem {
        return {
            object: {
                call: this.call
            },
            name: "JSBridgeHandle",
            methodList: ['call'],
            controller: this.controller
        } as JavaScriptItem;
    }
}

// SelectContact.ets
@Entry
@Component
struct SelectContact {
    webController: WebView.WebviewController = new WebView.WebviewController();
    private jsBridge: JSBridge = new JSBridge(this.webController);
    build() {
        Column() {
            Web({
                src: $rawfile('MainPage.html'),
                controller: this.webController
            })
            .javaScriptAccess(true)
            .javaScriptProxy(this.jsBridge.javaScriptProxy)
        }
    }
}

在上述代码中，javaScriptProxy属性将JSBridgeHandle对象注入到H5的window对象中，H5可以通过window.JSBridgeHandle.call调用ArkTS侧的方法。

4. 实现call方法及回调

在ArkTS侧，call方法是H5调用原生方法的统一入口。根据H5传递的方法名，ArkTS侧会执行相应的逻辑，并通过callback方法将结果返回给H5。

typescript 复制代码

// JsBridge.ets
export default class JsBridge {
    call = (func: string, params: string): void => {
        const paramsObject: ParamsItem = JSON.parse(params);
        let result: Promise<string>;
        switch (func) {
            case 'chooseContact':
                result = this.chooseContact();
                break;
            default:
                break;
        }
        result.then((data: string) => {
            this.callback(paramsObject?.callID, data);
        })
    }
    callback = (id: number, data: string): void => {
        this.controller.runJavaScript(`JSBridgeCallback("${id}", ${JSON.stringify(data)})`);
    }
}

在call方法中，ArkTS侧根据H5传递的方法名执行相应的逻辑，并通过callback方法将结果回传给H5。callback方法通过runJavaScript执行H5侧的回调函数，将数据传递回H5。

5. H5调用ArkTS侧方法

在H5侧，只需要调用ohosCallNative.callNative方法，将方法名、参数以及回调函数传递给ArkTS侧即可。

javascript 复制代码

// mainPage.js
function chooseContact() {
    window.ohosCallNative.callNative('chooseContact', {}, (data) => {
        console.log(data);
    });
}

在上述代码中，H5通过ohosCallNative.callNative调用ArkTS侧的chooseContact方法，并在回调函数中处理返回的数据。

6. 总结

通过上述步骤，我们成功实现了ArkTS与H5之间的JSBridge桥接机制。ArkTS侧通过javaScriptProxy将方法注入到H5，H5通过ohosCallNative调用ArkTS侧的方法，并通过回调函数接收异步返回的数据。这种机制不仅实现了跨平台的交互，还为开发者提供了灵活的双向通信能力。

在实际开发中，开发者可以根据业务需求扩展JSBridge的功能，例如增加更多的方法调用、处理复杂的参数传递等。通过JSBridge，ArkTS与H5的交互将变得更加高效和便捷。