请阐述在HarmonyOS中如何使用Web组件进行混合开发？-CSDN博客

本文链接：https://blog.csdn.net/m0_66179704/article/details/141960063

1.创建WebviewController：首先，你需要创建一个 WebviewController 的实例。

controller: web_webview.WebviewController = new web_webview.WebviewController();

2.加载网页：你可以通过 Web 组件的 src 属性来加载网络页面或本地页面。对于网络页面，直接提供URL字符串；对于本地页面，使用 $rawfile 函数指定本地文件路径。

Web({ src: 'http://www.example.com', controller: this.controller })

3.通讯机制：为了实现ETS与H5的通讯，你可以使用 runJavaScript 方法执行H5页面中的JavaScript代码，或者通过监听H5页面中的事件来接收从H5页面发送的数据。

①从ETS发送数据到H5：使用 runJavaScript 方法执行H5中的函数。

this.controller.runJavaScript('javascriptFunction("data")');

②从H5发送数据到ETS：在H5页面中，你可以使用 window.ohosCallNative 对象来调用ETS中的方法，并通过回调函数接收数据。

// 在H5页面中
function callNativeMethod() {
  window.ohosCallNative.callNative('nativeMethod', {}, function(response) {
    console.log('Received from ETS:', response);
  });
}

4.处理权限：确保在 module.json5 文件中添加了网络权限。

{
  "requestPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

5.监听事件：你可以为 Web 组件设置各种事件监听器，如 onPageStarted、onPageFinished 等，来响应页面加载的不同阶段。

6.调试：在开发过程中，你可以使用DevEco Studio的调试工具来调试Web组件和页面。

例如，使用支付宝第三方支付

使用Web组件通过src发起支付宝接口请求
监听Web组件的网络请求变化，如果发现/pay/redirect 关键标识，证明支付已经完成
解析回调参数（如果payResult参数为true，即为成功）

使用Web组件加载页面官方文档