uniapp 在app和小程序端使用webview进行数据交互
结论：app端支持比较好可以做到实时传递，微信小程序支持比较差，小程序向url传参只能通过url，url向app传参需要特定时机（后退、组件销毁、分享、复制链接）触发才能收到消息。
以下是代码
- app端（需要使用nvue）
<template>
<view class="webview-box">
<button style="z-index: 999;" @click="handlePostMessage('app向url传值')">点击向url传值</button>
<web-view ref="webview" class="webview" src="http://192.168.18.103:8080/index?os=wx" @onPostMessage="PostMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url:'http://192.168.18.103:8080/index?os=wx'
}
},
onLoad() {
this.url += '&t=' + new Date().getTime()
},
methods: {
// 接收h5页面发来的键值判断需要执行的操作
PostMessage(evt) {
console.log("postMessage: ", evt)
uni.showModal({
title:"提示",
content:evt.detail.data[0].msg
})
},
// 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯
handlePostMessage(res) {
console.log("22")
this.$refs.webview.evalJs(`handleMessage('${res}')`);
}
}
}
</script>
<style>
.webview-box {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.webview {
flex: 1;
height: 300rpx;
}
</style> - 微信小程序端（正常vue格式）
<template>
<view class="webview-box">
<web-view ref="webview" class="webview" :src="url" @onPostMessage="PostMessage" @message="PostMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url:'http://192.168.18.103:8080/index?os=wx'
}
},
onLoad() {
this.url += '&t=' + new Date().getTime()
},
methods: {
// 接收h5页面发来的键值判断需要执行的操作
PostMessage(evt) {
console.log("postMessage1: ", evt)
},
// 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯
handlePostMessage(res) {
console.log("22")
}
}
}
</script>
<style>
.webview-box {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.webview {
flex: 1;
height: 300rpx;
}
</style>
3、html端
<template>
<view class="webview-box">
<web-view ref="webview" class="webview" :src="url" @onPostMessage="PostMessage" @message="PostMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url:'http://192.168.18.103:8080/index?os=wx'
}
},
onLoad() {
this.url += '&t=' + new Date().getTime()
},
methods: {
// 接收h5页面发来的键值判断需要执行的操作
PostMessage(evt) {
console.log("postMessage1: ", evt)
},
// 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯
handlePostMessage(res) {
console.log("22")
}
}
}
</script>
<style>
.webview-box {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
.webview {
flex: 1;
height: 300rpx;
}
</style> 本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
