canvas层级太高问题的解决办法

一、产生原因

因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。

二、解决方案

1.html页面的处理
加上一个判断wx:if=“{{!canvasImg}}”

<canvas
   class="canvas-code"
   canvas-id="QRcode"
   wx:if="{{!canvasImg}}"
   style="width: 240rpx; height: 240rpx;">
</canvas>
<image wx:else src="{{canvasImg}}" style="width: 240rpx; height: 240rpx;" />

2.js页面的处理
（1）data中声明一个变量canvasImg

data(){
  return {
    //canvas转化为图片的临时路径
    canvasImg:"",
  }
},

（2）新增方法：处理canvas转化为图片

// 处理canvas转化为图片
handleCanvarToImg(){
   wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 120,
     height: 120,
     canvasId: 'QRcode',
     success: (res) => {
        //获取图片的临时路径
        this.canvasImg = res.tempFilePath
     }
   });
},

原理：弹框出现时，canvas隐藏，image出现
（1）弹框显示，转化为image，不再进行处理，当前页面之后都以image进行显示（上面展示的是此方法相关代码）。
（2）弹框显示，转化为image，弹框消失，转化为canvas，该方法中需在弹框消失时，将canvasImg赋为null。文章来源地址https://uudwc.com/A/q0Oo3