最近项目有遇到 小程序内嵌套webview的场景,整站嵌套的,这样就避免不了H5和小程序之间通信,小程序用的uniapp写的,H5是用vue写的,
首先在H5页面引入微信的JS
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
然后再引入uniapp 的JS
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
然后在H5页面 因为我的H5是用VUE写的 所以这段代码要放在VUE的mounted钩子函数里执行
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
options:'来自H5的问候'
}
});
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
uni.postMessage({
data: {
options:'来自H5的问候'
}
});
这个就是H5页面向uniapp页面传值的方法 要传的值一定要写到data里面!!!!!;
这样H5 就布置完了 主要是uniapp 端取值
先附上uniapp webview的文档 https://uniapp.dcloud.io/component/web-view
如文档所说的 在webview标签上绑定 @message,来获取H5传来的值
getMessage(e) {
console.log(e)
let data = e.detail.data
},
这样还不行!!!!
因为绑定的方法getMessage只有在特定情况下才被会调用
分享不适合我现在的需求 销毁。。没试,我是在后退这个时机调用取值的
首先把webview页面复制一份,一毛一样的,第一个webview 标签上不绑定message,在复制的webview页面绑定message 取值
第一个webview
<web-view :src="src"></web-view>
复制的webview
<web-view :src="src" @message="getMessage"></web-view>
然后在第一个webview页面里让页面一加载完就跳到复制的webview页面,额。。要加个判断条件 不然两个页面一直互跳...
//主webview
<template >
<view>
<web-view :src="src"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src:'https://xxxx',
nav:true,
};
},
onLoad(options) {
if(this.nav){
this.navto()
}
},
methods:{
navto(){
uni.navigateTo({
url:'../nwebview/nwebview'
})
},
}
}
</script>
然后进入复制的webview
<template >
<view>
<web-view :src="src" @message="getMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src:'https:xxx',
};
},
onLoad(options) {
setTimeout(()=>{
this.navto()
},3000)
},
methods:{
navto(){
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
// 然后改变第一个webview的nav状态 ,这样返回之后就不会再次跳过来了
prevPage.nav = false;
uni.navigateBack({
delta:1
})
},
getMessage(e) {
console.log(e.detail.data)
},
}
}
</script>
这样从第一个webview跳过来后 再使用navigateback就达到@message的调用条件了 其他细节就不说了
这样就可以通过getMessage方法来获取H5 传来的值了,
uniapp 给H5传值更简单 只要在webview的src地址上拼接就行了