微信小程序canvas与wx:if的出现的问题

• 微信小程序canvas与wx:if的漏洞

问题描述

当使用wx:if="{{showStatus}}"  去切换canvas 的消失与出现时，第一次渲染会成功
当关闭即设置showStatus为false，然后再次设置showStatus为true，会发现canvas 标签出现，但是内容为空

解决方案

1、this.setData({
    showStatus为true
   }) 时，不要立刻执行渲染函数，设置一个定时器，即

setTimeout(this.onDrawCanvasHandler,20)

大于20ms 就可以，但是这种做法不太保险,这个定时器的时候不确定

2、使用 hidden="{{!showStatus}}" 代替 wx:if
3、canvas 使用position，隐藏时，设置top/left/right/bottom 无限远即可

 

• hidden、wx:if的区别

 hidden字面意思上就是隐藏，也就是当条件为true时隐藏内容，false时显示内容；wx:if则刚好相反，当条件为true的时候显示，为false时隐藏。

  除了条件上的区别，还有最重要的一点区别是渲染过程：wx:if是动态局部渲染的，就是说当条件变换的时候，它会将内容块实时销毁或者重新渲染。如果初始条件是false那么它什么都不做，当条件变成true的时候才开始局部渲染；而hidden只是简单控制块的显示和隐藏，一开始它就加载到页面上了。

      wx:if的条件不断变化就会不断的渲染代码块，而hidden则只会在初始加载的时候渲染，那么从性能上来说什么情况下用wx:if什么情况下用hidden就明显了，如果频繁切换条件的情况下，用hidden更好，如果条件不怎么会改变则wx:if更好，这个也是官方建议的。