问题：由于业务需求，将页面下拉的时候，拉到二维码的位置，二维码的展示会悬浮在固定在底部的view之上。因为之前的代码是直接通过canvas展示生成的二维码。
而canvas组件是原生组件，关于层级的问题可以查看小程序的开发文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/native-component.html
解决思路：将画布的内容(即二维码)导出生成图片，并返回文件路径，在前端通过Image展示，并且将画布挪到屏幕之外。（这个办法通过测试之后在模拟器、ios机和大部分安卓机上都没有问题，但是也有坑，有点安卓机最后无法显示二维码，原因会在后文中详述）
代码如下：
因为是在原有的代码基础上修改
js文件：
先在data中，定义一个二维码图片路径：
QRImgUrl: '',//二维码图片路径
添加一个将二维码导出生成图片，并返回文件路径的方法：
saveCanvas() {
wx.canvasToTempFilePath({
canvasId: 'qr-code',
success: (res) => {
console.log(res)
this.setData({
QRImgUrl: res.tempFilePath
})
}
})
},
最后在调用draw之后（即绘制画布的方法），调用saveCanvas：
setTimeout(() => {
this.saveCanvas()
}, 1000);
这里的setTimeout一定要加，因为这就是一个比较奇怪的坑，如果画布没绘制完，图片路径导出来就是空的。经过手头的测试机测试，ios和模拟器在1000ms的情况下都可以显示，部分安卓机3000ms才显示，部分安卓机画了3000ms也显示不出来。。。（所以由于部分安卓机的问题，我最后放弃了这个方法，如果有人也碰到这个问题可以看另一篇文章是如何解决的）
wxml文件：
样式与原画布的样式是一致的，在原画布的样式中加一个position:fixed;right:800rpx(随便往哪里挪，上下左右都可以），挪到屏幕外面就可以了。原来展示canvas的地方就会展示这个Image。
结果：至此，针对层级的问题基本就解决了，image也不会遮挡住固定在底部的view。但是，又冒出了一个新的问题，就是上面所说的有些机器上二维码无法显示（大概settimeout设置的时间足够就可以了，我也没试过，毕竟业务场景里不可能给太多的时间让他画。。），所以又要换个思路，解决这个新的问题。