在 HarmonyOS Next 中开发，如何与 H5 页面进行数据通信？

Question

harmonyOS Next如何与h5页面交互开发

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在HarmonyOS Next中，与H5页面进行交互通常涉及到两种主要方式：使用Web组件加载H5页面和使用FeatureAbility进行Native与H5的通信。以下是一些基本步骤和示例：

使用Web组件加载H5页面
在布局文件中添加Web组件：

<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center">

    <Web
        ohos:id="$+id:webview"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</DependentLayout>

在Ability中加载H5页面：

import ohos.ace.ability.AceAbility;
import ohos.agp.components.webengine.WebAgent;
import ohos.agp.components.webengine.WebConfig;
import ohos.agp.components.webengine.WebView;

public class MyAbility extends AceAbility {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
        
        // 设置WebAgent以处理H5页面的各种事件
        webView.setWebAgent(new WebAgent() {
            @Override
            public void onLoadingPage(WebView webView, String url, PixelMap favicon) {
                // 页面开始加载
            }

            @Override
            public void onPageLoaded(WebView webView, String url) {
                // 页面加载完成
            }

            // 其他事件处理...
        });

        // 配置WebView
        WebConfig webConfig = webView.getWebConfig();
        webConfig.setJavaScriptPermit(true); // 允许执行JavaScript
        webConfig.setWebStoragePermit(true); // 允许使用Web存储

        // 加载H5页面
        webView.load("https://www.example.com");
    }
}

• Native与H5的交互
  从Native调用H5的JavaScript代码：

  webView.executeJs("javascript:yourJavaScriptFunction()", value -> {
    // 处理JavaScript执行结果
  });

• 从H5调用Native代码：
  在Native代码中定义JavaScript接口：

  webView.addJsCallback("nativeFunction", data -> {
    // 处理来自H5的调用
  });

• 在H5页面中调用Native定义的接口：

  // 假设nativeFunction是Native端暴露给H5的函数名
  window.nativeFunction("参数");

  确保在调用Native函数之前，Native端已经注册了对应的JavaScript接口。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。