一、场景

通过把链接转成二维码进行分享

二、概念及原理

1. 二维码原理：使用计算机中“0”、“1”的比特流概念，结合几何图形来表示文字数值信息。
2. 活码原理：二维码的一种高级形态，通过短网址指向保存在云端的信息。图案和普通二维码比较更简单更易扫描，而且可以随时更改云端内容，做到同一个图案，不同的内容。
3. 容错率：是指二维码被遮挡后仍能被正常扫描，而这个能被遮挡的最大面积就是容错率。容错率分为以下四个等级：

• L：可纠正7%错误
• M：可纠正15%错误
• Q：可纠正25%错误
• H：可纠正30%错误

注意：虽然有纠错，但并不是所有位置缺损都能纠错，最明显的就是三个角上的方框，直接影响初始定位。中间零散的部分是内容编码，可以容忍缺损。

三、使用

<!--HTML-->
<div id="qrcode"></div>

<!--JS-->
<script type="text/javascript">
    <!--用法一：直接初始化-->
    new QRCode(document.getElementById("qrcode"), "https://juejin.im/timeline");
    <!--用法二：带参初始化-->
    const qrcode = new QRCode("qrcode", {
        text: "https://juejin.im/timeline",     // 内容
        width: 44,                              // 宽度
        height: 44,                             // 高度
        colorDark : "#000000",                  // 前景色
        colorLight : "#ffffff",                 // 背景色
        correctLevel : QRCode.CorrectLevel.H    // 容错率
    });
    qrcode.clear(); // 清空二维码
    qrcode.makeCode("https://juejin.cn/topics"); // 重新生成二维码
</script>

四、填坑

1. 微信、支付宝“扫一扫”无法识别

原因：容器小遮挡住三个角方框的一小部分导致无法识别
方案：调整二维码容器的宽高或缩小二维码的尺寸

2. 链接长度20左右可正常识别，长度80以上解析慢甚至无法识别

原因：设计图中二维码尺寸较小，链接较长时生成的内容编码复杂导致模糊
前端方案： 借助第三方服务将长链接转成永久有效的短链接，新浪有提供接口，虽然免费，但调用频次受限，所以此方案适合链接较为固定的场景，具体实现参考其接口文档
后端方案： 根据活码原理，将接口生成二维码，扫码识别访问后端配置或数据库的信息，由后端做重定向或以服务形式返回短链接给前端进行跳转。此方案需注意接口长度尽可能短，且需要读取环境配置（dev|sit|uat|prod等）生成二维码

3. 历经重重险阻，微信支付宝的坎都过了，但是，自家的APP无法识别！！！

原因：市面上大部分APP的“扫一扫”功能都是简单版，能扫码识别就基本完事，一来没有聚焦放大，二来没有弱光检测，只能靠客户端去优化了

五、参考文献

• QRCode.js
• 草料二维码