This article will introduce to you how to use the canvas Painter plug-in to create QR codes in the WeChat applet. I hope it will be helpful to you!

#In daily small program projects, we often encounter the need to dynamically draw QR codes. There are many usage scenarios, such as drawing on posters, making ticket codes, verification codes, etc.
This article was written in response to the needs of a friend, and I hope it can give some help to students in need.

1. Implementation Principle

Use the canvas component of the WeChat applet to draw, but this component is not very easy to use, so a third-party framework is used ：Painter

Painter’s Github address: https://github.com/Kujiale-Mobile/Painter

Use your method to download this framework. There will be demonstration code in it. We Just take out the core code.

For an introduction to the use of the framework, you can go to github to browse. I will get started directly. [Related learning recommendations: 小program development tutorial]

2. Implementation code

Preliminary preparation

1. Create a new components folder and place the painter core code

##2. Create a new palette folder and place the drawing implementation code

painter.js code

export?default?class?LastMayday?{
??palette(viewList)?{
????return?(
??????viewList
????);
??}
}

3. Create a new drawing specific attribute information folder posterViewjs, and place information js such as the size and position of the drawing.

QR 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
}

Implementation

Implement the page directory structure

##wxml code

<view>
??<image></image>
??<button>生成二維碼</button>
</view>

<!-- canvas隱藏 -->
<painter></painter>
<!-- canvas隱藏 -->

wxss code

.qrcode-img{
??background-color:?#999999;
??height:?300rpx;
??width:?300rpx;
}

json code

Please remember to reference the painter component on the page you are using

{
??"usingComponents":?{
????"painter":"/components/painter/painter"
??},
??"navigationBarTitleText":?"繪制二維碼"
}

JS code

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

??/**
???*?頁面的初始數(shù)據(jù)
???*/
??data:?{
????imgUrl:?null,
????QRCodeText:?"2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",
????paintPallette:?'',
??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面加載
???*/
??onLoad()?{

??},

??/**
???*?生命周期函數(shù)--監(jiān)聽頁面顯示
???*/
??onShow?()?{

??},

??/**?生成海報點擊監(jiān)聽?*/
??makeQRCodeTap()?{
????wx.showLoading({
??????title:?'獲取海報中',
??????mask:?true
????})
????//?繪制海報
????this.makePoster(this.data.QRCodeText)
??},

??/**?繪制完成后的回調(diào)函數(shù)*/
??onImgOK(res)?{
????wx.hideLoading()
????//?這個路徑就可以作為保存圖片時的資源路徑
????//?console.log("海報臨時路徑",?res.detail.path)
????this.setData({
??????imgUrl:?res.detail.path
????})
??},

??/**?生成海報?*/
??makePoster(qrcodeText)?{
????wx.showLoading({
??????title:?'生成海報中',
????})
????//?這是繪制海報所用到JSON數(shù)據(jù)
????const?viewList?=?posterView.getPosterView01(qrcodeText)
????this.setData({
??????paintPallette:?new?poster().palette(viewList)
????})
??},



??/**
???*?用戶點擊右上角分享
???*/
??onShareAppMessage()?{}
})

Achieve effect

3. Conclusion

I will not write other logic in actual development. Students need to consider issues such as handling abnormal situations themselves.

The above are some of my experience summaries and insights during the development process. If there is anything incorrect, I hope the experts will correct it in the comment area.

This article is reproduced from: https://blog.csdn.net/weixin_44702572/article/details/120443998

Author: super--Yang

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of Teach you step by step how to use canvas+Painter plug-in to create QR code in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!