一个页面同时出现两个二维码图片，长按识别问题

时间：2024-03-12 10:18:56

1、需求

　　在项目中h5页面内有文章资讯模块，文章详情页里面底部放了公司二维码，然后用户分享的时候，会带上分享者二维码，并且并排展示，用户长按哪个就识别哪个图片二维码；

2、出现问题

  • ios下正常，长按A识别到A的微信，长按B识别到B的微信
  • 安卓下，长按A识别A，长按B识别A；也就是只能识别其中一个二维码

3、分析

  • 微信识别二维码的原理机制

 

　　这里采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。为什么要用截屏，这也是一个开发时候的思考。客户端截屏时候，可以不用考虑网络传输等因素，最快的得到识别结果，否则就需要走一次图片下载的逻辑，用户长按后等待的时间会加长，体验上也失去了快感。---引用《网页中二维码识别规则》

　至于为何ios可以识别成功，安卓只能识别其中一个，其实我也说不清。。。。

4、解决办法

  • 引导用户点击图片，图片弹出展示，然后再提示用户长按识别
  • 判断在安卓手机下处理：页面中再加一个img标签C，默认宽高能包含两个小的img标签（A和B），透明。长按A的时候监听touchstart事件，把当前点击的图片A的src赋给C，层级变高，就可以识别不同的二维码了

5、部分代码

 1<div class="wechat qrcodeBox">
 2　　<div class="ullget">
 3　　　　<dt>
 4　　　　　　<img src="../image/com_logo.jpeg" alt="有获社区服务号" class="qrcode qrcode1">
 5　　　　</dt>
 6　　　　<dd>
 7　　　　　　长按进入有获微课
 8　　　　</dd>
 9　　</div>
10　　<div class="share">  
11　　　　<dt>
12　　　　　　<img :src="article.ref_qrcode" alt="二维码" class="qrcode qrcode2">
13　　　　</dt>
14　　　　<dd>
15　　　　　　长按召唤小编
16　　　　</dd>  
17　　</div> 
18　　<img src="../image/search.png" class="realQrcode" />
19</div>
$(document).on(\'touchstart\', \'.qrcode1\', function () {
    $(\'.realQrcode\').attr(\'src\', $(this).attr(\'src\'));
    $(\'.realQrcode\').css(\'z-index\', \'10\');
}).on(\'touchstart\', \'.qrcode2\', function () {
    $(\'.realQrcode\').attr(\'src\', $(this).attr(\'src\'));
    $(\'.realQrcode\').css(\'z-index\', \'10\');
}).on(\'touchend\', \'.qrcode\', function () {
    $(\'.realQrcode\').css(\'z-index\', \'-1\');
}).on(\'touchcancel\', \'.qrcode\', function () {
    $(\'.realQrcode\').css(\'z-index\', \'-1\');
})

6、遗留

　　我的安卓手机下（MI8SE），我两个微信号，然后发现系统自带的微信分身，识别的时候，这个方法是无效的，不知道怎么个情况。有了解的朋友可以交流交流

　　

相关文章