基于mpvue小程序和vue的H5的相互传参

1.小程序向H5传参数
当小程序跳转到H5页面的时候通过路径传参

<template>
  <div class="slyder-page">
    <web-view  :src="url"></web-view>
  </div>
</template>

定义的url后面直接拼接对应的参数？后面拼接对应的参数打开url

data () {
      return {
        url: ''
      }
    },
onLoad (options) {
this.url = h5页面的url?id=' + options.id + '&corpid=' + options.corpid
    }

2.基于vue脚手架H5页面向小程序传参数
在H5页面中
还需要在终端里面下载jweixin.js这个依赖，下载命令是
npm install weixin-js-sdk
首先在index.html里面引入

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

然后在对应的H5页面components中写对应的操作，我这里是写的click时
H5页面的html

<template>
 <div>
    <button @click="clickMessage">参数</button>
   </div>
</template>
<script>
    export default {
      data () {
        return {  }
      },
      methods: {
        clickMessage () {
          let info = {
            wboid: 'data',//参数一
            wid: 'http://localhost:8088',//参数二
          };
          let json = JSON.stringify(info);
          wx.miniProgram.postMessage({ data: json });
        }
      }
    }
</script>

小程序的html部分（本人的小程序是基于mpvue框架，非微信原生的）

<template>
  <div class="slyder-page">
   <web-view  :src="url" @message="getMessage"></web-view>
  </div>
</template>

小程序页面js

data () {
      return {
        url: ' http://localhost:8088'
      }
    }
methods: {
      /**
       * H5页面参数接受函数
       * @author ChengMinJuan
       * @date 2018/12/4
       * @param options H5页面传来的参数对象
       */
      getMessage (options) {
        // 接受H5页面的参数
        let messageData = JSON.parse(options.mp.detail.data)
        console.log(messageData)
      }
    },

在你点击跳转到H5页面是拿不到参数，当你在H5页面里面进行了相应的操作，（比如我这里的click事件，当我点击了对应的按钮，当我点击返回的时候会将H5页面的参数传过来。）
也就是说接受H5页面的参数不在onLoad函数中，而是将接受的参数的函数写在method里面（比如我这里的getMessage ()函数）。
小程序后退、组件销毁、分享触发并收到消息，这是postMessage的特殊之处。
（其实这句话是官方文档的，当时我就没理解，我后退了但是没有收到参数，后来发现，是因为在对应的H5中对应的按钮，没有操作所以肯定接受不到参数）
3.H5的其他传参形式
需要说明的是，这几种接受参数的方式是跳转到那个页面，就在那个页面接受该参数，不是在小程序的web-view嵌套的页面里面接受参数
比如说，我需要跳转带/pages/active/active这个页面，那对应的参数就要到这个页面去接受参数，这个参数可以在该页面的onLoad函数里面接收。

clickMessage() {
          let info = {
            wboid: 'data',//参数一
            wid: 'http://localhost:8088',//参数二
          };
          let json = JSON.stringify(info);
          //这种跳转方式是跳转到小程序指定页面 并携带此参数
          // wx.miniProgram.navigateBack({url:'/pages/my/my?json=' + json})
          // wx.miniProgram.navigateTo({ url: '/pages/active/active?json=' + json });
          // wx.miniProgram.reLaunch({ url: '/pages/active/active?json=' + json  });
        }

emmmm，我可能有说的不对的地方，欢迎大佬补充哈！毕竟本人菜鸟一枚