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

0評論 2017-04-19 18:01:50

收藏 | 點贊

  

   小五在寫H5頁面時發(fā)現(xiàn)在手機(jī)端微信里長按識別二維碼有時會出現(xiàn)不能識別的bug，最近就對這些可能導(dǎo)致二維碼不能識別的bug做了一下研究，寫出來，和大家分享一下。
   
一、微信識別二維碼的原理機(jī)制
   我們先來看一下微信識別二維碼的原理機(jī)制：
   “微信識別二維碼采用的邏輯是截屏識別，當(dāng)客戶端發(fā)現(xiàn)用戶在網(wǎng)頁的img標(biāo)簽內(nèi)進(jìn)行長按操作時，會立刻截屏并且啟動二維碼識別算法。所以這里用于二維碼識別的圖片是截屏，而不是之前有人提到的img標(biāo)簽中的圖片。
   為什么要用截屏，這也是一個開發(fā)時候的思考?？蛻舳私仄?xí)r候，可以不用考慮網(wǎng)絡(luò)傳輸?shù)纫蛩?，最快的得到識別結(jié)果，否則就需要走一次圖片下載的邏輯，用戶長按后等待的時間會加長，體驗上也失去了快感。當(dāng)然，這也帶來了識別不出的問題（所以正在考慮先截屏，截屏識別失敗再下載的新邏輯）?！?/p>
   詳情請參考：網(wǎng)頁中二維碼識別規(guī)則
 
二、二維碼識別常見的BUG及解決方法
1、二維碼圖片直接放在background里時無法識別
   由上述二維碼識別原理我們可以知道客戶端是檢測網(wǎng)頁的img標(biāo)簽內(nèi)進(jìn)行長按操作時，會立刻截屏并且啟動二維碼識別算法。所以當(dāng)將二維碼圖片直接放在background中時，識別效果特別差，基本上是識別不出來的。所以最好是將二維碼圖片單獨切出來放在了img標(biāo)簽中。
 
2、多張二維碼圖片無法在同一屏幕中共享
   微信識別二維碼的原理是長按的時候相當(dāng)于將當(dāng)前手機(jī)屏幕截屏，識別截屏后的圖片，這樣一張圖片有兩個二維碼圖的時候當(dāng)然只會識別出一個。建議解決辦法是不要在同一屏幕中放多張圖片或者提示用戶雙擊放大二維碼進(jìn)行二維碼識別。
 
3、多次執(zhí)行長按二維碼的功能會導(dǎo)致內(nèi)存泄漏，手機(jī)會變卡
   多次執(zhí)行長按二維碼的功能會導(dǎo)致手機(jī)(iPhone)變卡。長按識別二維碼，多次測試后右鍵識別出來是二維碼圖片（即沒有出現(xiàn)“識別二維碼”的按鈕）。
 
4、iOS 版微信長按識別二維碼無法正常識別
（8.21 更新：最新版6.2.4 已經(jīng)修復(fù)該bug）
   以下實測在iOS 版（iPhone）微信6.2.2 中有此bug，安卓版微信暫時沒有發(fā)現(xiàn)有此bug。
   對于二維碼區(qū)域，實際可識別區(qū)域是整體上移64px，64px的偏移與二維碼大小本身無關(guān)。下面的紅色的區(qū)域即為實際可識別的二維碼區(qū)域。為什么是神秘的64px？因為64px正好是微信內(nèi)置瀏覽器標(biāo)題欄＋系統(tǒng)標(biāo)題欄的高度?？梢哉J(rèn)為微信客戶端在識別二維碼的時候忽略了微信標(biāo)題欄＋系統(tǒng)狀態(tài)欄的高度。
解決方案有兩個：
（1）通過為img增加padding增大可接觸面積。
（2）為二維碼本身增加透明底部背景，如下:
 
5、IOS系統(tǒng)meta縮放問題導(dǎo)致二維碼無法識別
   在安卓版的微信長按二維碼可以識別（前提是你的微信版本到支持此功能），但是到了蘋果版的微信就識別不了，這時候可能是縮放的問題：
（1）設(shè)置了初始縮放設(shè)置為1，最大縮放值要>=1,不支持縮放。--->可以識別。
   如
（2）設(shè)置了初始縮放設(shè)置為小于1或者大于1，最大縮放值大于或者等于初始縮放,不支持縮放。--->不可以識別。
   如
（3）設(shè)置了初始縮放設(shè)置為1，最大縮放值要>=1,支持縮放。--->頁面不縮放之前可以識別，一旦頁面縮放過后就不可以識別。
   如
（4）都不設(shè)置時，不可以識別。
（5）設(shè)置了固定的寬，導(dǎo)致二維碼的實際位置偏移到屏幕外
   
（6）頁面有css樣式fixed --->不可以識別。
 
以上這些設(shè)置導(dǎo)致二維碼圖片定位不準(zhǔn)，或者二維碼全部跑到屏幕外或者部分跑到屏幕外而無法識別。以下是其解決辦法：
方法1：
   設(shè)置：初始縮放為1，最大縮放值要大于1，不支持縮放。如下：
   
 
方法2：
   首先要把這張二維碼添加到body的子元素 放在最后或者是最前都可以，
注意這可能影響你的布局，可設(shè)置position:absolute，進(jìn)行調(diào)整，因為這才是真正用來識別的二維碼，如果這個二維碼位置太偏移，有可能會造成二維碼無法識別。此外還需要注意的是opacity需要設(shè)為0而不是設(shè)置display屬性。
    
   其次，在你應(yīng)該在設(shè)計稿設(shè)計的地方，放置的div里面設(shè)置你正常二維碼圖片的大小，以便頁面呈現(xiàn)正常。
   
   這時你就會發(fā)現(xiàn)長按圖片能夠識別出來二維碼。
 
   其實除了這些BUG外，二維碼信息顯示不全；在長按時候只有部分可見；二維碼周圍信息過于復(fù)雜，在整個截屏中二維碼算法無法正確識別；網(wǎng)頁沒有加載完成，微信的識別js沒有啟動都會導(dǎo)致二維碼無法識別，另外二維碼過大或者過小時，也會出現(xiàn)識別困難問題，通常160*160就可以了。

暫無評論