微信小程序canvas组件层级最高问题解决方案

最近产品新提了一个需求，在canvas页面上实现一个弹框。微信小程序文档中有提供cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cover-image，button。不可以使用input组件，这与我的需求不相符合，所以只能另辟蹊径。

下面来看一下原型图：

实现过程中遇到的问题：

解决之后的效果图：

（请忽视这个丑丑的弹框）。

下面重点来了，我来说一下我的解决思路：我在data里定义了一个radarImg，然后wxml中判断，是否这个值是否有效，若有效，canvas隐藏；否则，显示canvas。然后在页面渲染雷达图时，执行了wx.canvasToTempfilepath方法，将雷达图转化为图片。此时给radarImg赋值，canvas隐藏，image显示。下面是具体实现代码：

wxml:

<view class="canvas-content">
   <canvas
      canvas-id="radarCanvas"
      wx:if="{{!radarImg}}"
      style="width: 260px; height: 180px;">
   </canvas>
   <image wx:else src="{{radarImg}}" style="width: 260px; height: 180px;" />
</view>

js:

扫描二维码关注公众号，回复： 3204995 查看本文章

handleCanvarToImg(that) {
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 260,
    height: 180,
    canvasId: 'radarCanvas',
    success: function(res) {
      that.setData({ radarImg: res.tempFilePath});
    }
  });
},

// 在drawRadar之后，调用将canvas转化为图片方法。（是否可以优化？）
await this.drawRadar(titleArr, countArr);
await this.handleCanvarToImg(this);

好了，基本功能是实现了，还有性能优化的空间。希望大家有思路可以一起探讨。