前言
昨天打开之前写的领券联盟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"
至此,我们就解决了二维码不容易识别和某些二维码识别错误的问题啦,是不是猴开森呢?
欢迎同学们点赞、评论、打赏+关注,一键三连~