鸿蒙Next中window.android.postmessage如何使用

在鸿蒙Next开发中，我想使用window.android.postmessage进行跨窗口通信，但不知道具体如何调用。能否提供一个完整的使用示例？包括参数传递方式、事件监听方法以及兼容性注意事项？目前测试时发现无法触发回调函数，可能是什么原因导致的？

2 回复

鸿蒙Next里没有window.android.postMessage，那是安卓的玩意儿。鸿蒙里用postMessage得靠WebviewController，具体写法是webviewController.postMessage("你的消息")。记得先获取webviewController对象，不然代码会像没放盐的菜——索然无味！

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


在鸿蒙Next（HarmonyOS NEXT）中，window.android.postMessage 方法用于在 Web 组件（WebView）与鸿蒙应用之间进行通信，允许 JavaScript 代码向原生侧发送消息。以下是使用步骤和示例代码：

1. 在鸿蒙原生侧配置 Web 组件

在 entry/src/main/ets 目录下的页面文件中，创建 Web 组件并注册 postMessage 事件监听器：

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

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

  build() {
    Column() {
      // 创建 Web 组件
      Web({
        src: "file:///entry/src/main/resources/rawfile/index.html", // 本地 HTML 路径
        controller: this.controller
      })
        .onControllerAttached(() => {
          // 注册消息监听
          this.controller.getJavaScriptProxy().onMessage((data: string) => {
            console.info("收到来自 Web 的消息: " + data);
            // 处理消息逻辑，例如解析 data 并执行原生操作
          });
        })
    }
  }
}

2. 在 Web 侧（HTML/JavaScript）调用 postMessage

在 HTML 文件中，通过 window.chrome.webview.postMessage（鸿蒙 NEXT 中可能使用此接口，具体名称需参考官方文档）发送消息。示例：

<!DOCTYPE html>
<html>
<head>
    <title>WebView 通信示例</title>
</head>
<body>
    <button onclick="sendMessageToApp()">发送消息到鸿蒙应用</button>

    <script>
        function sendMessageToApp() {
            // 发送消息到原生侧
            if (window.chrome && window.chrome.webview) {
                window.chrome.webview.postMessage("Hello from Web!");
            } else {
                console.error("WebView 通信接口不可用");
            }
        }
    </script>
</body>
</html>

关键点说明：

  • 接口名称：鸿蒙 NEXT 中可能使用 window.chrome.webview.postMessage（基于 Chromium 内核），具体需查看官方文档确认。
  • 数据格式：消息内容必须是字符串，如需传递复杂数据，可使用 JSON.stringify() 转换。
  • 安全性：确保仅信任的 Web 内容使用此功能，避免安全风险。

注意事项：

  • 鸿蒙 NEXT 的 API 可能随版本更新而变化，请参考最新官方文档。
  • 测试时确保 Web 组件已正确加载本地或远程 HTML 资源。

通过以上步骤，即可实现 Web 与鸿蒙原生应用之间的双向通信。

回到顶部