A,

Share by turning links into QR codes

Ii. Concept and principle

  1. Principle of two-dimensional code: the use of computer “0”, “1” bitstream concept, combined with geometric graphics to express text numerical information.
  2. Live code principle: an advanced form of qr code that points to information stored in the cloud via a short url. Patterns and ordinary TWO-DIMENSIONAL code are simpler and easier to scan, and you can change the cloud content at any time, so that the same pattern, different content.
  3. Fault tolerance rate: it refers to the two-dimensional code can still be scanned normally after being blocked, and the largest area can be blocked is the fault tolerance rate. Fault tolerance rate is divided into the following four grades:
  • L: 7% of errors can be corrected
  • M: Correct 15% of errors
  • Q: Correct 25% of errors
  • H: 30% of errors can be corrected

Note: although there are corrections, not all positional defects can be corrected, the most obvious is the box on the three corners, which directly affects the initial positioning. The fragmented part in the middle is content encoding and can tolerate defects.

Three, use,

<! --HTML--> <div id="qrcode"></div> <! --JS--> <scripttype="text/javascript"> <! New QRCode(document.getelementById ();"qrcode"), "https://juejin.im/timeline"); <! --> const qrcode = new qrcode ()"qrcode", {
        text: "https://juejin.im/timeline", // contents width: 44, // width: 44, // height: 44, // height: 44, colorDark:"# 000000", // foreground colorLight:"#ffffff", // background color correctLevel: qrcode.correctlevel.h // error tolerance}); qrcode.clear(); Qrcode.makecode ("https://juejin.cn/topics"); </script>Copy the code

Fourth, filling holes

  1. Wechat and Alipay cannot be identified if they are scanned

Reason: The container covers a small part of the three corners of the box, leading to the inability to identify the solution: adjust the width and height of the two-dimensional code container or reduce the size of the two-dimensional code

  1. Link length about 20 can be normal identification, length over 80 parsing slow or even impossible to identify

Reason: small size of qr code in the design drawing, a longer link generated when the content of the code complex lead to fuzzy front end solution: with the help of the third-party service will long links into a permanent short links, sina interface is given, though free, but the call frequency is limited, so the scheme is suitable for the scenario link is relatively fixed, its interface implementation reference document back-end plan: Based on the live code principle, the interface generates a TWO-DIMENSIONAL code and scans the code to identify the information that accesses the back-end configuration or database. The back-end redirects or returns a short link to the front-end in the form of a service. This scheme should be pay attention to the interface length as short as possible, and need to read the environment configuration (dev | sit | uat | prod, etc.) to generate qr code

  1. After many dangers and obstacles, wechat Alipay has passed, but their own APP can not recognize!!

Reason: The “scan” function of most apps on the market is a simple version, which is basically complete with the scan code recognition. On the one hand, there is no focus amplification, and on the other hand, there is no low-light detection, which can only be optimized by the client

5. References

  • QRCode.js
  • Grass QR code

All see this, if it helps you, click a “like” and then go ~