领券联盟Web版代码优化

前言

昨天打开之前写的领券联盟Web版，突然发现我们前端生成的二维码用我们写的领券联盟APP不容易识别，而且部分链接识别错误。

原因分析

二维码不容易识别

①二维码内容较多（链接实在太长了??）；

②二维码图片的背景比较复杂（因为商品封面图片在二维码底下，影响到了客户端APP的二维码识别效果。 主要还是我们的二维码识别功能太low了，微信、QQ这些就可以完美识别。 ）

链接识别错误

这一点就和我们前端二维码的内容有关了，因为没有对url进行处理，导致有些时候的url是没有http协议前缀的，然后识别之后就有问题了。

问题解决

既然原因已经分析清楚了，那我们就开始解决问题吧。

客户端二维码识别的优化其实还是比较有难度的 （主要是我目前还不会，得深入源码去分析） ，那我们就从前端着手吧。

①在我们编写的 onMouseHover 方法中 qrcode.makeCode(url); 的前一行加上如下代码

// 正则匹配，是否有 http: 前缀，如果没有就拼接上去
if (url.search("http:") === -1) {
    url = "http:" + url
}
// 填充白色背景，黑白的二维码比较容易识别一些
qrCodeContainer.style.backgroundColor = "#ffffff"

②在我们编写的 onMouseLeave 方法中 if (qrCodeContainer) 的代码块里（大括号里面）加上如下代码

// 将二维码容器的背景置为透明，以免遮住商品封面图片
qrCodeContainer.style.backgroundColor = "transparent"

至此，我们就解决了二维码不容易识别和某些二维码识别错误的问题啦，是不是猴开森呢？

欢迎同学们点赞、评论、打赏+关注，一键三连~