提到二维码，无论是专题、官网、公众号铺天盖地，遍布在生活的各个角落， 尤其我大鹅厂，连饮水机上都贴个二维码鼓励大家多喝水，爬楼梯的楼门上也贴着鼓励大家锻炼身体， 这福利，啧啧啧，试问还有谁？有谁？谁？与之媲美。

好了，不拍马屁了，即使拍再多年终奖也没多发，年会也是P都没中~>_<~

那么二维码有什么好说的呢？先给大家来个

打开页面之后无论你按哪个二维码长按识别，识别出来都是左侧二维码。

并无异常。这时候经同事点播，微信识别二维码的原理是 截屏逻辑 。 就是你长按的时候相当于将当前手机屏幕截屏，识别截屏后的图片，这样一张图片有两个二维码图的时候当然只会识别出一个。

因此要解决这个问题就要保证在同一截屏内只存在 一个二维码 。

1. 加大间距保证截屏内只有一个二维码

   此种方案可以通过加padding或者margin的方式，但并不是我们觉得完美的方式。

2. 识别时隐藏掉其他的二维码

   此时又分两种交互方式。但原理都是长按时隐藏掉其他干扰的二维码。

那我们就稍微探究下二维码。

二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式。

可参考来学习了一下二维码图片生成的相关细节。

采用的是 截屏逻辑， 当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。
所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。
之所以使用截屏，可以不用考虑网络传输因素，最快的得到识别结果，
否则就要走一次图片下载的逻辑，用户长按后等待的时间会加长，体验上也失去了快感。
所以考虑先截屏，截屏失败后再下载的逻辑。

文章提到网页中二维码无法被识别的原因有如下三个：

1. 二维码显示信息不全，在长按时只有部分可见，如下

1. 二维码周围信息过于复杂，在整个截屏中二维码算法无法正确识别，如下

1. 网页没有加载完成，微信的识别js没有启动。

微信可识别的二维码的大小

二维码的可识别大小跟url的长度有关。 二维码不要太大，否则容易跳出屏幕。通常160*160就可以。

针对以上所说我们总结下微信长按识别二维码无法正常识别的bug

1. img标签 需要将二维码图片单独切出，img 标签形式展现，用bg无效

2. 二维码根据url的长度，不要低于50px,不要超过设备屏幕宽度。

3. 2或2张以上二维码无法在同一视窗被识别，识别时隐藏掉干扰项。

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

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

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

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

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

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

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

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

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

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

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

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

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

（/）、公司公众号H5握手和个人博客中，转载请注明出处。