0


uniapp与webview网页交互打开手机扫码

公司的uniapp项目有一个专门打开网页的功能,uniapp通过webview去打开对应的url,然后通过监听webview网页发送过来的事件,在uniapp手机端打开手机的扫码功能,然后将扫码识别到的结果传回给网页。

思路

1.网页引入uni.webview.js文件

2.网页在某个时机或者某个事件发送事件

3.uniapp端监听处理事件,调用手机摄像头

4.uniapp将扫码结果传回

5.网页接收处理数据

1.网页引入uni.webview.js文件

因为网页端需要向app发送事件,所以需要引入对应的webview.js文件。这是基础。

如果项目会运行在内网环境,最好是引用已经下载好了的。

假如使用的是vue项目,则可以在index.html文件中去引入。

2.网页在某个时机或者某个事件发送事件

如果需要在网页打开的时候就去调用,则需要监听uni是否可以安全调用

如果是通过点击事件去触发,一般来说按钮加载出来到可以交互,已经加载完成了。

直接使用uni.postMessage方法就好。最主要就是定义type事件的类型,这样在uniapp中可以根据对应的type值进行不同的处理逻辑。

3.uniapp端监听处理事件,调用手机摄像头

添加web-view组件,定义方法接收传递过来的信息。@message处理信息。

然后根据type类型处理不同的逻辑,示例中专门处理type值为scanCode时候,就打开摄像头。

4.uniapp将扫码结果传回

这个是比较重要的,原理就是:通过拿到webview的内部对象,去调用系统的evalJS方法,将该方法内部的字符串当做代码去执行。示例中qrCodeWv是在初始化的时候拿到的。

webview网页内容里面的话,要定义一个全局的appScanCodeResult方法 。如果没有定义,webview网页会报错找不到这个方法。evalJS方法会把里面的内容当做代码来处理,所以方法的参数如果是对象要使用JSON.stringify处理一下,然后引号包裹起来。

5.网页接收处理数据

网页是vue框架的话,最重要的就是如何将app执行的全局方法告诉对应的页面或者组件。所以要使用window的自定义事件CustomEvent。

本来CustomEvent方法是可以传递参数的,但是监听这个事件的时候,接收到的是一个event没有带值。所以干脆就当一个触发,将app传过来的值存储在全局的window上。

vue3的写法,注册监听,离开的时候注销就好。

拿到扫描结果


本文转载自: https://blog.csdn.net/GhostPaints/article/details/131120325
版权归原作者 GhostPaints 所有, 如有侵权,请联系我们删除。

“uniapp与webview网页交互打开手机扫码”的评论:

还没有评论