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

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、部分代码

<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" />
</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），我两个微信号，然后发现系统自带的微信分身，识别的时候，这个方法是无效的，不知道怎么个情况。有了解的朋友可以交流交流