vue 跳转到uniapp ，只能微信小程序
需求：小程序嵌入H5页面，并需要H5中的参数请求数据
思路：在H5中判断是否是微信小程序中 ====》在小程序环境中传值给微信小程序 ====》微信小程序接收H5传递的值
实现：
H5中
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') { //判断是否是微信环境
// 微信环境
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) { //小程序环境
var msg= {
openid: '111'
}
wx.miniProgram.postMessage({
//这个方法在小程序文档中有，H5向小程序传值
//[附上官方地址](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)
//这里一定要将数据放在dada中
data: {
message: msg
}
});
//H5向小程序传值的方法会在特定的时间触发，因此需要我们手动写一个跳转（也可以写后退和摧毁，分享，以需求而定）
wx.miniProgram.redirectTo({
url: '../pay/wxpay' //这里是小程序页面
})
} else {
//非小程序环境下逻辑
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 页面传递过来的参数
handlePostMessage: function (e) {
let resObj = e.detail.data[e.detail.data.length - 1];
//多次传递会是数组的形式，传递一次会push进数组，所以我们需要拿到最新的数据，也就是数组的最后一个子集
console.log(resObj.message)
}
})
0人点赞
作者：偶尔冒泡_
链接：https://www.jianshu.com/p/2cc9d7ee9da7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
