微信二維碼長按沒法識別問題解析

近來在寫H5頁面時發如今手機端微信里長按識別二維碼有時會出現不能識別的bug，最近就對這些可能致使二維碼不能識別的bug作了一下研究，寫出來，和你們分享一下。

   

1、微信識別二維碼的原理機制

   咱們先來看一下微信識別二維碼的原理機制：

   「微信識別二維碼採用的邏輯是截屏識別，當客戶端發現用戶在網頁的img標籤內進行長按操做時，會馬上截屏而且啓動二維碼識別算法。因此這裏用於二維碼識別的圖片是截屏，而不是以前有人提到的img標籤中的圖片。

   爲何要用截屏，這也是一個開發時候的思考。客戶端截屏時候，能夠不用考慮網絡傳輸等因素，最快的獲得識別結果，不然就須要走一次圖片下載的邏輯，用戶長按後等待的時間會加長，體驗上也失去了快感。固然，這也帶來了識別不出的問題（因此正在考慮先截屏，截屏識別失敗再下載的新邏輯）。」

   詳情請參考：網頁中二維碼識別規則

 

2、二維碼識別常見的BUG及解決方法

一、二維碼圖片直接放在background裏時沒法識別

   由上述二維碼識別原理咱們能夠知道客戶端是檢測網頁的img標籤內進行長按操做時，會馬上截屏而且啓動二維碼識別算法。因此當將二維碼圖片直接放在background中時，識別效果特別差，基本上是識別不出來的。因此最好是將二維碼圖片單獨切出來放在了img標籤中。

 

二、多張二維碼圖片沒法在同一屏幕中共享

   微信識別二維碼的原理是長按的時候至關於將當前手機屏幕截屏，識別截屏後的圖片，這樣一張圖片有兩個二維碼圖的時候固然只會識別出一個。建議解決辦法是不要在同一屏幕中放多張圖片或者提示用戶雙擊放大二維碼進行二維碼識別。

 

三、屢次執行長按二維碼的功能會致使內存泄漏，手機會變卡

   屢次執行長按二維碼的功能會致使手機(iPhone)變卡。長按識別二維碼，屢次測試後右鍵識別出來是二維碼圖片（即沒有出現「識別二維碼」的按鈕）。

 

四、iOS 版微信長按識別二維碼沒法正常識別

（8.21 更新：最新版6.2.4 已經修復該bug）

   如下實測在iOS 版（iPhone）微信6.2.2 中有此bug，安卓版微信暫時沒有發現有此bug。

   對於二維碼區域，實際可識別區域是總體上移64px，64px的偏移與二維碼大小自己無關。下面的紅色的區域即爲實際可識別的二維碼區域。爲何是神祕的64px？由於64px正好是微信內置瀏覽器標題欄＋系統標題欄的高度。能夠認爲微信客戶端在識別二維碼的時候忽略了微信標題欄＋系統狀態欄的高度。

解決方案有兩個：

（1）經過爲img增長padding增大可接觸面積。

（2）爲二維碼自己增長透明底部背景，以下:

 

五、IOS系統meta縮放問題致使二維碼沒法識別

   在安卓版的微信長按二維碼能夠識別（前提是你的微信版本到支持此功能），可是到了蘋果版的微信就識別不了，這時候多是縮放的問題：

（1）設置了初始縮放設置爲1，最大縮放值要>=1,不支持縮放。--->能夠識別。

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

（2）設置了初始縮放設置爲小於1或者大於1，最大縮放值大於或者等於初始縮放,不支持縮放。--->不能夠識別。

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

（3）設置了初始縮放設置爲1，最大縮放值要>=1,支持縮放。--->頁面不縮放以前能夠識別，一旦頁面縮放事後就不能夠識別。

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

（4）都不設置時，不能夠識別。

（5）設置了固定的寬，致使二維碼的實際位置偏移到屏幕外

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

（6）頁面有css樣式fixed --->不能夠識別。

 

以上這些設置致使二維碼圖片定位不許，或者二維碼所有跑到屏幕外或者部分跑到屏幕外而沒法識別。如下是其解決辦法：

方法1：
   設置：初始縮放爲1，最大縮放值要大於1，不支持縮放。以下：

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

 

方法2：

   首先要把這張二維碼添加到body的子元素 放在最後或者是最前均可以，

注意這可能影響你的佈局，可設置position:absolute，進行調整，由於這纔是真正用來識別的二維碼，若是這個二維碼位置太偏移，有可能會形成二維碼沒法識別。此外還須要注意的是opacity須要設爲0而不是設置display屬性。

   <img style="position:absolute;width: XXpx;height: XXpx;opacity: 0" src="二維碼圖片地址"> 

   其次，在你應該在設計稿設計的地方，放置的div裏面設置你正常二維碼圖片的大小，以便頁面呈現正常。

   <img style="你的正常大小" src="二維碼圖片地址" />

   這時你就會發現長按圖片可以識別出來二維碼。

 

   其實除了這些BUG外，二維碼信息顯示不全；在長按時候只有部分可見；二維碼周圍信息過於複雜，在整個截屏中二維碼算法沒法正確識別；網頁沒有加載完成，微信的識別js沒有啓動都會致使二維碼沒法識別，另外二維碼過大或者太小時，也會出現識別困難問題，一般160*160就能夠了。

 

此文章主要發佈在本人所在公司網站H5案例分享（http://www.h5-share.com/）、公司公衆號H5握手和我的博客中，轉載請註明出處。