h5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
<script src="./index.js"></script>
</head>
<body>
<button id="btn">发送数据</button>
<script>
window.onload=function(){
let btn=document.getElementById("btn")
btn.onclick=function(){
wx.miniProgram.postMessage({ data: 'foo' })
console.log("提交成功了哦")
}
}
</script>
</body>
</html>
index.js就是微信的js sdk
https://res.wx.qq.com/open/js/jweixin-1.3.2.js 这个连接下载
小程序或者Uniapp中
<web-view src="http:www.text.com/index.html" bindmessage="bdinmaeeage"></web-view>
js中
bdinmaeeage(e){
console.log("获取到数据了")
}
按上面那种写法，你会发现怎么回事？bdinmaeeage接收不到消息？
那我们来看官方文档
bindmessage:网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。
他这个是有触发条件的： 小程序后退、销毁组件、分享、复制连接才会调用的。并不是我们所想象的实时传递消息
上方的代码，操作之后点击分享小程序段就收到信息了
uniapp 中如何与webview通信
html中引入uniapp sdk
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
再通过
uni.postMessage({
data: {
action: 'message'
}
});
传递信息，注意的是event.detail.data 中的数据，以数组的形式接收每次 post 的消，传递的消息信息，必须写在 data 对象中。
uniapp中接收
<web-view src="https://example.com" @message="onMessage"></web-view>
onMessage(e) {
console.log('Received message from web page:', e.detail.data);
uni.showToast({
title: e.detail.data,
icon: 'none'
});
}
网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。
本文转载自: https://blog.csdn.net/u010843503/article/details/134284857
版权归原作者 初遇你时动了情 所有， 如有侵权，请联系我们删除。
版权归原作者 初遇你时动了情 所有， 如有侵权，请联系我们删除。