uniapp的小程序中使用web-view进行相互传参，并监听web-view的返回键
一、unaipp给webview传参
//uniapp页面中
<web-view :src="src" @message="getMessage" @onPostMessage="getPostMessage">
</web-view>
data() {
return {
nowObj:{
name:'' 我是uniapp的值",
},
src:" "
}
},
onLoad() {
this.src = 'http://192.168.28.57:3333/#/signin?itemObj=' + JSON.stringify(this.nowObj)
},
H5页面中
1.引入微信js https://res.wx.qq.com/open/js/jweixin-1.4.0.js
2.引入 uniapp 的jdk文件（去官网下到本地）（引入一定要放到body下面，不然UniAppJSBridgeReady不生效）
3.写好UniAppJSBridgeReady
文章来源地址https://www.toymoban.com/news/detail-717265.html
vue页面中接收值
//直接在mounted中获取
JSON.parse(this.$route.query.itemObj) //获取到uniapp传过来的值
二、webview给unaipp传参 （index.html跟上面一样要写）
在vue的h5页面中
methods:{
// 监听返回事件
backChange(){
uni.postMessage({
data: {
action: 'message'
}
})
},
}
在uniapp页面中通过@message拿值
<web-view :src="src" :update-title="false" @message="getMessage" @onPostMessage="getPostMessage">
</web-view>
methods: {
getMessage(e) {
console.log('拿到webview传来的值', e);
},
}
三、监听webview的返回键，控制是否返回小程序还是返回上一页
原因：官方说小程序使用web-view是隐藏不了导航栏的，所以只能做个监听浏览器返回按钮的操作
在需要返回小程序的页面中写入一下代码（不写的话就是简单的浏览器返回上一页）
destroyed(){
//销毁监听
window.removeEventListener('popstate',this.backChange,false)
},
mounted() {
if(window.history && window.history.pushState){
history.pushState(null, null, document.URL);
window.addEventListener('popstate',this.backChange,false)
}
},
methods:{
// 监听返回事件并传参
backChange(){
uni.postMessage({
data: {
action: 'message'
}
})
//navigateBack必填，否则关闭不了
uni.navigateBack()
},
}
文章来源：https://www.toymoban.com/news/detail-717265.html
到了这里，关于uniapp的小程序中使用web-view进行相互传参，并监听web-view的返回键的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
