本篇文章給大家介紹一下在微信小程序中使用canvas+Painter插件制作二維碼的方法，希望對(duì)大家有所幫助！

在日常的小程序項(xiàng)目中，會(huì)經(jīng)常遇到需要?jiǎng)討B(tài)繪制二維碼的需求。使用場(chǎng)景很多，例如繪制在海報(bào)上，例如制作票務(wù)碼、核銷碼等等。
這篇文章是應(yīng)一位好友的需求而寫(xiě)的，也希望能夠給有需要的同學(xué)一些幫助。

一、實(shí)現(xiàn)原理

使用微信小程序的canvas組件進(jìn)行繪制，但是在該組件用起來(lái)并不是很順手，所以使用了第三方的框架：Painter

Painter的Github地址：https://github.com/Kujiale-Mobile/Painter

用你的方法，把這個(gè)框架下載下來(lái)，里面會(huì)有示范代碼，我們只需要把其中的核心代碼拿出來(lái)就行。

對(duì)于框架的使用介紹，大家可以前往github瀏覽，我這就直接上手了?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

二、實(shí)現(xiàn)代碼

前期準(zhǔn)備

1、新建components文件夾，放置painter核心代碼

2、新建palette文件夾，放置繪制實(shí)現(xiàn)代碼

painter.js代碼

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

3、新建繪制的具體屬性信息文件夾posterViewjs，放置例如繪制的大小、位置等信息js。

二維碼繪制屬性信息js代碼

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
}

實(shí)現(xiàn)

實(shí)現(xiàn)頁(yè)面目錄結(jié)構(gòu)

wxml代碼

<view class="flex-jc-ac-col" style="margin-top: 200rpx;">
??<image class="qrcode-img" src="{{imgUrl?imgUrl:&#39;&#39;}}" mode="widthFix"></image>
??<button type="primary" style="margin-top: 105rpx;" bindtap="makeQRCodeTap">生成二維碼</button>
</view>

<!-- canvas隱藏 -->
<painter customStyle=&#39;position: absolute; left: -9999rpx;&#39; customActionStyle="{{customActionStyle}}"
  dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd"
  action="{{action}}" use2D="{{true}}" widthPixels="720" />
<!-- canvas隱藏 -->

wxss代碼

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

json代碼

注意記得在使用的頁(yè)面引用painter組件

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

JS代碼

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

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

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

??},

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

??},

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

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

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



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

實(shí)現(xiàn)效果

三、結(jié)語(yǔ)

實(shí)際開(kāi)發(fā)中的其他邏輯就不寫(xiě)了。需要同學(xué)們自己去考慮異常情況處理等問(wèn)題啦。

以上均是本人開(kāi)發(fā)過(guò)程中的一些經(jīng)驗(yàn)總結(jié)與領(lǐng)悟，如果有什么不正確的地方，希望大佬們?cè)u(píng)論區(qū)斧正。

本文轉(zhuǎn)載自：https://blog.csdn.net/weixin_44702572/article/details/120443998

作者：super--Yang

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程入門(mén)??！

以上是手把手教你在微信小程序中使用canvas+Painter插件制作二維碼的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！