一、前言

在日常的小程序项目中，会经常遇到需要动态绘制二维码的需求。使用场景很多，例如绘制在海报上，例如制作票务码、核销码等等。
这篇文章是应一位好友的需求而写的，也希望能够给有需要的同学一些帮助。

二、实现原理

使用微信小程序的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() {}
})