HarmonyOS 鸿蒙Next中Web组件与H5交互

HarmonyOS 鸿蒙Next中Web组件与H5交互 在 HarmonyOS 应用中，如何使用 Web 组件加载网页或本地 HTML？如何实现原生与 H5 页面的双向通信？如何拦截 H5 页面的请求？如何处理 H5 页面中的文件下载？如何优化 Web 组件的加载性能？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/HydroQuiz.git）

3 回复

Web 组件用于在应用中嵌入网页内容。

加载网页：

import { webview } from '@kit.ArkWeb';
@State webController: webview.WebviewController = new webview.WebviewController();
Web({ src: 'https://example.com', controller: this.webController })
  .width('100%')
  .height('100%')
  .javaScriptAccess(true)
  .domStorageAccess(true)
// 加载本地 HTML
Web({ src: $rawfile('study_report.html'), controller: this.webController })

原生调用 H5：

// 执行 JavaScript
this.webController.runJavaScript('updateData(' + JSON.stringify(data) + ')');
// 带回调的调用
this.webController.runJavaScript('getData()')
  .then((result) => {
    console.log('H5 返回:', result);
  });

H5 调用原生：

Web({ src: this.url, controller: this.webController })
  .javaScriptProxy({
    object: {
      // 暴露给 H5 的方法
      showToast: (message: string) => {
        promptAction.showToast({ message });
      },
      navigateTo: (page: string) => {
        router.pushUrl({ url: page });
      },
      getDeviceInfo: () => {
        return JSON.stringify({ platform: 'HarmonyOS' });
      }
    },
    name: 'NativeBridge',  // H5 中通过 window.NativeBridge 调用
    methodList: ['showToast', 'navigateTo', 'getDeviceInfo'],
    controller: this.webController
  })

H5 端调用：

// 在 H5 页面中
window.NativeBridge.showToast('来自H5的消息');
const info = window.NativeBridge.getDeviceInfo();

更多关于HarmonyOS 鸿蒙Next中Web组件与H5交互的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，Web组件通过WebController与H5页面进行交互。主要方式包括：

  1. JavaScript注入与调用：使用runJavaScript()执行JS代码，并通过addJavaScriptProxy()注册ArkTS对象供H5调用。
  2. 消息通信：通过onMessageEvent()监听H5的postMessage()消息，实现双向异步通信。
  3. 页面加载回调：在onPageEnd()等生命周期中注入JS接口或处理数据。

交互需在Web组件加载完成后，通过控制器调用相应方法完成。

在HarmonyOS Next中，Web组件（<Web>）是承载网页内容的核心组件。以下是针对您问题的技术实现要点：

1. 加载网页与本地HTML

  • 加载在线网页：通过src属性直接设置URL。
    Web({ src: 'https://www.example.com' })
  • 加载本地HTML：将HTML文件置于entry/src/main/resources/rawfile/目录下，通过$rawfile()引用。
    Web({ src: $rawfile('local.html') })

2. 原生与H5双向通信

  • ArkTS调用H5 JavaScript：使用runJavaScript()方法。
    webController.runJavaScript('javascriptFunctionInH5()');
  • H5调用ArkTS：
    1. 在ArkTS中通过javaScriptProxy()注册对象与方法供H5调用。
      Web({
  ...
})
.javaScriptProxy({
  object: {
    name: 'arktsBridge',
    method: {
      nativeMethod: (msg: string) => {
        // 处理来自H5的调用
      }
    }
  }
})
    2. 在H5中通过window.arktsBridge.nativeMethod()调用。

3. 拦截H5页面请求 使用onInterceptRequest()回调拦截网络请求，可进行修改、阻止或返回自定义响应。

Web({
  ...
})
.onInterceptRequest((event) => {
  // 根据event.request.url判断并处理
  // 返回InterceptRequestResult对象
})

4. 处理H5文件下载 监听onFileSelectorShow()事件。当H5触发文件下载时，此回调会被调用，您可以在其中实现原生文件保存或用户选择逻辑。

Web({
  ...
})
.onFileSelectorShow((event) => {
  // 通过event.result处理文件（如下载路径）
})

5. 优化Web组件加载性能

  • 预连接与预加载：对关键域名使用WebviewController的preconnect和prefetch方法。
  • 缓存策略：合理配置WebCacheMode。
  • 懒加载：非首屏Web组件可延迟创建或加载。
  • 组件复用：在列表等场景中复用Web组件实例。
  • 监控与调优：使用getWebPerformance()API获取性能指标进行针对性优化。

以上方法基于HarmonyOS Next的ArkUI框架与API，具体实现需参考对应版本的官方开发文档。

回到顶部