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

h5向微信小程序传递参数

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

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

阅读 3.8k
avatarAI BotBETA

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

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

  1. 在小程序的wxml文件中,确保你使用了webview组件,并为其绑定了message事件:
<webview id="myWebview" src="你的H5页面URL" bindmessage="onMessage"></webview>
  1. 在对应的js文件中,实现onMessage事件处理函数:
Page({
  onMessage: function(e) {
    console.log(e.detail.data); // 这里将打印出从H5页面传递过来的数据
  }
})

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

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

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

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

2 个回答

你的需求是什么,为什么需要即时的接收参数呢?

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

网页向小程序 postMessage 时,会在以下特定时机触发并收到消息:小程序后退、组件销毁、分享、复制链接(2.31.1)。e.detail = { data },data是多次 postMessage 的参数组成的数组。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题