雷峰
雷峰
  • 发布:2021-03-18 17:31
  • 更新:2024-12-27 17:19
  • 阅读:31338

webview使用uniapp项目开发无法使用uni.postMessage(踩坑经验分享)

分类:uni-app

1、使用uniapp项目写H5 webview,使用hello uniapp的模板,按照webview文档里的源码往template.h5.html里面写入相关内容。
2、引入的https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js脚本,它这个地方是个坑。你要手动改源码。uni.webview.js文件里面注册的就是uni对象。被uniapp项目自带的uni对象覆盖了,我就是把源码里面注册uni对象换了个名字(webUni)就好了。
END:这里把我自己改好的js文件贴上来,包括template.h5.html文件,可以直接使用webUni.postMessage方法。

31 关注 分享
老船长9999 zwzz 千羽羊驼 1***@163.com myforr 1***@139.com Huareu 1***@qq.com 4***@qq.com 言会咸 ai自由畅想 1***@qq.com 5***@qq.com DLO seabert 9***@qq.com 8***@qq.com 8***@qq.com wetyou DCloud_UNI_OttoJi 2***@qq.com Adlaw 套马杆的套子 3***@qq.cm 1***@qq.com 2***@qq.com 1***@qq.com 9***@qq.com 1***@qq.com 1***@qq.com 大力的罗大力

要回复文章请先登录注册

雷峰

雷峰 (作者)

回复 8***@qq.com :
就是你要在http://localhost:8081/ 这个项目postMessage后,接着继续调用webUni.navigateBack 这类方法
2021-10-29 17:57
8***@qq.com

8***@qq.com

在特定时机(后退、组件销毁、分享)是指web-view那个h5页面还是值嵌套他的那个页面呢,试了还是没用。。。。
2021-10-29 17:18
雷峰

雷峰 (作者)

回复 8***@qq.com :
@message EventHandler 网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。
这是官方文档写的,其实已经比较清晰了,这里的消息不是马上就能收到的。除非是nvue
2021-10-29 16:32
雷峰

雷峰 (作者)

回复 8***@qq.com :
你可以把 webUni.postMessage({
data: {
action: 'message'
}
});
这段代码写成一个按钮点击事件再触发 同时你再加一个页面返回之类的逻辑就可以
2021-10-29 16:30
8***@qq.com

8***@qq.com

回复 雷峰 :
就是想测试下小程序里web-view传值
2021-10-29 16:30
雷峰

雷峰 (作者)

回复 8***@qq.com :
如果父项目是非h5 那么就可以这样接受 但是不是子项目一调用webUni.postMessage 父项目就能收到。这里的机制是需要在页面销毁才会将发送的消息一起传给父项目的接收里,比如页面后退,重定向跳转都是页面销毁
2021-10-29 16:29
8***@qq.com

8***@qq.com

回复 雷峰 :
uniapp生成的小程序
2021-10-29 16:29
雷峰

雷峰 (作者)

回复 8***@qq.com :
<web-view src="http://localhost:8081/" @message="msg">
你的这句代码的项目是小程序吗?
2021-10-29 16:27
雷峰

雷峰 (作者)

回复 8***@qq.com :
你代码大概是如何实现的?我可以帮你排查下问题
2021-10-29 16:25
8***@qq.com

8***@qq.com

<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
console.log('UniAppJSBridgeReady');
webUni.postMessage({
data: {
action: 'message'
}
});
webUni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
</script>

<web-view src="http://localhost:8081/" @message="msg"></web-view>

msg(e) {
console.log(e);
}
拿不到传过来的参数
2021-10-29 16:25