一、前言
在日常的小程序項目中，會經常遇到需要動態繪制二維碼的需求。使用場景很多，例如繪制在海報上，例如制作票務碼、核銷碼等等。
這篇文章是應一位好友的需求而寫的，也希望能夠給有需要的同學一些幫助。
二、實現原理
使用微信小程序的canvas組件進行繪制，但是在該組件用起來並不是很順手，所以使用了第三方的框架：
Painter
Painter的Github地址
用你的方法，把這個框架下載下來，里面會有示范代碼，我們只需要把其中的核心代碼拿出來就行。
對於框架的使用介紹，大家可以前往github瀏覽，我這就直接上手了。
painter能做的不僅僅只是繪制一個二維碼。戳下面鏈接查看帶參海報繪制。
實戰篇-制作微信小程序碼宣傳海報
三、實現代碼
前期准備
1、新建components文件夾，放置painter核心代碼
2、新建palette文件夾，放置繪制實現代碼
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
}
實現
實現頁面目錄結構
wxml代碼
<view class="flex-jc-ac-col" style="margin-top: 200rpx;">
<image class="qrcode-img" src="{{imgUrl?imgUrl:''}}" mode="widthFix"></image>
<button type="primary" style="margin-top: 105rpx;" bindtap="makeQRCodeTap">生成二維碼</button>
</view>
<!-- canvas隱藏 -->
<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隱藏 -->
wxss代碼
.qrcode-img{
background-color: #999999;
height: 300rpx;
width: 300rpx;
}
json代碼
注意記得在使用的頁面引用painter組件
{
"usingComponents": {
"painter":"/components/painter/painter"
},
"navigationBarTitleText": "繪制二維碼"
}
JS代碼
// pages/makeQRCode/makeQRCode.js
import poster from '../../palette/painter'
const posterView = require("../../posterViewjs/posterView")
Page({
/**
* 頁面的初始數據
*/
data: {
imgUrl: null,
QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",
paintPallette: '',
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad() {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow () {
},
/** 生成海報點擊監聽 */
makeQRCodeTap() {
wx.showLoading({
title: '獲取海報中',
mask: true
})
// 繪制海報
this.makePoster(this.data.QRCodeText)
},
/** 繪制完成后的回調函數*/
onImgOK(res) {
wx.hideLoading()
// 這個路徑就可以作為保存圖片時的資源路徑
// console.log("海報臨時路徑", res.detail.path)
this.setData({
imgUrl: res.detail.path
})
},
/** 生成海報 */
makePoster(qrcodeText) {
wx.showLoading({
title: '生成海報中',
})
// 這是繪制海報所用到JSON數據
const viewList = posterView.getPosterView01(qrcodeText)
this.setData({
paintPallette: new poster().palette(viewList)
})
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage() {}
})
實現效果
四、最后結語（學習指南）
實際開發中的其他邏輯就不寫了。需要同學們自己去考慮異常情況處理等問題啦。
有任何疑問可以在評論區留下。
最后，微信小程序作為近幾年“微服務”的傑出代表，應用十分廣泛。小程序是一種新的開放能力，開發者可以快速地開發一個小程序。小程序可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。
小程序作為未來移動應用開發的大趨勢，具有以下優勢：
1、不用安裝APP，即開即用，用完就關閉，省時省流量，更不會占用手機內存;
2、只需要用戶掃碼即可，不管是流量環境還是wifi環境，都不是問題，最大程度減少了用戶的耐心損耗;
3、程序簡化，只需開發只涉及網頁前端和服務器后端，不需要像APP一樣，考慮兩個手機系統，節省了大量的時間和人力;
4、對於用戶來說，微信小程序UI和操作流程會更統一，這也會降低用戶的使用難度;
5、可跨平台，微信應用號本身是網頁，可以在群里被轉發，可以搭建到公眾號商，傳播起來非常方便;
6、微信有海量用戶，而且粘性很高，在微信里開發產品更容易觸達用戶。
綜上，微信小程序可以說是作為前端、移動端開發人員必備技能，而如今小程序開發人才緊缺，在北上廣深這樣的一線城市，僅是應屆生甚至大專學歷，就可以收獲10k以上的月薪！
不少編程專業的同學都面臨着“畢業=失業”的窘境，像熱門主流的Java開發和Web前端崗位競爭實在太過激烈。而小程序可以說是內卷狂沙中的一片綠洲。
如果你苦於學校並沒有開設小程序的課程，或者沒有一份系統完整的學習資料，請你務必收下今天這篇文章！4504頁《微信小程序零基礎入門開發文檔》助你零基礎入門微信小程序開發！毫不誇張的說，啃完這份筆記，你絕對能達到企業級的開發水准，保你在畢業時能驚艷所有人！
廢話不多說，我們直接開始上硬菜！！
（ps：請務必點贊+收藏文章，把他分享給更多的人！）
這份筆記免費開源分享，有需要的朋友直接【一鍵三連】，然后點擊【此處】進入群共享資源自取，或者直接通過下方代碼塊找我領取。**
// Wechat number（可復制）：
study5233
第一章：起步指南
這一章節是真正的入門篇，從零開始教你搭建、編碼、運行你的第一個微信小程序。
第二章：框架
第三章：組件
第四章：API
這份筆記免費開源分享，有需要的朋友直接【一鍵三連】，然后點擊【此處】進入群共享資源自取，或者直接通過下方代碼塊找我領取。**
// Wechat number（可復制）：
study5233
第五章：服務
第六章：工具
第七章：雲開發
第八章：擴展能力
這份筆記免費開源分享，有需要的朋友直接【一鍵三連】，然后點擊【此處】進入群共享資源自取，或者直接通過下方代碼塊找我領取。**
// Wechat number（可復制）：
study5233
文末
如果這份筆記對你有幫助，請務必點贊+收藏這篇文章，把他分享給更多的小伙伴，一起學習進步！
追夢的路上總是艱難，路漫漫其修遠兮，吾將上下而求索。即便未必能夠如願抵達，未必能夠得償所願，但能進一步是一步，每前進一步總有一步的欣喜，也多少會見到一些新的風景。
我不知道讀者里有多少這樣前路迷茫需要鼓舞的人，希望今天這篇文章能夠給你們一點鼓勵和力量，勇敢地出發，朝着自己夢想的地方前進。你也可以點贊關注我，與我一起前進。
