283794656@qq.com
283794656@qq.com
  • 发布:2021-03-18 17:31
  • 更新:4 天前
  • 阅读:329

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方法。

3 关注 分享
老船长9999 951275575@qq.com 千羽羊驼

要回复文章请先登录注册

283794656@qq.com

283794656@qq.com (作者)

回复 517800851@qq.com :
如果需要跳转回app指定页面就是使用webUni.navigateTo,webUni.redirectTo...等api。这地方的原理就是webUni这个对象等同于主项目的uni对象。只不过在webview引入的webUni对象只支持部分api
4 天前
283794656@qq.com

283794656@qq.com (作者)

回复 517800851@qq.com :
webview跳转回app的场景就是返回跳转进入webview时的页面吧?一般就是会在跳转返回时先webUni.postMessage发送消息,再调用webUni.navigateBack返回。主项目通过保存webview的消息数据来在指定页面进行数据监听,执行相应逻辑。
4 天前
517800851@qq.com

517800851@qq.com

大佬你好,请问,跳转页面的时候需要跳转会app的话需要监听事件。document.addEventListener这个并没有运行,请问大佬是怎么操作的呢?
4 天前
283794656@qq.com

283794656@qq.com (作者)

回复 390639344@qq.com :
不客气^_^
2021-04-26 08:53
390639344@qq.com

390639344@qq.com

回复 283794656@qq.com :
谢谢你,我弄明白我什么情况了,我是什么都做,第一次做uniapp,也是第一次接触手机端,我代码写的对的,没有效果是因为我以为在电脑浏览器里也能看到效果,实际要在手机里调试才行,谢谢你。
2021-04-25 16:07
283794656@qq.com

283794656@qq.com (作者)

回复 390639344@qq.com :
我没看懂你具体的需求是什么样的。
现在假设引用webview的项目为A,编写webview的项目为B。
项目B采用webUni.postMessage方法可以向项目A发送消息,只需要在<web-view>标签上监听事件就可以得到消息内容。
如果项目A是非H5且非APP-nvue的,那就写成<web-view @message="onMessage">
如果项目A是APP-nvue的,那写成<web-view @onPostMessage="onMessage">
这个文章主要是项目B在使用uni.postMessage等webview特有方法失效时的解决办法。
2021-04-23 16:01
390639344@qq.com

390639344@qq.com

我H5这头写的都没有问题,我看了您的代码,也算一样的吧,操作也没有报错,但是web-view引用页面那边(就是uni-app)里到底要怎么写,才能接收到postMessage发过去的消息呢,以及反方向的需求。
2021-04-23 14:57
老船长9999

老船长9999

mark
2021-03-24 12:50