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

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

實(shí)現(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({

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

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

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

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

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

? ? ? ? ? ? ? ?? }

? ? ? ? ? ?? });

? ? ? ? ? ?? //H5向小程序傳值的方法會(huì)在特定的時(shí)間觸發(fā)，因此需要我們手動(dòng)寫一個(gè)跳轉(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];

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

? ? console.log(resObj.message)

? }

})

0人點(diǎn)贊

日記本

作者：偶爾冒泡_

鏈接：http://www.itdecent.cn/p/2cc9d7ee9da7

來源：簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。