在模拟器上是不会出现问题的 在真机调试就出现了！




 
  点我预览动画</button>



import lottie from 'lottie-miniprogram'//引入lottie npm包
Page({
  data: {
   
  },
  onLoad() {
    
  },
  onReady() {
    
  },
  click() {//按键点击事件
    wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.weidth = 300//设置宽高，也可以放到wxml中的canvas标签的style中
      canvas.height = 300
      lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象
 
      lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂
        loop: true,//是否循环播放（选填）
        autoplay: true,//是否自动播放（选填）
        path:'https://colacodeapplet.oss-cn-hangzhou.aliyuncs.com/lottie_kv.json',//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
        rendererSettings:{
          context//es6语法：等同于context:context（必填）
        }       
      })
    }).exec()
  }
})