The dazzling TWO-DIMENSIONAL code can be seen everywhere in our cities and moments of friends. Many platforms provide customized two-dimensional code services. Then, as a programmer, how can we achieve a simple two-dimensional code generator by ourselves? Next, I will take you to use Qrcode to achieve a TWO-DIMENSIONAL code generator.

Results the preview

From the figure above we can see that we can customize the TWO-DIMENSIONAL code:

  • Text (such as A URL, a piece of text)
  • Two-dimensional code size
  • Background color of TWO-DIMENSIONAL code
  • Two-dimensional code foreground scenery
  • Qr Code Level
  • Customize the icon displayed in the TWO-DIMENSIONAL code as well as the position and size of the icon

Before development we need to know:

  • What is theQR Code Code
  • QrcodeBasic usage of
  • And how to design a robust component

The author will not introduce the detailed implementation principle of two-dimensional code, because there are many relevant articles, we start from a practical point of view to solve practical problems.

QR Code Code

QR Code Code, is developed by Denso company in September 1994 a matrix two-dimensional Code symbol, it has a one-dimensional bar Code and other two-dimensional bar Code with large information capacity, high reliability, can represent Chinese characters and images of a variety of text information, security and anti-counterfeiting advantages.

About QR Code Code we need to know two core knowledge, that is, QR Code data representation method and error correction ability.

  • QR CodeData representation method: The dark module indicates binary “1” and the light module indicates binary “0”.
  • Error correction ability
    • Grade L: about 7% of the data code words can be corrected
    • Grade M: about 15% of the data code words can be corrected
    • Grade Q: about 25% of the data code words can be corrected
    • Grade H: about 30% of the data code words can be corrected

Understanding the above two knowledge is very helpful for us to achieve customized TWO-DIMENSIONAL code. This is also used when using the Qrcode plugin.

Qrcode basic Usage memory how to wrap custom controlled components

Because most of our projects are using it nowreactorvueDeveloped, so we can directly use the corresponding plug-in version, the author used here isqrcode.react. This library is very good in terms of usage and we can quickly generate a static QR code with it in only 2-3 steps.

In order to achieve a TWO-DIMENSIONAL code generator, first of all, we need to be able to customize the two-dimensional code properties, which is the author listed a few items at the beginning, so these properties we completely from the external access, that is to say, two-dimensional code components we want to make controlled, as follows:From the figure above we get the followingreactComponent mode:

<div className={styles.codeWrap}>
  <QRCode value={url} size={codeSize} bgColor={bgColor} fgColor={fgColor} imageSettings={{src: imgUrl[0].url.x: null.y: null.excavate: true.height: imgH.width: imgW}} / >
</div>
Copy the code

That’s where our powerful form renderer comes in, and we need to giveqrcodeThe component connects to a form editor, as shown belowFormEditor:

For simplicity, we use the FormEditor provided by H5-Dooring. We can generate a Form editor automatically by writing the following JSON structure:

const Qrcode: IQrcodeSchema = {
  editData: [{key: 'url'.name: 'url'.type: 'Text'}, {key: 'codeSize'.name: 'Two-dimensional code size'.type: 'Number'}, {key: 'bgColor'.name: 'Background color'.type: 'Color'}, {key: 'fgColor'.name: 'Foreground view'.type: 'Color'}, {key: 'level'.name: 'class'.type: 'Select'.range: [{key: 'L'.text: 'low'}, {key: 'M'.text: 'in'}, {key: 'Q'.text: 'good'}, {key: 'H'.text: 'high',},],}, {key: 'imgUrl'.name: 'QR code icon'.type: 'Upload'.isCrop: true.cropRate: 1}, {key: 'imgW'.name: 'Icon width'.type: 'Number'}, {key: 'imgH'.name: 'Icon height'.type: 'Number'],},config: {
    url: 'https://github.com/MrXujiang/h5-Dooring'.codeSize: 180.bgColor: 'rgba(255,255,255,1)'.fgColor: 'rgba (0,0,0,1)'.level: 'L'.imgUrl: [{uid: '001'.name: 'image.png'.status: 'done'.url: `http://xxxx.jpg`],},imgW: 48.imgH: 12}};export default Qrcode;
Copy the code

At this point, we can render the QR code generator at the beginning of the article. We can customize the style and icon of the QR code we like. The level option in the editor is the error correction capability of QR Code that I introduced at the beginning. We can customize the level we want.

I have now integrated the QR code generator into the open source project H5-Dooring,

Online play address (PC experience preferred) : H5 editor | update qr code generator components

Phase to recommend

13+ FaQs and solutions encountered in the Recovery Node project

How to build building blocks to quickly develop H5 pages?

Handlift an online CSS triangle generator

Front-end efficient development of the necessary JS library comb

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement! Wechat search “interesting talk front-end”, found more interesting H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and actual combat.