webview小程序用bindmessage为什么接收不到h5传过来的参数？

Question

h5向微信小程序传递参数

wx.miniProgram.postMessage({ data: {param: '123'} })

小程序用bindmessage为什么接受不到参数

Answer 1

看看文档中关于bindmessage的描述?
https://developers.weixin.qq.com/miniprogram/dev/component/we...

网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。

Answer 2

在微信小程序中，要接收来自H5页面的消息，你需要使用webview组件的message事件，而不是bindmessage。所以，你可能遇到的问题是因为你使用了错误的事件名称。

以下是如何在微信小程序中正确接收来自H5页面的消息的步骤：

1. 在小程序的wxml文件中，确保你使用了webview组件，并为其绑定了message事件：

<webview id="myWebview" src="你的H5页面URL" bindmessage="onMessage"></webview>

2. 在对应的js文件中，实现onMessage事件处理函数：

Page({  onMessage: function(e) {    console.log(e.detail.data); // 这里将打印出从H5页面传递过来的数据  }})

确保H5页面和小程序页面在同一域下，因为出于安全考虑，跨域的消息传递可能会被阻止。

如果你按照上述步骤操作后仍然无法接收消息，请检查以下几点：

• 确保H5页面和小程序页面在同一域下。
• 检查webview组件的src属性是否正确指向了H5页面的URL。
• 确保H5页面中的postMessage方法调用没有错误。
• 查看小程序的控制台输出，看是否有其他错误信息。

如果以上都没有问题，那么消息传递应该能够正常工作。如果仍然存在问题，请提供更详细的代码和错误信息，以便进一步诊断。