小菜啊
小菜啊
  • 发布:2023-09-20 18:07
  • 更新:2024-04-25 17:52
  • 阅读:1373

微信小程序webview怎么与vue页面通讯

分类:uni-app

uniapp开发微信小程序,webview链接的页面是vue的,vue页面引入的weixin-js-sdk
小程序页面代码

<web-view :src="uri" @message="webviewMsg"></web-view>  

webviewMsg(e){console.log('webview massage',e)}

vue页面代码

this.$wx.miniProgram.postMessage({data:JSON.stringify(data)});  
this.$wx.miniProgram.navigateBack()

使用jssdk的postMessage方法不触发打印,但是开发者工具控制台打印了 invokeAppService postMessage 和参数,
使用window.postMessage也不行,连 invokeAppService postMessage 都不打印了
尝试过把@message换成@bindmessage也没有触发
有没有小伙伴知道问题的,求解答

2023-09-20 18:07 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

你要先确认一下 this.$wx 是否引入成功
或者是用另一种方法试试
在vue项目中 public下的index.html 引入 wxsdk

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

然后使用 wx.miniProgram.postMessage() 试试

  • 小菜啊 (作者)

    this.$wx 引入成功了,this.$wx.miniProgram.navigateBack()也返回上一页了

    2023-09-20 18:41

  • 小菜啊 (作者)

    index.html 引入 wxsdk 同样不触发@message,控制台有打印invokeAppService postMessage

    2023-09-20 18:44

小菜啊

小菜啊 (作者) - 业精于勤荒于嬉

1***@qq.com

1***@qq.com

请问这个问题解决了么?

  • 小菜啊 (作者)

    我当时换了一个版本的hbx

    2023-11-08 11:00

5***@qq.com

5***@qq.com

我也卡在这里了,请问楼主解决了吗?看微信小程序文档说是postMessage不支持实时通信。但是uni app本身能实时接收到这个postMessage的消息,也就是你提到的“invokeAppService postMessage 和参数”,但是不知道怎么手动处理这个消息。

  • 小菜啊 (作者)

    没法处理

    2024-04-12 14:00

1***@qq.com

1***@qq.com

wx.miniProgram.postMessage(),是在特定时机(后退、销毁、分享)时候触发,注意!:是在特定时机后触发,所以只需要将两行代码调整下位置就可触发,无invokeAppService postMessage出现。

  this.$wx.miniProgram.navigateBack()  
  this.$wx.miniProgram.postMessage({data:JSON.stringify(data)});  

要回复问题请先登录注册