常規的在公眾號html頁面中要實現長按識別二維碼，直接使用img顯示圖片就可以了，如下：

<img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />

然而，當同一個頁面有多個二維碼時，會出現怎樣的情況呢？

今天碰到的需求中就在同一個頁面有三個二維碼，按照上面的方法，寫了三個img，長按不同二維碼img打開不同的公眾號或小程序。然而，實際的效果與想象中的有點差別：在部分手機上，不管長按哪個img，都是識別了第一個img，試了三臺手機，除了華為P20正常，VIVO和華為X5都出現該問題，后來測試P20在部分情況下也有該問題。
不知道怎么回事，網上一頓搜索，說是二維碼識別功能是先截屏然后在識別截取的圖片，然后結合我P20正常的情況，應該是截取了點擊位置附近一定像素的屏幕，然后進行識別。如果該截屏區域內有多個二維碼，會識別到第一個，這就造成了同一屏內多個二維碼識別出錯的問題。

然后想解決思路，方案有三種：

二維碼間隔拉大，保證同一屏內只顯示一個完整的二維碼；

先弄個二維碼列表（不用img，用background放圖片），然后點擊二維碼打開詳情頁(或者彈出層) ，長按詳情頁或彈出層img識別

既然是截屏識別第一個完整二維碼，那在截屏時將點擊的img圖片顯示到頂部，是否可以實現想要的功能。

方案1和方案2畢竟在用戶體驗上不怎么好，只作為備用方案，我們重點看方案3：整體思路是這樣的，在頂部加一個臨時img，用于顯示當前長按的二維碼。然后監聽所有img的touch事件，當按下去時，延時300ms顯示圖片（延遲300ms是為了防止該touch是滑動事件，而不是長按事件），如果移動了則不再顯示，然后touch事件結束后也隱藏圖片；另外，在長按時，html中是無法觸發touchend事件的，因為被手機原生事件截斷，所以需要監聽touchcancel事件，該事件觸發時也隱藏圖片。需要注意的是，因為長按后微信需要截屏，所以隱藏事件需要延時500~1000ms。

實際效果如下：

?

以下是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上光設置src=''無法隱藏圖片，需要設置displayshow = false;}, 1000);}}window.addEventListener('load', load, false);</script><!--臨時二維碼展示img, 注意id為tempQrCodeImg及設置position:fixed;z-index:100；這里設置width: 80%比普通圖片大，因為設置太小會造成在ios上第一張圖片左右部分識別為不同的二維碼--> <img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" /> <!--實際二維碼展示img，注意所有的name都是qrCodeImg--> <img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 40%;" /> ~~~

簡書：ThinkinLiu 博客: IT老五

---

IT老五（it-lao5）：關注公眾號，一起源創，一起學習！

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。