uniapp打包的h5 如何触发@message事件

在uniapp打包的H5页面中，如何正确触发[@message](/user/message)事件？我在使用uni-webview或iframe等组件时，发现跨域通信时无法接收到message事件回调。尝试了postMessage传参和监听window.addEventListener(‘message’)，但H5端始终无法触发@message事件。请问正确的实现方式是什么？是否需要特殊配置或权限设置？

2 回复

在uniapp的H5中，使用uni.webview.postMessage发送消息，父页面通过@message接收。确保webview组件正确绑定@message事件。


在 UniApp 中，H5 平台通过 uni.webview.1.0.js 库支持 Webview 通信，@message 事件用于接收从 Webview 页面发送的消息。以下是触发方法：

步骤：

  1. 引入官方库：在 H5 页面中引入 uni.webview.1.0.js（通常由 UniApp 自动处理）。
  2. 发送消息：在 Webview 页面使用 uni.postMessage 发送数据。
  3. 监听事件：在父页面（嵌套 Webview 的页面）使用 @message 监听。

示例代码：

父页面（Vue 文件）：

<template>
  <web-view :src="webviewUrl" @message="handleMessage"></web-view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://your-h5-page-url' // 替换为实际 H5 页面 URL
    };
  },
  methods: {
    handleMessage(event) {
      // 接收来自 Webview 的消息
      console.log('收到消息:', event.detail.data);
    }
  }
};
</script>

Webview 内嵌的 H5 页面：

<!DOCTYPE html>
<html>
<head>
  <title>H5 Page</title>
  <!-- 确保 UniApp Webview JS 已加载 -->
  <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-webview/uni.webview.1.0.js"></script>
</head>
<body>
  <button onclick="sendMessage()">发送消息</button>

  <script>
    function sendMessage() {
      // 触发 @message 事件
      uni.postMessage({
        data: {
          type: 'fromH5',
          content: 'Hello from H5!'
        }
      });
    }
  </script>
</body>
</html>

注意事项：

  • 域名限制：确保 H5 页面与父页面同域或已配置跨域权限。
  • 环境支持：仅 H5 平台支持；App 平台需使用 uni.webView API。
  • 测试时使用 HTTPS 或本地服务器，避免协议问题。

通过以上步骤，点击 H5 页面的按钮即可触发父页面的 @message 事件。

回到顶部