常規(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)?#xff0c;所以需要監(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è)置displayshow = 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%;" /> ~~~

簡(jiǎn)書：ThinkinLiu 博客: IT老五

---

IT老五（it-lao5）：關(guān)注公眾號(hào)，一起源創(chuàng)，一起學(xué)習(xí)！

?

總結(jié)

以上是生活随笔為你收集整理的微信长按识别二维码 -- 页面多个二维码如何识别？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。