微信小程序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显示。下面是具体实现代码