需求：小程序嵌入H5頁面，并需要H5中的參數(shù)請求數(shù)據(jù)

思路： 在H5中判斷是否是微信小程序中 ====》在小程序環(huán)境中傳值給微信小程序 ====》微信小程序接收H5傳遞的值

實現(xiàn)：

H5中

var ua = window.navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i) == 'micromessenger') {? ? //判斷是否是微信環(huán)境

? ? // 微信環(huán)境

? ? wx.miniProgram.getEnv(function (res) {

? ? ? ? if (res.miniprogram) {? //小程序環(huán)境

? ? ? ? ? ? var msg= {

? ? ? ? ? ? ? ? openid: '111'

? ? ? ? ? ? }

? ? ? ? ? ? wx.miniProgram.postMessage({

? ? ? ? ? ? ? ? ? ? //這個方法在小程序文檔中有，H5向小程序傳值

? ? ? ? ? ? ? ? ? ? //[附上官方地址](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)

? ? ? ? ? ? ? ? ? ? ? //這里一定要將數(shù)據(jù)放在dada中

? ? ? ? ? ? ? ? ? data: {

? ? ? ? ? ? ? ? ? ? message: msg

? ? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? ? //H5向小程序傳值的方法會在特定的時間觸發(fā)，因此需要我們手動寫一個跳轉(zhuǎn)（也可以寫后退和摧毀，分享，以需求而定）

? ? ? ? ? ? ? wx.miniProgram.redirectTo({

? ? ? ? ? ? ? ? ? url: '../pay/wxpay' //這里是小程序頁面

? ? ? ? ? ? ? })

? ? ? ? ? } else {

? ? ? ? ? ? ? //非小程序環(huán)境下邏輯

? ? ? ? ? ? ? console.log('不在小程序中')

? ? ? ? ? }

? ? ? })

? }

小程序中：

wxml

<web-view src="{{link}}" bindmessage="handlePostMessage"></web-view>

wxjs

Page({

? data: {

? ? url: 'url: 'https://www.baidu.com' //這里是H5的地址

? }，

? onLoad: function (options) {},

? // 接收 h5 頁面?zhèn)鬟f過來的參數(shù)

? handlePostMessage: function (e) {

? ? let resObj = e.detail.data[e.detail.data.length - 1];

//多次傳遞會是數(shù)組的形式，傳遞一次會push進數(shù)組，所以我們需要拿到最新的數(shù)據(jù)，也就是數(shù)組的最后一個子集

? ? console.log(resObj.message)

? }

})