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

以前在作一個微信遊戲宣傳頁的時候，要調用長按識別二維碼的功能，但作的過程當中遇到了兩三個坑，後來稍微深刻探究了下。

坑一：iOS 版微信長按識別二維碼沒法正常識別的bug

如下實測在iOS 版（iPhone）微信2.2 中有此bug，安卓版微信暫時沒有發現有此bug。建議看下面的內容前先看這篇文章。

「衆所周知」，在一些使用在微信內置瀏覽器的頁面上要調用其長按識別二維碼的功能，須要將二維碼圖片單獨切出，img 標籤形式展示。長按識別二維碼 的原理Jeff 不甚瞭解，但卻發現其有一個實際可識別區域上移的bug：對於二維碼區域，實際可識別區域是總體上移64px，64px 的偏移量與二維碼大小自己無關。

下面是一個重現bug 的Demo 頁面，請用iPhone 版微信掃描：

紅色的色塊區域是我單獨爲了定位區域而寫的，不是在二維碼自己（具體能夠查看上面Demo 的源代碼），用手指長按你能夠看到實際可識別二維碼區域爲紅色部分：即總體可識別區域上移了64px，而往下拉看到不一樣大小的二維碼你會發現這個64px 的偏移量與二維碼自己大小無關。友情提示：你能夠用小拇指在邊界區域長按以確認。

爲何是神祕的64px 偏移量？答案是：64px 正好是微信內置瀏覽器標題欄+系統標題欄的高度。能夠猜想的是，微信客戶端在識別二維碼的時候忽略了微信標題欄+系統狀態欄的高度。

後來進一步排查的時候，發現二維碼大到必定程度就沒有「識別上移」的詭異現象了，大概是二維碼大小在400px 以上的時候就沒有（固然，這個是在iPad 版微信上測出來的），具體能夠查看下面這個Demo 頁面：

通過某種渠道與微信 iOS 開發人員的反饋溝通，肯定是微信的 bug，也的確是這個64px 的問題；據他們的說法目前已經修復，但可否在下一個版本中加入麼，就不得而知了。

解決方案的話有兩個：

1）經過img增長padding 增大可接觸面積；這個須要微調。

2）爲二維碼圖片自己增長透明底部背景，這也是咱們團隊採用的方案。相似下圖的樣子，前端上用戶是看不到的；但有個缺點就是若是用戶保存二維碼後則不是那麼好看。

坑二：兩（多）張兩張二維碼沒法在同一屏幕視窗中共存

小標題說的「同一屏幕視窗」是指微信內置瀏覽器中在當前的手機屏幕上顯示的可見範圍，咱們發現，當同一同一屏幕視窗中存在兩個或以上的二維碼的時候，微信客戶端就會識別錯誤，不管你按哪一個二維碼長按識別，識別出來都是同一個目標。這個問題在iOS 版（iPhone）微信2.2及安卓版上均有之。

下面是一個演示Demo 頁面，請用目標手機（iPhone 或安卓機上）微信掃描訪問，而後長按識別二維碼：

該頁面一共有六個二維碼，兩兩分組爲三組，每組的二維碼的信息分別是指向qq.com、baidu.com 的url。爲了保證每次只有一組二維碼在當前屏幕可視範圍，頁面特地將每組二維碼距離拉得很大。每次請保持只有一組二維碼在你當前屏幕範圍內，而後請依次長按識別二維碼。你會發現不管不管你按哪一個二維碼長按識別，識別出來都是同一個目標。

而後再嘗試最後一組二維碼，嘗試經過滾動頁面使得某個二維碼不在你的屏幕可見範圍，再執行長按識別二維碼。

經過上面的Demo 頁面，其實咱們能夠猜想微信中長按識別二維碼的運行原理，就是你長按的時候至關於將當前手機屏幕截屏，識別截屏後的圖片，這樣一張圖片有兩個二維碼圖的時候固然只會識別出一個。順着這個思路也能夠解釋上述坑一，由於截屏的圖片固然包括了系統狀態欄那部分，也就不難理解爲何會有「識別上移」的詭異現象了。

解決方案的話就是不要將兩個二維碼共存在同一個頁面中。

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

這個是後來偶然發現出來的，屢次執行長按二維碼的功能會致使手機(iPhone)變卡。以前我作測試的時候也發現，屢次測試後竟然右鍵都識別出來是二維碼圖片（即沒有出現「識別二維碼」的按鈕）。

原文發表於：http://devework.com/weixin-qrcode-bug2.html 略有修改。