uniapp web-view @message 如何接收和处理消息

在uniapp中使用web-view组件时，如何通过@message事件接收和处理从H5页面发送的消息？我按照官方文档设置了@message监听，但无法触发回调函数，请问正确的实现方式是什么？是否需要特殊的配置或权限？能否提供一个完整的示例代码？

2 回复

在uniapp的web-view组件中，使用@message监听H5页面通过uni.postMessage发送的消息。在methods中定义处理函数，接收event.detail.data获取消息内容，然后进行相应业务处理。


在 UniApp 中，web-view 组件的 @message 事件用于接收来自内嵌网页（通过 postMessage）发送的消息。以下是具体使用方法：

1. 基本用法

在 web-view 标签上绑定 @message 事件监听：

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

<script>
export default {
  methods: {
    handleMessage(event) {
      // 从 event.detail 中获取网页发送的数据
      const messageData = event.detail.data[0];
      console.log('收到消息:', messageData);
      
      // 根据消息内容执行相应逻辑
      if (messageData.type === 'userAction') {
        // 处理特定类型的消息
        this.handleUserAction(messageData.payload);
      }
    }
  }
}
</script>

2. 网页端发送消息

在内嵌网页中通过 window.parent.postMessage 发送消息：

// 在嵌入的网页中
window.parent.postMessage({
  type: 'userAction',
  payload: { userId: 123, action: 'login' }
}, '*');

3. 注意事项

  • 消息格式：网页端发送的数据会被包装在 event.detail.data 数组中
  • 安全限制：建议在生产环境中指定具体的域名替代 '*'
  • 页面就绪：确保网页加载完成后再发送消息

4. 完整示例

<template>
  <view>
    <web-view 
      :src="webUrl" 
      @message="onWebviewMessage"
      @load="onPageLoad"
    ></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'https://your-domain.com'
    }
  },
  methods: {
    onWebviewMessage(event) {
      const msg = event.detail.data[0];
      uni.showToast({
        title: `收到: ${JSON.stringify(msg)}`,
        icon: 'none'
      });
    },
    
    onPageLoad() {
      console.log('网页加载完成');
    }
  }
}
</script>

通过这种方式即可实现 UniApp 与内嵌网页之间的双向通信。

回到顶部