公司小程序场景中需要用到webview中的bindmessage方法,因为不好好看文档,弄了好长时间,心碎,所以在这里给自己加深一下印象,要好好看文档。
方法的话,微信小程序原生写法和mpvue方法类似,在这里仅以mpvue为例,以转发为条件触发bindmessage事件
注意点
- 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。一定看清楚是小程序后退、组件销毁、分享时才会触发,我没看清弄了好长时间,蓝瘦香菇……
感觉这个方法有点坑,请慎用……,特定时机(小程序后退、组件销毁、分享)触发
小程序
template
web-view :src="url" @message="bindmessage"/web-viewscript
bindmessage(e){ console.log(e)}h5页面
html 引入js sdk
!-- html --script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"/scriptscript 向小程序传值的方法
// javascriptwx.miniProgram.postMessage({ data: 'foo' })wx.miniProgram.postMessage({ data: {foo: 'bar'} })所有代码 以转发为条件触发bindmessage事件
template div web-view :src="url" @message="bindmessage"/web-view /div/templatescriptimport store from '@/pages/counter/store'export default { data () { return { url:'' } }, store, onShareAppMessage(options) { return { title: 'title', path: this.url, success: function (res) { // that.web_url = return_url // 转发成功 wx.showToast({ title: "转发成功", icon: 'success', duration: 2000 }) }, fail: function (res) { // 转发失败 } } }, methods: { bindmessage(e){ console.log(e) } },}/scriptstyle scoped/style













