uniapp开发微信小程序通过webview嵌入了外部网页,在外部网页端使用postMessage传值小程序端接收不到,急求解答
uniapp端代码
<web-view @onPostMessage="onPostMessage" @message="handleMessage" src="https://xxxx" frameborder="0"></web-view>
onPostMessage(env){
console.log('xxxonPostMessage');
console.log(env);
},
handleMessage(env){
console.log('message');
console.log(env);
}
外部链接代码
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
console.log('加载完成,可以使用uni相关接口');
uni.postMessage({
data: {
action: '加载完成,可以使用uni相关接口'
}
});
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
</script>
注意外部了解应该没什么问题, 单独访问外部h5页面uni.getEnv可以打印出运行环境,uni.postMessage也没有报错,但是小程序这边接受不到,请问一般是什么原因?
3 个回复
三色honey (作者)
在外部链接端调用 uni.navigateTo({url });可以实现, 这是为什么呢?
一零四三
我也发现handleMessage收不到消息啊,楼主解决了没 ?
DCloud_UNI_GSQ
文档有说明:小程序通讯并非实时
一零四三
我不是小程序 就是移动h5开发的,请问可用postMessage嘛? 不可以用那怎么让 vue与webview里面html文件通信呐??
2020-10-26 15:11
DCloud_UNI_GSQ
回复 一零四三: 可以,看下文档和示例
2020-10-26 15:12
一零四三
回复 DCloud_UNI_GSQ: 看文档和示例了,还下载了官方demo,但是handleMessage接受不到消息 o(╥﹏╥)o 真的着急
2020-10-26 15:18
DCloud_UNI_GSQ
回复 一零四三: 官方示例也不能吗?
2020-10-26 15:19
一零四三
回复 DCloud_UNI_GSQ: 是的不能 我就是下载HbuilderX的工具,然后新建的hello uni-app的官方demo,可用跳转本地网页,这几个接口都可以uni.navigateTo、uni.switchTab、uni.getEnv都可以的,而uni.postMessage不行,但是这个是通信,非常重要,我公司开发就需要webview里面的html页面消息传给vue页面
2020-10-26 15:29
DCloud_UNI_GSQ
回复 一零四三: 看了一下文档 h5 端不支持 @message ,可以直接使用 window.postMessage 通讯
2020-10-26 16:29