在H5页面中，需求是长按并排显示的两个二维码图片时，能够分别识别对应的内容。iOS系统下运行正常，但Android系统存在bug，只识别其中一个二维码。分析认为，微信使用截屏方式识别二维码。解决方法是在Android设备上，通过监听touchstart事件，动态改变图片层级以实现识别不同二维码。然而，此方法在某些微信分身应用中可能无效。
1、需求
在项目中h5页面内有文章资讯模块，文章详情页里面底部放了公司二维码，然后用户分享的时候，会带上分享者二维码，并且并排展示，用户长按哪个就识别哪个图片二维码；
2、出现问题
- ios下正常，长按A识别到A的微信，长按B识别到B的微信
- 安卓下，长按A识别A，长按B识别A；也就是只能识别其中一个二维码
3、分析
- 微信识别二维码的原理机制
这里采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。为什么要用截屏，这也是一个开发时候的思考。客户端截屏时候，可以不用考虑网络传输等因素，最快的得到识别结果，否则就需要走一次图片下载的逻辑，用户长按后等待的时间会加长，体验上也失去了快感。---引用《网页中二维码识别规则》
至于为何ios可以识别成功，
最低0.47元/天 解锁文章
扫一扫
1428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
