Wechat applet generates QR code

QR code is also called Two dimensional bar code , Common QR codes are QR Code,QR Full name Quick Response（Quick Response, It reflects that this QR code has “ Ultra high speed reading ” Characteristics .“Quick Response Code” That is to say “ Quick response code ”）, It is a super popular coding method on mobile devices in recent years , It's better than the traditional Bar Code Barcode can store more information , Can also represent more data types .

Two dimensional bar code / QR code （2-dimensional bar code） It is to use a specific geometric figure in a plane according to a certain rule （ Two dimensional ） The distribution of the 、 Black and white 、 Graph recording data symbol information ; In code making, it is ingenious to use the “0”、“1” The concept of bitstream , A number of geometric shapes corresponding to binary are used to represent literal numerical information , adopt Image input device or photoelectric scanning device Automatic reading to realize automatic information processing ： It has some common features of bar code technology ： Each code system has its own specific character set ; Each character has a certain width ; It has certain verification function etc. . At the same time, it also has the function of automatic identification of different information 、 And processing the rotation change point of the graph . 

development history

Two dimensional code principle

The basic principle of QR code is to use binary to store information . It usually consists of square matrix pixels . The following figure is a common shape of QR code . It consists of 21 That's ok ,21 A small rectangle of columns . Matrix " Black dot " For binary "1", " White dot " For binary "0". these 1 and 0 The arrangement and combination form a QR code .

except 1 and 0 Outside the pixels of , The QR code also has three large black blocks like eyes , be called Anchor point . This is used to locate the image during QR code recognition , There must be no shelter . Otherwise, it will not be recognized .

First introduce weapp-qrcode.js Download link   Click on the link , direct  ctrl + s  Save relative position

 

 wxml 

<view id="container">
  <view class="ewm">
    <canvas style="width: 600rpx; height: 600rpx;" canvas-id="myQrcode"></canvas>
  </view>
  <input class="inpt" bindinput="ewmText" value="{
   { text }}"></input>
  <button bindtap="searchFn" class="btn" type="primary"> Generate qr code </button>
</view>

wxss

.ewm{
  background-color: #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 680rpx;
  height: 680rpx;
  margin: 50rpx auto;
}
 
.inpt{
  border: 1rpx solid #e8e8e8;
  width: 620rpx;
  margin: 30rpx auto;
  padding: 30rpx;
}
 
.btn{
  width: 680rpx;
}

js

//index.js
const app = getApp()
let drawQrcode = require("../../utils/weapp-qrcode.js")
Page({
  data: {
    text:"(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ",
  },
  onLoad() {
    this.ewmChange()
  },
 
  ewmChange(){
    let size = {}
    size.w = wx.getSystemInfoSync().windowWidth / 750 * 600
    size.h = size.w
    var that = this
 
    drawQrcode({
      width: size.w,
      height: size.h,
      canvasId: 'myQrcode',
      // ctx: wx.createCanvasContext('myQrcode'),
      text: that.data.text,
      // v1.0.0+ Version supports drawing pictures on QR code 
    })
  },
 
  ewmText(e){
    this.setData({
      text: e.detail.value
    })
  },
 
  searchFn(){
    this.ewmChange()
  }
  
})