1. 前言
随着互联网的快速发展，二维码已经成为了个人及企业信息传递的利器，越来越多的业务都依赖于二维码。而在小程序中，我们可以通过canvas绘制出自定义的二维码，并通过Painter插件来优雅地实现。本文将手把手教你如何在微信小程序中使用canvas+Painter插件制作二维码。
2. 准备工作
2.1 下载Painter插件
首先，我们需要下载Painter插件，可以在小程序管理后台中搜索“Painter”进行下载。下载完成后，在app.json文件中配置好：
"usingComponents": {
"painter":"/miniprogram_npm/mp-painter/index"
}
2.2 引入二维码库
我们需要使用一个专门的库来生成二维码。这里我们使用名为qrcodejs的库，可以在Github上找到它。将下载好的qrcode.min.js放在你的项目中。
3. 开始制作二维码
3.1 准备图像资源
在Painter里面绘制的二维码实际上是由图像形成的，因此我们需要准备好图像资源（二维码image、logo image）。
3.2 绘制二维码image并保存
我们可以通过qrcode这个库，将二维码绘制为image，并将其保存下来。下面是一个简单的例子：
//引入qrcode库
import QrCode from '../../utils/qrcode.js'
//在onLoad函数中
onLoad: function() {
let qrcode = new QrCode({
text: 'https://www.xxx.com',//二维码里面的内容
canvasId: 'qrcodeCanvas',//canvas组件的id
width: 200,//画布宽度
height: 200,//画布高度
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QrCode.CorrectLevel.H,
});
let that = this;
if (qrcode) {
let ctx = wx.createCanvasContext("qrcodeCanvas");
ctx.drawImage(qrcode, 0, 0, 200, 200);
ctx.draw(true, function() {
wx.canvasToTempFilePath({
canvasId: "qrcodeCanvas",
x: 0,
y: 0,
width: 200,
height: 200,
success: function(res) {
console.log("tempFilePath", res.tempFilePath);
//将绘制好的二维码图像保存下来
that.setData({
qrcodeImage: res.tempFilePath
});
},
fail: function(err) {
console.log(err);
}
}, that);
});
}
}
在上面的代码中，我们在onLoad函数中使用了qrcode库生成了一个二维码image，并将其绘制并保存下来。将这个image放到canvas中即可显示出来。
3.3 添加Logo image
在二维码中添加Logo图片可以提高二维码的辨识度，这个也非常简单。首先，我们要添加一张Logo图片。
在WXML中我们可以添加一个图片组件：
<image class="qrcode-logo" src="{{logoImage}}"/>
在对应的JS文件中，我们同样需要在onLoad函数中绘制Logo，将生成的image保存下来。
//绘制Logo
const logoUrl = '../../images/logo.png';
wx.getImageInfo({
src: logoUrl,
success: res => {
let ctx = wx.createCanvasContext("qrcodeCanvas");
ctx.save();//保存当前的绘制环境
ctx.beginPath();
//绘制边框
ctx.arc(100, 100, 16, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
//裁剪一下内部图片
ctx.clip();
ctx.drawImage(res.path, 84, 84, 32, 32);//画出来Logo图片
ctx.restore();//恢复之前的绘制环境
ctx.draw(true, function() {
wx.canvasToTempFilePath({
canvasId: "qrcodeCanvas",
x: 0,
y: 0,
width: 200,
height: 200,
success: function(res) {
console.log("tempFilePath", res.tempFilePath);
//将绘制好的二维码图像保存下来
that.setData({
qrcodeImage: res.tempFilePath
});
},
fail: function(err) {
console.log(err);
}
}, that);
});
},
fail: function() {
console.log("Load logo file failed!");
}
});
3.4 使用Painter插件
Painter插件是一个解决微信小程序canvas开发复杂性的高级渲染插件。它可以让开发者使用传统CSS和JS开发Web应用程序的方式，即可在小程序中开发canvas应用。在使用Painter时，我们可以使用插件的API和组件，编写JSON结构代码，Painter会按照JSON配置信息渲染出画布内要显示的内容。具体细节请参考Painter官方文档。下面是使用Painter插件的例子：
首先，在WXML中添加Painter组件：
<view class="qrcodePainter">
<painter style="width:414px;height:689px;" custom="{{ PainterCustom }}" />
</view>
接着，在JS文件中配置PainterCustom：
let custom = {
width: 414,
height: 689,
views: [{
type: 'image',
url: qrcodeImage,
top: 0,
left: 57,
width: 300,
height: 300,
},
{
type: 'image',
url: logoImage,
top: 182,
left: 130,
width: 50,
height: 50,
}]
};
this.setData({
PainterCustom: custom
})
在PainterCustom中我们指定了绘制的宽度、高度、绘制顺序、位置等信息。这样，我们就可以使用Painter插件，通过JSON配置信息来渲染出我们的画布。
4. 总结
本文通过手把手教你的方式，详细介绍了在微信小程序中使用canvas+Painter插件制作二维码的具体步骤，包括了准备工作、绘制二维码image并保存、添加Logo image、使用Painter插件等注意点和细节，希望能对小程序开发者们有所帮助。