微信长按识别二维码bug整理

太过爱你忘了你带给我的痛 2022-08-23 00:59 342阅读 0赞

### 微信长按识别二维码问题搜集与整理 ###

最近在折腾一个手机端页面长按识别二维码的问题。发现长按二维码时在ios和android手机上识别不是那么灵敏。下面整理下我对该问题的总结。  
起初我将二维码图片直接放在background中，这种情况识别效果特别差。然后我将二维码图片单独切出来放在了img标签中，问题稍微缓解了下，但是识别还是很不稳定。

#### 网页中二维码识别的原理 ####

微信中二维码识别采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。下面这篇文章详细说明了微信识别二维码的原理，并给出了非常具体的建议，这篇文章的作者是微信团队成员，一定要看哦！

> 这篇文章详细说明了微信识别二维码的原理，并且给出了非常具体的建议,这篇文章的作者是微信团队成员，—— [ \[ 网页中二维码识别规则\]][Link 1]

--------------------

#### 常见bug整理 ####

**1. IOS版微信长按识别二维码无法正常识别**

对于二维码区域，实际可识别区域是整体上移64px，64px的偏移与二维码大小本身无关。下面的红色的区域即为实际可识别的二维码区域。为什么是神秘的64px？因为64px正好是微信内置浏览器标题栏＋系统标题栏的高度。可以认为微信客户端在识别二维码的时候忽略了微信标题栏＋系统状态栏的高度。  
![这里写图片描述][20160605111858833]

解决方案有两个：

*  通过为img增加padding增大可接触面积。
 *  为二维码本身增加透明底部背景，如下:

![这里写图片描述][20160605112058365]

**2 多张二维码图片无法在同一屏幕中共享**

微信识别二维码的原理是当长按的时候会将屏幕截屏，识别保存下来的图片。建议解决办法是不要在同一屏幕中放多张图片。

**3 多次执行长按二维码的功能会导致内存泄漏，手机会变卡。**

**4 网上看到的其它说法，可以在调试的时候都按照这种方式来尝试一下**

*  不要用fixed定位
 *  初始缩放值为1，最大缩放值大于或等于1，不支持缩放。不可以识别

*  初始缩放设置为小于1或者大于1，最大缩放值大于或者等于初始缩放,不支持缩放。不可以识别

*  初始缩放值为1，最大缩放值大于或等于1，不支持缩放。不可以识别

*  都不设置 不可以识别
 *  都不设置 不可以识别

最后为了兼容，只能设置：初始缩放为1，最大缩放值要大于1，不支持缩放。如下：

以上总结也许不是识别慢的具体原因，不过可以作为调试时的参考。

--------------------

[Link 1]: http://mp.weixin.qq.com/s?__biz=NzA3OTQ2OTgw&mid=205918916&idx=1&sn=d729ef70ea1e7fc50e649352a63a2564&scene=1&key=c76941211a49ab586ba4831f2f6fa42fbb2525460003fa8e19bc205b9b25facbf60da78977da071ddbc41a5be6a7b9fa&ascene=0&uin=NTE3ODg0NjE1&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.10.3%20build%2814D136%29&version=11020012&pass_ticket=WPa8XnvIzBrBOA6RHy2RMECcrsuN2QiksK8Y1Z/D3Odk49uIsXOex7EV2NXN9m5X
[20160605111858833]: /images/20220722/c7b7aeb68be94b4f8492b4689729d82c.png
[20160605112058365]: /images/20220722/66915997374246b88370c63d5f39db99.png