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: