微信小程序 解决canvas展示二维码层级太高的问题

问题：由于业务需求，将页面下拉的时候，拉到二维码的位置，二维码的展示会悬浮在固定在底部的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.tempFile