uni-app 关于 webview 使用 postMessage 的问题，webview 中 postMessage 没有触发 @message

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 关于 webview 使用 postMessage 的问题，webview 中 postMessage 没有触发 @message

产品分类

uniapp/小程序/微信

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
第三方开发者工具版本号 webstorm
基础库版本号 3.3.4
项目创建方式 CLI
CLI版本号 @vue/cli@5.0.8

示例代码

webview页面：

document.addEventListener('UniAppJSBridgeReady', () => {
    uni.postMessage({
        data: {
            action: 'message'
        }
    });
    uni.getEnv(function (res) {
        // alert(JSON.stringify(res))
    });
});

uniapp：  
<web-view  
src="getIframeUrl"
      [@message](/user/message)="handleMessage"
  ></web-view>

const handleMessage = (ev) => {
    console.log('handleMessage>>>', ev)
}

操作步骤

uniapp vue3的项目中使用webview给uniapp应用发送postMessage消息

预期结果

能够调用[@message](/user/message)事件绑定的方法，并输出’handleMessage>>>’ event对象

实际结果

并没有调用[@message](/user/message)事件绑定的方法

bug描述

uniapp开发微信小程序，uniapp应用中使用了webview组件，我想通过postMessage实现iframe中的页面向uniapp应用发送通知，目前已经完全按照文档中的方法进行了编写，目前遇到的问题是，webview中网页通过uni发送postMessage正常，因为控制台中可以打印：invokeAppService postMessage {action: “message”} 29（这个信息不是我打印的），但是却不走[@message](/user/message)事件绑定的方法，但是复制链接之后会走[@message](/user/message)事件绑定的方法。

所以，简言之，webview使用postMessage，发送代码也没问题，[@message](/user/message)绑定方法也没问题，但是postMessage却没有走[@message](/user/message)方法。


Harmonyos Next教程
4 回复

解决了吗，也遇到这个问题了


@message不是只在webview的父页面后退、组件销毁、分享这种特定时机才触发吗

跪求大神帮忙，我也遇到了

在 uni-app 中使用 webview 组件并通过 postMessage 方法进行通信时，如果 webview 中的 postMessage 没有触发 @message 事件，可能是由于多种原因导致的。以下是一个基本的代码示例和排查步骤，帮助你定位和解决问题。

uni-app 端代码

首先，确保你在 uni-app 中正确使用了 webview 组件，并监听了 @message 事件。

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

<script>
export default {
  methods: {
    handleMessage(event) {
      console.log('Received message from webview:', event.detail.data);
    }
  }
}
</script>

Webview 端代码

在 webview 中，确保你使用了正确的方法发送消息。以下是一个简单的 HTML 页面示例，该页面通过 postMessage 向 uni-app 端发送消息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webview Page</title>
</head>
<body>
  <script>
    function sendMessageToUniApp() {
      const message = { type: 'greeting', text: 'Hello from webview!' };
      // 使用 window.parent.postMessage 发送消息给 uni-app
      window.parent.postMessage(JSON.stringify(message), '*'); // 注意：'*' 表示接受消息的来源，生产环境应替换为具体的来源
    }

    // 模拟发送消息
    window.onload = sendMessageToUniApp;
  </script>
</body>
</html>

排查步骤

  1. 检查 URL：确保 webview 的 src 属性中的 URL 是正确的，并且该页面能够正常加载。
  2. 跨域问题：如果 webview 加载的页面与 uni-app 不在同一个域下，确保 postMessage 的第二个参数（目标源）正确设置。在生产环境中，建议使用具体的来源而不是 '*'。
  3. 消息格式：确保发送的消息是字符串格式，如果发送的是对象，需要先使用 JSON.stringify 转换。
  4. 控制台日志：查看 uni-app 和 webview 端的控制台日志，看是否有错误信息。
  5. uni-app 版本：确保你使用的 uni-app 版本支持 webview 的 @message 事件。

通过上述步骤和代码示例，你应该能够定位并解决 webview 中 postMessage 没有触发 @message 事件的问题。如果问题依旧存在，请检查是否有其他代码或配置影响了通信。

回到顶部