鸿蒙Next中如何调用H5的方法

在鸿蒙Next开发中，如何通过Web组件调用H5页面的JavaScript方法？能否提供具体的代码示例或实现步骤？比如H5页面定义了某个函数后，鸿蒙端该如何触发它？需要注意哪些兼容性问题？

2 回复

在鸿蒙Next中，用WebController的runJavaScript方法就能轻松调用H5的JS函数。比如：

webController.runJavaScript("window.h5Function()");

简单说，就是让鸿蒙和H5“握手”成功！😄

更多关于鸿蒙Next中如何调用H5的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中调用H5方法，主要通过Web组件与JavaScript交互实现。以下是具体步骤和示例代码：

1. 创建Web组件加载H5页面

在ArkTS/ArkUI中嵌入Web组件，并加载本地或远程H5页面：

import webview from '@ohos.web.webview';

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

  build() {
    Column() {
      // 加载本地H5文件（路径为resources/rawfile/）
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPageEnd(() => {
          console.info('页面加载完成');
        })
    }
  }
}

2. 注册JavaScript调用接口

通过registerJavaScriptProxy将ArkTS方法暴露给H5，允许H5调用：

// ArkTS侧注册方法
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 注册名为'handler'的接口供H5调用
    this.controller.registerJavaScriptProxy({
      // 定义H5可调用的方法
      showMessage: (msg: string) => {
        console.info('H5传递的数据: ' + msg);
      }
    }, 'handler');
  }
}

3. H5侧调用鸿蒙方法

在H5页面中，通过window.objName调用注册的方法：

<!DOCTYPE html>
<html>
<head>
    <title>H5调用鸿蒙</title>
</head>
<body>
    <button onclick="callHarmony()">点击调用鸿蒙方法</button>
    
    <script>
        function callHarmony() {
            // 调用ArkTS中注册的showMessage方法
            if (window.handler && window.handler.showMessage) {
                window.handler.showMessage('Hello from H5!');
            }
        }
    </script>
</body>
</html>

4. 鸿蒙调用H5方法

使用runJavaScript执行H5中的JavaScript函数：

// 在ArkTS中触发H5的JavaScript函数
this.controller.runJavaScript('window.h5Function("数据来自鸿蒙")');

关键注意事项：

  1. 权限配置：在module.json5中声明网络权限（如需加载远程H5）：
    "requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
]
  2. 安全限制：确保H5来源可信，避免注入恶意代码。
  3. 生命周期管理：在页面销毁时调用deleteJavaScriptProxy清理注册接口。

通过以上步骤，即可实现鸿蒙Next与H5的双向通信。

回到顶部