微信長按識別二維碼問題蒐集與整理

最近在折騰一個手機端頁面長按識別二維碼的問題。發現長按二維碼時在ios和android手機上識別不是那麼靈敏。下面整理下我對該問題的總結。
起初我將二維碼圖片直接放在background中，這種情況識別效果特別差。然後我將二維碼圖片單獨切出來放在了img標籤中，問題稍微緩解了下，但是識別還是很不穩定。

網頁中二維碼識別的原理

微信中二維碼識別採用的邏輯是截圖識別，當客戶端發現使用者在網頁的img標籤內進行長按操作時，會立刻截圖並且啟動二維碼識別演算法。所以這裡用於二維碼識別的圖片是截圖，而不是之前有人提到的img標籤中的圖片。下面這篇文章詳細說明了微信識別二維碼的原理，並給出了非常具體的建議，這篇文章的作者是微信團隊成員，一定要看哦！

這篇文章詳細說明了微信識別二維碼的原理，並且給出了非常具體的建議,這篇文章的作者是微信團隊成員，—— [ 網頁中二維碼識別規則]

常見bug整理

1. IOS版微信長按識別二維碼無法正常識別

對於二維碼區域，實際可識別區域是整體上移64px，64px的偏移與二維碼大小本身無關。下面的紅色的區域即為實際可識別的二維碼區域。為什麼是神祕的64px？因為64px正好是微信內建瀏覽器標題欄＋系統標題欄的高度。可以認為微信客戶端在識別二維碼的時候忽略了微信標題欄＋系統狀態列的高度。

解決方案有兩個：

• 通過為img增加padding增大可接觸面積。

• 為二維碼本身增加透明底部背景，如下:

2 多張二維碼圖片無法在同一螢幕中共享

微信識別二維碼的原理是當長按的時候會將螢幕截圖，識別儲存下來的圖片。建議解決辦法是不要在同一螢幕中放多張圖片。

3 多次執行長按二維碼的功能會導致記憶體洩漏，手機會變卡。

4 網上看到的其它說法，可以在除錯的時候都按照這種方式來嘗試一下

• 不要用fixed定位
• 初始縮放值為1，最大縮放值大於或等於1，不支援縮放。不可以識別

<meta content="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=0" name="viewport"
 
 />

• 初始縮放設定為小於1或者大於1，最大縮放值大於或者等於初始縮放,不支援縮放。不可以識別

<meta content="width=device-width, initial-scale=1.1, maximum-scale=1.2, user-scalable=0" name="viewport" />

• 初始縮放值為1，最大縮放值大於或等於1，不支援縮放。不可以識別

<meta content="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=0" name="viewport" />

• 都不設定 不可以識別
• 都不設定 不可以識別

最後為了相容，只能設定：初始縮放為1，最大縮放值要大於1，不支援縮放。如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

以上總結也許不是識別慢的具體原因，不過可以作為除錯時的參考。