HarmonyOS开发过程中ArkTs和H5之间相互通信

在鸿蒙开发过程中我们常常用到后面中加载一个h5页面就是webview组件中加载可以一个h5的页面但是他们之间有需要有一些通信例如h5需要掉用一些原生的api或者原生的方法。原生页面中又需要掉用h5的函数。通过阅读华为官方文档中是有一些api可以实现我们想要的效果的。如果是h5掉用原生函数的话使用Web()…javaScriptProxy(object: this.testObj,name: “testObjName”,methodList: [“test”],controller: this.webviewController)其中this.testObj是h5掉用原生的方法合集封装的一个类在加载web的页面中new出来name就是在h5中掉用的方法自定义名字methodList就是需要注册到h5中的方法的数组controller就是加载web的controller。在h5中就可以以window.testObjName.test()掉用了如果是原生中掉用h5的话使用this.webviewController.runJavaScript()括号里面可以直接写h5的方法的用包裹即可例如this.webviewController.runJavaScript(function changeColor(){document.getElementById(text).style.color red}),也可以使用this.webviewController.runJavaScript(htmlTest(${param})).当然为了方便统一管理可以封装一个桥JsBridge。import web_webview from ‘ohos.web.webview’;import { contact } from ‘kit.ContactsKit’;// 补充完整类实现export class JsBridge {private controller: web_webview.WebviewController;constructor(controller: web_webview.WebviewController) {this.controller controller;}// JS调用原生方法call (func: string, params: string): void {const paramsObj JSON.parse(params) as SelectContactParams;switch (func) {case ‘selectContacts’:this.handleSelectContact(paramsObj.callID);break;// 添加其他功能case…}}// 处理联系人选择private handleSelectContact(callID: number) {// 实现原生联系人选择逻辑…const contacts: Contact[] [{ name: “张三”, phone: “13800138000” }];let result: Promisestring new Promise((resolve) resolve(‘’));this.chooseContact().then((data: string) {this.executeH5Callback(callID, data);})// this.executeH5Callback(callID, contacts);}// 回调H5方法executeH5Callback(callID: number, data: Object) {const script window.handleNativeCallback(${callID}, ${JSON.stringify(data)});this.controller.runJavaScript(script); // 执行JS回调}callback (id: number, data: string): void {this.controller.runJavaScript(JSBridgeCallback(${id}, ${JSON.stringify(data)}));}chooseContact (): Promisestring {let phone ‘’;let name ‘’;return new Promise((resolve) {let promise contact.selectContact();promise.then((info: Arraycontact.Contact) {info.forEach((item: contact.Contact) {phone item?.phoneNumbers ? item?.phoneNumbers[0].phoneNumber : ‘’;name item?.name ? item?.name?.fullName : ‘’;})resolve(phone ‘_’ name);}).catch((err: object | string) {console.error(selectContact fail: err-${JSON.stringify(err)});});})}// 注册JS代理对象javaScriptProxy(): JavaScriptItem {return {object: {call: this.call},name: “JSBridgeHandle”,methodList: [‘call’],controller: this.controller};}}// 在文件顶部为JavaScriptItem接口添加类型声明export interface callType {call: (func: string, params: string) void}export interface JavaScriptItem {object: callType,name: string,methodList: Arraystring,controller: WebviewController}// 在文件顶部添加联系人接口定义interface Contact {name?: string;phone?: string;}interface SelectContactParams {callID: number,data: Contact}在h5中掉用window.JSBridgeHandle.call(‘selectContacts’, JSON.stringify({ callID }));WebPage页面中private controller: web_webview.WebviewController new web_webview.WebviewController();private jsBridge: JsBridge new JsBridge(this.controller);Web().javaScriptProxy(this.jsBridge.javaScriptProxy())掉用。上面就是arkts和h5通信的全部内容了