【解决办法】微信小程序不能使用requestAnimationFrame

微信小程序不能使用requestAnimationFrame

前言：小程序不支持requestAnimationFrame的又想使用它的持续调用特性，避免使用setInterval/setTimeout

问题： 在某些机型上 uni中的嵌套子组件v-if="step===1" step由0改变为1,此时watch中监听到了，但是不会触发dom不会发生改变。（有遇到过相同问题的可以私信我，感谢！）定时器关掉之后可以正常调用到，怀疑是否发生了阻塞？所以想到使用requestAnimationFrame来解决这个问题。

方法：通过使用canvas来调用canvas中的requestAnimationFrame

1 在需要使用的页面中加入以下代码

<canvas type="2d" id="canvas" style="width: 0; height: 0;pointer-events: none;"></canvas>

2 在js中简单的示例（已删除其它无关代码）

// 初始化
public async initScene() {
  this.initCanvas()
  // 之前的实现代码
  // setInterval(this.AnimationFrameHandler.bind(this), 30);
}
// 初始化
public initCanvas() {
   wx.createSelectorQuery()
      .select('#canvas')
      .fields({
         node: true,
      })
      .exec(this.initCanvasAni.bind(this))
}
// 在requestAnimationFrame回调中，挂载自已的函数
public initCanvasAni(res: any) {
   if (this.canvas) return
   this.canvas = res[0].node
   const ctx = this.canvas.getContext('2d')
   const renderLoop = () => {
       // 您需要持续在后台调用的函数
      this.AnimationFrameHandler()
      this.canvas.requestAnimationFrame(renderLoop)
   }
   this.canvas.requestAnimationFrame(renderLoop)
}