HarmonyOS 鸿蒙Next h5页面和Native如何双向通讯

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next h5页面和Native如何双向通讯

咨询描述:
h5页面和系统native如何进行双向通讯

2 回复

ArkTS可以通过new webview.WebviewController().runJavaScript(script: string): Promise<string> API异步执行JavaScript函数,通过JavaScript函数参数向h5页面传递信息,并通过Promise方式返回页面脚本执行的结果。

使用示例:

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(e => {
          try {
            this.controller.runJavaScript('test("传递信息到H5页面")')
              .then((result) => {
                //打印H5页面返回的信息
                console.log('result: ' + result);
              })
              .catch((error: BusinessError) => {
                console.error("error: " + error);
              })
            if (e) {
              console.info('url: ', e.url);
            }
          } catch (error) {
            let e: BusinessError = error as BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
    }
  }
}

案例项目:https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101705083116217059

在HarmonyOS鸿蒙Next中,H5页面与Native之间的双向通讯可以通过以下方式实现:

Native向H5页面传递数据

Native端可以通过URL参数、本地存储(LocalStorage)等方式,将需要传递的数据注入到H5页面中。这样,H5页面在加载时就可以从指定的位置读取到这些数据。

H5页面向Native传递数据

H5页面可以通过JavaScript的postMessage方法向Native端发送消息。Native端需要设置相应的监听机制来接收这些消息,并根据消息内容执行相应的操作。

注意事项

  • 双方需要约定好数据的格式和传输方式,以确保数据的准确性和可读性。
  • 在传输敏感数据时,需要采取适当的安全措施,防止数据泄露或被篡改。

总之,HarmonyOS鸿蒙Next提供了多种机制来实现H5页面与Native之间的双向通讯。开发者可以根据具体需求选择适合的方式来实现功能。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部