微信小程序爬坑记录

微信小程序爬坑记录

开发微信小程序近两个月的小白，简单记录一下记忆比较深刻的坑

一 固定定位fixed

scroll-view下不能通过fixed进行固定定位，无法到达页面底部，使用view即可。

二 canvas

业务中需要实现这样一个效果

vantWeapp 中有一个Circle 环形进度条的组件

大家需要注意的是size默认单位为px 而不是rpx 也就是说不可以自适应 需要通过 wx.getSystemInfoSync().windowWidth获取设备宽度后根据当前宽度得出一个系数实现自适应 另外canvas 标签默认宽度300px、高度150px。

三 lottie-miniprogram

这绝对是一个大坑，微信小程序对lottie的兼容性真的很差，真机调试情况下无法获取canvas,会报错,只能通过预览去看效果，这就给调试带来了困难。

但这只是开始，

需要注意的是在组件中获取canvas需要加上in(this) 要不然无法获取到canvas节点

本来以为这样就结束了，但现实很残酷，第一次进入页面渲染正常，但是再次进入页面，动画就不动了，然后去社区发现了很多类似的情况，应该是官方的bug，看到github上有人提出通过destory方法在退出页面时进行销毁就可以解决这个问题，但遗憾的是这个destory方法并未被官方采纳。于是又到处去搬砖（参考:https://developers.weixin.qq.com/community/develop/doc/000c6c7330ce30571a1a4537556c00?highLine=lottie）

略加修改后如下:

let frameFn = function () {};
let rid = 0;
let canvasDom = null;

 wx.createSelectorQuery()
      .select("#canvas")
      .node((res) => {
        const canvas = res.node;
        const requestAnimationFrame