mpvue中web-view怎么使用bindmessage？

Question

如题，需求是h5页面传参给小程序接收，代码如下：

h5：

<template>
  <div>
    <button @click="postMessage">click</button>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'

export default {
  data () {
    return {
    }
  },

  methods: {
    postMessage () {
      const params = {
        wboid: 'data',
        wid: 'http://localhost:8080'
      }
      const data = JSON.stringify(params)
      wx.miniProgram.postMessage({ data })
    }
  }
}
</script>

小程序：

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

<script>
export default {
  data () {
    return {
      url: 'http://localhost:8081'
    }
  },

  methods: {
    bindmessage (e) {
      console.log(e)
    }
  }
}
</script>

h5的服务是localhost：8081，小程序是8080。
我在点击h5按钮的时候，小程序点击进入web-view的page直接就跳转到h5页面了，也没有打印任何信息，求解。

Answer 1

网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组