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

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

注意点

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

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

小程序

template

:src="url" @message="bindmessage"></web-view>

script

bindmessage(e){
  console.log(e)
}

h5页面

html 引入js sdk

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

script 向小程序传值的方法

// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

所有代码 以转发为条件触发bindmessage事件

<template>
  <div>
    <web-view :src="url" @message="bindmessage">web-view>
  div>
template>
<script>
import 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)
    }
  },

}
script>

<style scoped>

style>