識別規則

這里采用的邏輯是截屏識別，當客戶端發現用戶在網頁的img標簽內進行長按操作時，會立刻截屏并且啟動二維碼識別算法。所以這里用于二維碼識別的圖片是截屏，而不是之前有人提到的img標簽中的圖片。

為什么要用截屏，這也是一個開發時候的思考?？蛻舳私仄習r候，可以不用考慮網絡傳輸等因素，最快的得到識別結果，否則就需要走一次圖片下載的邏輯，用戶長按后等待的時間會加長，體驗上也失去了快感。當然，這也帶來了識別不出的問題（所以正在考慮先截屏，截屏識別失敗再下載的新邏輯）。

基于截屏識別，網頁中二維碼無法被識別的原因有這幾個：

• 1、二維碼顯示信息不全，在長按時候只有部分可見。
• 2、二維碼周圍信息過于復雜，在整個截屏中二維碼算法無法正確識別。
• 3、網頁沒有加載完成，微信的識別js沒有啟動。

如果是普通用戶遇到這樣的問題，大不了就不玩了。但是對于運營者，每個長按的用戶都是潛力用戶，在距離接上頭一步之遙的地方停住了，肯定內心萬馬漂過，有以下建議可以試試。

• 1、二維碼周圍不要過于復雜，留白為佳。
• 2、二維碼不要太大，否則容易跳出屏幕。通常160*160就可以。

測試這個問題的方式，在遇到網頁中二維碼無法識別的時候，截屏，然后通過微信掃一掃導入這個截屏，看看是否也一樣出問題。

當然，這個識別網頁二維碼，玩法多樣，相當于開啟了一個新的外跳方式。

二維碼識別常見問題

1，在iOS 微信6.2.2識別的二維碼的區域向上偏移了64px

這64px是微信內置瀏覽器標題欄 系統標題欄

二維碼大到一定程度就沒有“識別上移”的詭異現象了，大概是二維碼大小在400px 以上的時候就沒有。

解決：

• 1.通過img增加padding 增大可接觸面積；這個需要微調
• 2.為二維碼圖片本身增加透明底部背景，實際上就是把主要的二維碼放在上面，下面給一塊的透明的背景。這樣他識別圖片64px的時候正好是完整的圖片。

2，兩（多）張二維碼無法在同一屏幕視窗中共存

如果屏幕上有兩個二維碼只能識別其中一個。實際上微信是把你的整個屏幕先截屏。再識別截屏后的圖片。所以你的屏幕上的內容都會變成一個圖片，即使不是一屏顯示也不行。

解決：

• 1、不把這些需要識別的二維碼圖片放在一個屏幕里。
• 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" />

• 都不設置 不可以識別

參考地址

網頁中二維碼識別規則

微信內置瀏覽器 長按識別二維碼 的問題與解決方案

微信內置瀏覽器 長按識別二維碼 功能的兩三個坑與解決方案

微信長按識別二維碼bug整理

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的网页中二维码识别规则的全部內容，希望文章能夠幫你解決所遇到的問題。

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