基于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，我可能有說的不對的地方，歡迎大佬補充哈！畢竟本人菜鳥一枚