常規(guī)的在公眾號(hào)html頁面中要實(shí)現(xiàn)長(zhǎng)按識(shí)別二維碼仍源，直接使用img顯示圖片就可以了心褐，如下：
<img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />
然而，當(dāng)同一個(gè)頁面有多個(gè)二維碼時(shí)笼踩，會(huì)出現(xiàn)怎樣的情況呢逗爹？
今天碰到的需求中就在同一個(gè)頁面有三個(gè)二維碼，按照上面的方法嚎于，寫了三個(gè)img桶至，長(zhǎng)按不同二維碼img打開不同的公眾號(hào)或小程序。然而匾旭，實(shí)際的效果與想象中的有點(diǎn)差別：在部分手機(jī)上镣屹，不管長(zhǎng)按哪個(gè)img，都是識(shí)別了第一個(gè)img价涝，試了三臺(tái)手機(jī)女蜈，除了華為P20正常，VIVO和華為X5都出現(xiàn)該問題色瘩，后來測(cè)試P20在部分情況下也有該問題伪窖。
不知道怎么回事，網(wǎng)上一頓搜索居兆，說是二維碼識(shí)別功能是先截屏然后在識(shí)別截取的圖片覆山，然后結(jié)合我P20正常的情況，應(yīng)該是截取了點(diǎn)擊位置附近一定像素的屏幕泥栖，然后進(jìn)行識(shí)別簇宽。如果該截屏區(qū)域內(nèi)有多個(gè)二維碼勋篓，會(huì)識(shí)別到第一個(gè)，這就造成了同一屏內(nèi)多個(gè)二維碼識(shí)別出錯(cuò)的問題魏割。
然后想解決思路譬嚣，方案有三種：
- 二維碼間隔拉大，保證同一屏內(nèi)只顯示一個(gè)完整的二維碼钞它；
- 先弄個(gè)二維碼列表（不用img拜银，用background放圖片），然后點(diǎn)擊二維碼打開詳情頁(或者彈出層) 遭垛，長(zhǎng)按詳情頁或彈出層img識(shí)別
- 既然是截屏識(shí)別第一個(gè)完整二維碼尼桶，那在截屏?xí)r將點(diǎn)擊的img圖片顯示到頂部，是否可以實(shí)現(xiàn)想要的功能锯仪。
方案1和方案2畢竟在用戶體驗(yàn)上不怎么好泵督，只作為備用方案，我們重點(diǎn)看方案3：整體思路是這樣的卵酪，在頂部加一個(gè)臨時(shí)img幌蚊，用于顯示當(dāng)前長(zhǎng)按的二維碼。然后監(jiān)聽所有img的touch事件溃卡，當(dāng)按下去時(shí)溢豆，延時(shí)300ms顯示圖片（延遲300ms是為了防止該touch是滑動(dòng)事件，而不是長(zhǎng)按事件）瘸羡，如果移動(dòng)了則不再顯示漩仙，然后touch事件結(jié)束后也隱藏圖片；另外犹赖，在長(zhǎng)按時(shí)队他，html中是無法觸發(fā)touchend事件的，因?yàn)楸皇謾C(jī)原生事件截?cái)嗑澹孕枰O(jiān)聽touchcancel事件麸折，該事件觸發(fā)時(shí)也隱藏圖片。需要注意的是粘昨，因?yàn)殚L(zhǎng)按后微信需要截屏垢啼，所以隱藏事件需要延時(shí)500~1000ms。
實(shí)際效果如下：
以下是js和html核心代碼：
<script type="text/javascript">
function load() {
var imgs = document.getElementsByName("qrCodeImg");
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("touchstart", touchstart, false);
imgs[i].addEventListener("touchend", touchend, false);
imgs[i].addEventListener("touchmove", touchmove, false);
imgs[i].addEventListener("touchcancel", touchcancel, false);
}
function touchstart(e) {
showTempQrCodeImg();
}
function touchmove(e) {
dismissTempQrCodeImg();
}
function touchend(e) {
dismissTempQrCodeImg();
}
function touchcancel(e) {
dismissTempQrCodeImg();
}
var timeoutId = 0;
function showTempQrCodeImg() {
var currentSrc = this.src;
timeoutId = setTimeout(function () {
var oInp2 = document.getElementById("tempQrCodeImg");
oInp2.src = currentSrc;
oInp2.style.display = 'block';
show = true;
}, 300);
}
function dismissTempQrCodeImg() {
clearTimeout(timeoutId);
setTimeout(function () {
var oInp2 = document.getElementById("tempQrCodeImg");
oInp2.src = '';
oInp2.style.display = 'none';//ios上光設(shè)置src=''無法隱藏圖片张肾，需要設(shè)置display
show = false;
}, 1000);
}
}
window.addEventListener('load', load, false);
</script>
<!--臨時(shí)二維碼展示img, 注意id為tempQrCodeImg及設(shè)置position:fixed;z-index:100芭析；這里設(shè)置width: 80%比普通圖片大，因?yàn)樵O(shè)置太小會(huì)造成在ios上第一張圖片左右部分識(shí)別為不同的二維碼-->
<img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />
<!--實(shí)際二維碼展示img吞瞪，注意所有的name都是qrCodeImg-->
<img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 40%;" />
個(gè)人博客: IT老五
微信公眾號(hào)：[IT老五（it-lao5）]馁启，一起源創(chuàng)，一起學(xué)習(xí)芍秆！
2019.07.29 15:03 bug修復(fù)
后續(xù)發(fā)現(xiàn)在顯示的二維碼比較多惯疙，滑動(dòng)后點(diǎn)擊中間和底部的二維碼會(huì)出現(xiàn)識(shí)別錯(cuò)誤的問題翠勉，做下修改，臨時(shí)二維碼加一層div背景(設(shè)置顏色與頁面背景色一致)
<div id="tempQrCodeImgDiv" style="width:100%;height:100%; position:fixed; display:none;background:#efeff4;z-index:90">
</div>
<img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />
js方法中的oInp2.style.display = 語句后螟碎，同時(shí)加上對(duì)背景div的顯示與隱藏操作眉菱。
2019.09.30 14:54 bug修復(fù)
還是有反饋部分二維碼識(shí)別錯(cuò)誤（主要是二維碼顯示一半或居于底部時(shí)）迹栓，特別是在iphone x和vivo手機(jī)上問題比較明顯掉分。因此，又改了下克伊，改為點(diǎn)擊圖片彈窗酥郭，然后再長(zhǎng)按識(shí)別。
這篇文章太長(zhǎng)愿吹，所以另開了一篇文章：簡(jiǎn)書：(補(bǔ)充)微信長(zhǎng)按識(shí)別二維碼 -- 頁面多個(gè)二維碼如何識(shí)別不从？（二）
