Shulou(Shulou.com)06/02 Report--

This article is about how to use Mini Program's canvas to draw QR codes, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article, not to say much, follow the editor to have a look.

In WeChat Mini Programs's business, there will be some scenes that need to show the QR code. Static QR codes can be directly stored locally and displayed in pictures, but it is not suitable to generate dynamic QR codes according to user-related information. The following will introduce the use of Mini Program's canvas capabilities to draw QR codes.

1 method 1: generate directly through wx-qr

1.1 DEMO

Wechat developer tools open to view

# install via npm

1.2 installation

Npm I wx-qr-S# installs yarn add wx-qr through yarn

1.3 using components

First, reference the component in the Mini Program root directory app.json you developed or in the xxx.json that needs to use the component.

(note: please do not name the component at the beginning of wx-xxx, which may cause WeChat Mini Programs to fail to parse tag)

{"usingComponents": {"qr-container": "wx-qr"}}

You can then use the components directly in wxml

Page ({data: {qrTxt: 'https://github.com/liuxdi/wx-qr',},})

Of course, you can also support a variety of configurations. For more information, please see github or Cloud documentation.

two。 Method 2: drawing based on QRCode.js and canvas

Components of 2.0 QR code

Positioning pattern

Position Detection Pattern is a positioning pattern that marks the rectangular size of a QR code. These three positioning patterns have white edges called Separators for Postion Detection Patterns. The reason why three instead of four means three can identify a rectangle.

Timing Patterns is also used for positioning. The reason is that the QR code has 40 sizes, and a standard line is needed when the size is too large, otherwise the scan may be crooked.

Alignment Patterns only QR codes above Version2 (including Version2) need this thing, which is also used for positioning.

Functional data

Format Information exists in all sizes and is used to store some formatted data.

If the Version Information is above > = Version 7, you need to reserve two 3 x 6 areas to store some version information.

Data code and error correction code

Except for those places mentioned above, Data Code data codes and Error Correction Code error correction codes are stored in the remaining places.

2.1 introduction of QR code data generation library

Copy qrcode.js to your Mini Program directory.

2.2 establish a canvas tag in Mini Program and set the length and width for canvas

2.3 obtain canvas instance and context

Const query = this.createSelectorQuery (); let dpr = wx.getSystemInfoSync (). PixelRatio;query.select ('# qr'). Fields ({node: true, size: true, id: true}) .exec ((res) = > {let {node: canvas, height, width} = res [0]; let ctx = canvas.getContext ('2d'); canvas.width = width * dpr canvas.height = height * dpr ctx.scale (dpr, dpr);})

2.4 define some variables and draw the data code area of the QR code

Where QRCodeModel is imported from qrCode.js

/ / the color const colorDark of the QR code ='# 000 error control / get the size of the QR code, because css is set to 750rpx, change it to pxconst rawViewportSize = getPxFromRpx; / / the error tolerance rate of the QR code {L: 1, M: 0, Q: 3, H: 2} const correctLevel = 0 position / create the QR code instance object and add data to generate const qrCode = new QRCodeModel (- 1, correctLevel); qrCode.addData (url); qrCode.make () / / the number of QR codes in each direction const nCount = qrCode.moduleCount;// to calculate the size of each QR code block const nSize = getRoundNum (rawViewportSize / nCount, 3) / / the size ratio of each QR code point const dataScale = 1 dataScale / when the dataScale is not 1, the offset value of each point const dataXyOffset = (1-dataScale) * 0.5 dataScale / cyclic row and row rendering data code area for (let row = 0; row

< nCount; row++) { for (let col = 0; col < nCount; col++) { // row 和 col 处的模块是否是黑色区 const bIsDark = qrCode.isDark(row, col); // 是否是二维码的图案定位标识区 Position Detection Pattern（如本模块，是三个顶点位置处的大方块） const isBlkPosCtr = (col < 8 && (row < 8 || row >

= nCount-8)) | | (col > = nCount-8 & & row

< 8); // 是否是Timing Patterns，也是用于协助定位扫描的 const isTiming = (row == 6 && col >

= 8 & & col = 8 & & row

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.