一個頁面同時出現兩個二維碼圖片，長按識別問題

一、需求css

　　在項目中h5頁面內有文章資訊模塊，文章詳情頁裏面底部放了公司二維碼，而後用戶分享的時候，會帶上分享者二維碼，而且並排展現，用戶長按哪一個就識別哪一個圖片二維碼；ios

二、出現問題算法

ios下正常，長按A識別到A的微信，長按B識別到B的微信
安卓下，長按A識別A，長按B識別A；也就是隻能識別其中一個二維碼

三、分析微信

微信識別二維碼的原理機制

　　這裏採用的邏輯是截屏識別，當客戶端發現用戶在網頁的img標籤內進行長按操做時，會馬上截屏而且啓動二維碼識別算法。因此這裏用於二維碼識別的圖片是截屏，而不是以前有人提到的img標籤中的圖片。爲何要用截屏，這也是一個開發時候的思考。客戶端截屏時候，能夠不用考慮網絡傳輸等因素，最快的獲得識別結果，不然就須要走一次圖片下載的邏輯，用戶長按後等待的時間會加長，體驗上也失去了快感。---引用《網頁中二維碼識別規則》網絡

　至於爲什麼ios能夠識別成功，安卓只能識別其中一個，其實我也說不清。。。。ui

四、解決辦法this

引導用戶點擊圖片，圖片彈出展現，而後再提示用戶長按識別
判斷在安卓手機下處理：頁面中再加一個img標籤C，默認寬高能包含兩個小的img標籤（A和B），透明。長按A的時候監聽touchstart事件，把當前點擊的圖片A的src賦給C，層級變高，就能夠識別不一樣的二維碼了

五、部分代碼spa

 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'); })

六、遺留code

　　個人安卓手機下（MI8SE），我兩個微信號，而後發現系統自帶的微信分身，識別的時候，這個方法是無效的，不知道怎麼個狀況。有了解的朋友能夠交流交流blog