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

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

   

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

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

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

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

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

 

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

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

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

 

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

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

 

三、屡次执行长按二维码的功能会致使内存泄漏，手机会变卡

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

 

四、iOS 版微信长按识别二维码没法正常识别

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

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

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

解决方案有两个：

（1）经过为img增长padding增大可接触面积。

（2）为二维码自己增长透明底部背景，以下:

 

五、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握手和我的博客中，转载请注明出处。