微信長按識別二維碼 -- 頁面多個二維碼如何識別？

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

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

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

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

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

1. 二維碼間隔拉大，保證同一屏內只顯示一個完整的二維碼；
2. 先弄個二維碼列表（不用img，用background放圖片），然後點擊二維碼打開詳情頁(或者彈出層) ，長按詳情頁或彈出層img識別
3. 既然是截屏識別第一個完整二維碼，那在截屏時將點擊的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;
                    show = true;
                }, 300);
            }

            function dismissTempQrCodeImg() {
                clearTimeout(timeoutId);
                setTimeout(function () {
                    var oInp2 = document.getElementById("tempQrCodeImg");
                    oInp2.src = '';
                    show = false;
                }, 1000);
            }
            
        }
        window.addEventListener('load', load, false);
    </script>

<!--臨時二維碼展示img, 注意id爲tempQrCodeImg及設置position:fixed;z-index:100-->
<img id="tempQrCodeImg" src="" style="width: 50%; position:fixed; left:25%;z-index:100" />
<!--實際二維碼展示img，注意所有的name都是qrCodeImg-->
<img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 80%;" />

簡書：ThinkinLiu 博客: IT老五

---