uni-app 使用web-view H5传参 小程序@message 触发不了 用官方的实例也不行

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

uni-app 使用web-view H5传参 小程序@message 触发不了 用官方的实例也不行
【报Bug】uniapp 使用web-view H5传参 小程序@message 触发不了 用官方的实例也不行

每次触发时小程序的控制台会把参数打印出来 但是用不了

image

Harmonyos Next教程
4 回复

网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。 <template>
<view>
<web-view src=“https://uniapp.dcloud.io/static/web-view.html” @message=“getMessage”></web-view>
</view>
</template>

<script> export default { methods: { getMessage(e) { console.log(e) uni.showModal({ content: JSON.stringify(e.detail), showCancel: false }) } } } </script> <style> </style>


谢啦 自己粗心了。

请问解决了吗，同样的问题，打印出来的在小程序怎样获取

在uni-app中使用<web-view>组件加载H5页面，并通过@message事件接收H5页面传递的消息，确实是一个常见的需求。如果你发现@message事件无法触发，即使按照官方实例操作也不行，可能是由于某些细节未处理好或者环境配置有误。以下是一个简化的代码示例，帮助你检查和定位问题。

uni-app 代码部分

首先，确保你的uni-app项目已经正确配置了<web-view>组件。以下是一个基本的页面结构：

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

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://your-h5-page-url.com/index.html' // 替换为你的H5页面URL
    };
  },
  methods: {
    handleMessage(event) {
      console.log('Received message from webview:', event.detail.data);
      // 在这里处理从H5页面接收到的消息
    }
  }
};
</script>

H5 页面代码部分

在你的H5页面中，确保使用了正确的方法向uni-app发送消息。以下是一个简单的JavaScript示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5 Page</title>
</head>
<body>
  <script>
    // 发送消息给uni-app
    function sendMessageToApp() {
      if (window.WeixinJSBridge) {
        // 微信小程序环境
        window.WeixinJSBridge.invoke('postMessage', { data: 'Hello from H5' }, function(res) {
          console.log('Message sent to app:', res);
        });
      } else if (window.postMessage) {
        // 其他环境，尝试使用标准的postMessage API（可能不适用于所有平台）
        window.parent.postMessage({ data: 'Hello from H5' }, '*');
      } else {
        console.error('postMessage API is not supported in this environment.');
      }
    }

    // 触发发送消息的事件，例如按钮点击
    document.getElementById('sendBtn').addEventListener('click', sendMessageToApp);
  </script>
  <button id="sendBtn">Send Message to App</button>
</body>
</html>

注意事项

  1. 确保H5页面URL正确：<web-view>的src属性必须指向一个有效的H5页面URL。
  2. 调试环境：在微信开发者工具中调试时，确保你的小程序基础库版本支持<web-view>的相关功能。
  3. 安全性：window.parent.postMessage的第二个参数（目标源）在实际应用中应该设置为更具体的源，以增强安全性。
  4. 平台差异：不同的小程序平台（如支付宝、百度等）可能对<web-view>的实现有细微差别，确保参考对应平台的官方文档。

通过上述代码示例和注意事项，你应该能够定位并解决@message事件触发不了的问题。如果问题依旧存在，建议检查uni-app和小程序平台的更新日志，查看是否有相关的已知问题或更新。

回到顶部