uni-app webview发送消息后@message的函数没触发

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

uni-app webview发送消息后@message的函数没触发
小程序页面代码

img

img

H5代码

img

img

点击后小程序返回的打印是这样的

img

这样不是在@message函数中返回的所以获取不到,为什么@message的函数没触发的呢


1 回复

在处理uni-app中webview组件的@message事件未触发的问题时,首先需要确保几个关键点:

  1. 确保webview的src属性正确设置:确保webview加载的页面可以正确发送postMessage。
  2. 确保@message事件绑定正确:在uni-app的webview组件上,需要正确绑定@message事件处理函数。
  3. 确保消息发送格式正确:在webview内部发送消息时,需要使用window.postMessage方法,并且格式正确。

以下是一个简单的示例,展示如何在uni-app中设置webview并处理@message事件:

uni-app页面代码

<template>
  <view>
    <web-view :src="webviewSrc" [@message](/user/message)="handleMessage"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewSrc: 'https://your-webview-url.com' // 替换为实际的webview页面URL
    };
  },
  methods: {
    handleMessage(event) {
      // 处理从webview接收到的消息
      console.log('Received message from webview:', event.detail.data);
      // 你可以在这里处理接收到的数据,例如更新页面状态等
    }
  }
};
</script>

Webview内部页面代码(HTML + JavaScript)

确保你的webview加载的页面(在这个例子中是https://your-webview-url.com)能够发送消息:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webview Page</title>
</head>
<body>
  <script>
    // 发送消息到uni-app
    function sendMessageToUniApp(message) {
      // 使用postMessage发送消息,这里假设uni-app的webview可以接收这个消息
      window.parent.postMessage(JSON.stringify(message), '*');
    }

    // 示例:在页面加载完成后发送一条消息
    window.onload = function() {
      sendMessageToUniApp({ type: 'hello', content: 'This is a message from webview' });
    };
  </script>
</body>
</html>

注意事项

  • 确保uni-app的webview组件和内部的HTML页面都正确无误。
  • 如果你的webview页面不是由你控制的,需要确认该页面是否支持通过window.postMessage发送消息,并且是否有安全策略限制。
  • 如果@message事件仍未触发,检查是否有跨域问题或安全限制(如Content Security Policy, CSP)阻止消息传递。

以上代码提供了一个基本的框架,你可以根据需要进行调整。如果问题依旧存在,可能需要更详细地检查网络请求、日志或控制台输出,以找到潜在的问题所在。

回到顶部