一、开发遇到的问题

使用canvas绘制二维码，当页面滚动的时候，canvas不随着滚动，且层级最高，遮盖页面其他部分

二、原因

由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：

• 组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
• 后插入的原生组件可以覆盖之前的原生组件。
• 原生组件还无法在 scroll-view、swiper、picker-view、movable-view 中使用。
• 部分CSS样式无法应用于原生组件，例如：
• 无法对原生组件设置 CSS 动画
• 无法定义原生组件为 position: fixed
• 不能在父级节点使用 overflow:hidden 来裁剪原生组件的显示区域

三、解决办法：将canvas标签替换为图片

<view class="verify-qrcode-box">
  <!-- canvas -->
  <canvas
    v-show="!canvas2ImgSrc"
    :id="canvasId"
    :canvas-id="canvasId"
    style="width: 100%; height: 100%"
  >
  </canvas>
  <!-- 图片 -->
  <image
    v-show="canvas2ImgSrc"
    mode="aspectFit"
    :src="canvas2ImgSrc"
    style="width: 100%; height: 100%"
  />
</view>

// ======这是你绘制canvas的代码===============================
setTimeout(() => {
  uni.canvasToTempFilePath(
    {
      canvasId: this.canvasId,
      success: (res) => {
        this.canvas2ImgSrc = res.tempFilePath; // 这是生成的图片路径
      },
      fail: (err) => {
        console.error(err, "err");
      },
    },
    this
  );
}, 1000);

这里两个踩坑：

• 第一个是要加延时器，必须要等到canvas绘制完成后才可以调用API转成本地图片，否则绘制不完整。
• 另一个是调用API需要传第二个参数this，参考这位大哥的文档，这里就是因为在组件中使用时，未传参一直报canvasToTempFilePath:fail fail canvas is empty的错误