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

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