【微信小程序】绘制二维码实现及解决canvas层级问题最佳实践

前言

很久没写微信小程序的需求了，今天来活儿要做个二维码扫码相关的需求，本来以为是洒洒水的事情，谁知道也折磨了大半天，今天特此记录一下~
需求：点击按钮，弹出二维码，二维码内容固定为test

源码地址

代码实现

首先我们知道，绘制二维码我们必须依赖第三方库实现。在web端常用是qrcode，而小程序端则使用weapp-qrcode

我们跟着文章来使用一下, 我们来新建代码片段

npm install weapp-qrcode-canvas-2d --save

如果构建失败，则先执行npm init 一路回车后，再执行上述操作

构建npm完成后，我们继续参考示例

// index.html
<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

//index.js
import drawQrcode from 'weapp-qrcode-canvas-2d'

onLoad() {
   
	const query = wx.createSelectorQuery()
	query.select('#myQrcode')
	    .fields({
   
	        node: true,
	        size: true
	    })
	    .exec((res) => {
   
	        var canvas = res[0].node
	
	        // 调用方法drawQrcode生成二维码
	        drawQrcode({
   
	            canvas: canvas,
	            canvasId: 'myQrcode'<