Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

One, foreword

In the era of rapid development of the Internet +, wechat small program is more and more prominent, which is related to the age of wechat adaptation, there will be a smart phone wechat, there will be no scene will often meet the need to draw two-dimensional code dynamic demand. Use a lot of scenarios, such as: drawing on posters, ticket verification vouchers, verification code and so on……

Two, the implementation principle

The canvas component of wechat small program is used for drawing, but it is not very convenient to use this component, so we use the framework of a third party: Painter Painter’s Github address Download this framework with your method, there will be demonstration code, we just need to take out the core code. For the introduction of the framework, you can go to Github to browse, I will directly use.

Three, first show the effect

Four, implementation code and ideas

preparation

1. Create a Components folder and place the Painter core code

2. Create the Palette folder and place the JS code for the drawing implementation Painter. Js code

export default class LastMayday {
  palette(viewList) {
    return( viewList ); }}Copy the code

3. Create a specific attribute information folder for drawingposterViewjsTo place information such as the size and position of the drawing. Two-dimensional code drawing attribute information JS code

const getPosterView01 = (qrcodeText) = > {
  const poster01 = {
    "width": "256px"."height": "256px"."background": "#f8f8f8"."views": [{
      "type": "qrcode"."content": qrcodeText,
      "css": {
        "color": "# 000000"."background": "#ffffff"."width": "256px"."height": "256px"."top": "0px"."left": "0px"."rotate": "0"."borderRadius": "0px"}}}]return poster01
}
module.exports = {
  getPosterView01: getPosterView01
}

Copy the code

4. Create a new page for layout and introduce, for example, index WXML code page layout

<view class="box" >
  <image class="qrcode-img" src="{{imgUrl? imgUrl:''}}" mode="widthFix"></image>
  <button type="primary" style="margin-top: 105rpx;" bindtap="makeQRCodeTap">Generate qr code</button></view> <! -- Canvas hide --><painter customStyle='position: absolute; left: -9999rpx; ' customActionStyle="{{customActionStyle}}"
  dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd"
  action="{{action}}" use2D="{{true}}" widthPixels="720" /><! -- Canvas hide -->Copy the code

WXSS code

.qrcode-img{
  background-color: #999999;
  height: 300rpx;
  width: 300rpx;
}
.box{
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: 200rpx;
}

Copy the code

Remember to reference the Painter component in the page you use (note the path introduced).

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  },
  "navigationBarTitleText": "Draw two-dimensional code"
}

Copy the code

JS code

// pages/makeQRCode/makeQRCode.js
import poster from '.. /.. /palette/painter'
const posterView = require(".. /.. /posterViewjs/posterView")
Page({

  /** * initial data for the page */
  data: {
    imgUrl: null.QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a".paintPallette: ' ',},/** * lifecycle function -- listens for page loading */
  onLoad(){},/** * lifecycle function -- listens for page display */
  onShow () {

  },

  /** Generate poster click listen */
  makeQRCodeTap() {
    wx.showLoading({
      title: 'Get in the poster'.mask: true
    })
    // Draw the poster
    this.makePoster(this.data.QRCodeText)
  },

  /** Callback function */ after drawing
  onImgOK(res) {
    wx.hideLoading()
    // This path can be used as a resource path for saving images
    // console.log(" poster temporary path ", res.detail.path)
    this.setData({
      imgUrl: res.detail.path
    })
  },

  /** Generate the poster */
  makePoster(qrcodeText) {
    wx.showLoading({
      title: 'Generating posters',})// This is the JSON data used to draw the poster
    const viewList = posterView.getPosterView01(qrcodeText)
    this.setData({
      paintPallette: new poster().palette(viewList)
    })
  },



  /** * Users click on the upper right corner to share */
  onShareAppMessage(){}})Copy the code

Five, the summary

All came to the last you don’t collect under, under review by the way forward Above is WeChat small programs draw the entire process of qr code, such as what is not the right place, to meet bigwig, hope this article can bring you help, give you reveal in advance, the next article we put the qr code and combined with the picture

Such as: