微信小程序> 微信小程序mpvue,webview中h5页面向小程序发送数据bindmessage方法

微信小程序mpvue,webview中h5页面向小程序发送数据bindmessage方法

浏览量:1017 时间: 来源:Shuah153

公司小程序场景中需要用到webview中的bindmessage方法,因为不好好看文档,弄了好长时间,心碎,所以在这里给自己加深一下印象,要好好看文档。
方法的话,微信小程序原生写法和mpvue方法类似,在这里仅以mpvue为例,以转发为条件触发bindmessage事件

注意点
  • 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。一定看清楚是小程序后退、组件销毁、分享时才会触发,我没看清弄了好长时间,蓝瘦香菇……

感觉这个方法有点坑,请慎用……,特定时机(小程序后退、组件销毁、分享)触发

小程序

template
web-view :src="url" @message="bindmessage"/web-view
script
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"/script
script  向小程序传值的方法
// 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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎