uniapp webview@message如何使用或监听消息

在uniapp中使用webview组件时，如何正确监听或接收@message事件？我在H5页面中通过postMessage发送了消息，但在uniapp端无法触发监听函数。请问需要在webview组件上添加哪些配置？是否需要特殊处理跨域问题？能否提供一个完整的示例代码？

2 回复

在uniapp中，使用webview组件时，通过@message事件监听H5页面发送的消息。示例：

<web-view src="https://example.com" @message="handleMessage"></web-view>

在methods中定义处理函数：

handleMessage(e) {
  console.log('收到消息:', e.detail.data)
}

H5页面需使用uni.postMessage()发送消息。


在 UniApp 中，webview 组件的 @message 事件用于监听来自内嵌网页（通过 src 属性加载的页面）发送的消息。这通常用于 UniApp 与内嵌 H5 页面之间的通信。以下是使用方法和步骤：

1. 基本用法

  • 在 webview 组件上绑定 @message 事件监听器。
  • 当 H5 页面调用 window.parent.postMessage 发送消息时，UniApp 会触发该事件。

示例代码：

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

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://example.com' // 替换为你的 H5 页面 URL
    };
  },
  methods: {
    handleMessage(event) {
      // event.detail.data 包含 H5 页面发送的数据
      console.log('收到 H5 消息:', event.detail.data);
      // 可以在这里处理消息，例如更新页面数据或调用 UniApp 方法
    }
  }
};
</script>

2. H5 页面发送消息

  • 在 H5 页面中，使用 window.parent.postMessage 向 UniApp 发送消息。
  • 消息必须是字符串格式，通常使用 JSON.stringify 转换对象。

H5 页面示例代码：

<!DOCTYPE html>
<html>
<body>
  <button onclick="sendMessageToUniApp()">发送消息到 UniApp</button>
  <script>
    function sendMessageToUniApp() {
      const message = { type: 'fromH5', data: 'Hello UniApp!' };
      window.parent.postMessage(JSON.stringify(message), '*');
    }
  </script>
</body>
</html>

3. 注意事项

  • 消息格式：H5 发送的消息必须是字符串，UniApp 的 event.detail.data 会直接接收该字符串。如果需要对象，需在 UniApp 中手动解析 JSON.parse(event.detail.data)。
  • 安全性：确保 H5 页面来源可信，避免恶意代码注入。
  • 平台兼容性：webview 组件在所有平台（H5、App、小程序）均支持，但部分小程序环境可能有额外限制（如微信小程序需配置域名白名单）。

4. 完整流程

  • UniApp 加载 H5 页面。
  • H5 页面通过 postMessage 发送消息。
  • UniApp 通过 @message 事件捕获并处理消息。

通过以上步骤，你可以实现 UniApp 与内嵌 H5 页面的双向通信。如有问题，请检查 H5 页面代码和 UniApp 事件绑定是否正确。

回到顶部