微信二维码长按无法识别问题解析

近来在写H5页面时发现在手机端微信里长按识别二维码有时会出现不能识别的bug，最近就对这些可能导致二维码不能识别的bug做了一下研究，写出来，和大家分享一下。

   

一、微信识别二维码的原理机制

   我们先来看一下微信识别二维码的原理机制：

   “微信识别二维码采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。

   为什么要用截屏，这也是一个开发时候的思考。客户端截屏时候，可以不用考虑网络传输等因素，最快的得到识别结果，否则就需要走一次图片下载的逻辑，用户长按后等待的时间会加长，体验上也失去了快感。当然，这也带来了识别不出的问题（所以正在考虑先截屏，截屏识别失败再下载的新逻辑）。”

   详情请参考：网页中二维码识别规则

 

二、二维码识别常见的BUG及解决方法

1、二维码图片直接放在background里时无法识别

   由上述二维码识别原理我们可以知道客户端是检测网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以当将二维码图片直接放在background中时，识别效果特别差，基本上是识别不出来的。所以最好是将二维码图片单独切出来放在了img标签中。

 

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

   微信识别二维码的原理是长按的时候相当于将当前手机屏幕截屏，识别截屏后的图片，这样一张图片有两个二维码图的时候当然只会识别出一个。建议解决办法是不要在同一屏幕中放多张图片或者提示用户双击放大二维码进行二维码识别。

 

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

   多次执行长按二维码的功能会导致手机(iPhone)变卡。长按识别二维码，多次测试后右键识别出来是二维码图片（即没有出现“识别二维码”的按钮）。

 

4、iOS 版微信长按识别二维码无法正常识别

（8.21 更新：最新版6.2.4 已经修复该bug）

   以下实测在iOS 版（iPhone）微信6.2.2 中有此bug，安卓版微信暂时没有发现有此bug。

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

解决方案有两个：

（1）通过为img增加padding增大可接触面积。

（2）为二维码本身增加透明底部背景，如下:

 

5、IOS系统meta缩放问题导致二维码无法识别

   在安卓版的微信长按二维码可以识别（前提是你的微信版本到支持此功能），但是到了苹果版的微信就识别不了，这时候可能是缩放的问题：

（1）设置了初始缩放设置为1，最大缩放值要>=1,不支持缩放。--->可以识别。

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

（2）设置了初始缩放设置为小于1或者大于1，最大缩放值大于或者等于初始缩放,不支持缩放。--->不可以识别。

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

（3）设置了初始缩放设置为1，最大缩放值要>=1,支持缩放。--->页面不缩放之前可以识别，一旦页面缩放过后就不可以识别。

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

（4）都不设置时，不可以识别。

（5）设置了固定的宽，导致二维码的实际位置偏移到屏幕外

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

（6）页面有css样式fixed --->不可以识别。

 

以上这些设置导致二维码图片定位不准，或者二维码全部跑到屏幕外或者部分跑到屏幕外而无法识别。以下是其解决办法：

方法1：
   设置：初始缩放为1，最大缩放值要大于1，不支持缩放。如下：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>

 

方法2：

   首先要把这张二维码添加到body的子元素 放在最后或者是最前都可以，

注意这可能影响你的布局，可设置position:absolute，进行调整，因为这才是真正用来识别的二维码，如果这个二维码位置太偏移，有可能会造成二维码无法识别。此外还需要注意的是opacity需要设为0而不是设置display属性。

   <img style="position:absolute;width: XXpx;height: XXpx;opacity: 0" src="二维码图片地址"> 

   其次，在你应该在设计稿设计的地方，放置的div里面设置你正常二维码图片的大小，以便页面呈现正常。

   <img style="你的正常大小" src="二维码图片地址" />

   这时你就会发现长按图片能够识别出来二维码。

 

   其实除了这些BUG外，二维码信息显示不全；在长按时候只有部分可见；二维码周围信息过于复杂，在整个截屏中二维码算法无法正确识别；网页没有加载完成，微信的识别js没有启动都会导致二维码无法识别，另外二维码过大或者过小时，也会出现识别困难问题，通常160*160就可以了。

 

此文章主要发布在本人所在公司网站H5案例分享（http://www.h5-share.com/）、公司公众号H5握手和个人博客中，转载请注明出处。