識別規(guī)則

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

為什么要用截屏，這也是一個開發(fā)時候的思考。客戶端截屏?xí)r候，可以不用考慮網(wǎng)絡(luò)傳輸?shù)纫蛩?#xff0c;最快的得到識別結(jié)果，否則就需要走一次圖片下載的邏輯，用戶長按后等待的時間會加長，體驗上也失去了快感。當(dāng)然，這也帶來了識別不出的問題（所以正在考慮先截屏，截屏識別失敗再下載的新邏輯）。

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

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

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

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

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

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

二維碼識別常見問題

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

這64px是微信內(nèi)置瀏覽器標題欄 系統(tǒng)標題欄

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

解決：

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

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

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

解決：

• 1、不把這些需要識別的二維碼圖片放在一個屏幕里。
• 2、二維碼設(shè)置為可以點擊大圖瀏覽，然后在大圖瀏覽時，長按識別二維碼

注：文章內(nèi)容來源與網(wǎng)絡(luò)參考，有不正確的地方會在以后的認識中逐步修正。

3，多次執(zhí)行長按二維碼的功能會導(dǎo)致內(nèi)存泄漏，手機會變卡

4，網(wǎng)上看到的其它說法，可以在調(diào)試的時候都按照這種方式來嘗試一下

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

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

• 初始縮放設(shè)置為小于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" />

• 都不設(shè)置 不可以識別

參考地址

網(wǎng)頁中二維碼識別規(guī)則

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。