微信小程序使用lottie动画（lottie-miniprogram）

注意，想要在小程序中使用lottie动画，需要引入lottie-miniprogram组件，注意主包大小（咱就是主包过大了，c）！！！

话不多比，直接开始！

第一步：使用npm引入lottie-miniprogram。

              去项目根目录cmd进命令行，输入神秘口令：

npm install --save lottie-miniprogram

第二步：引入完成以后，执行构建代码：

npm init

        敲回车以后，会出现许多待填项，直接全部回车就行了，因为

第三步：打开微信开发者工具，在左上角的    工具  - >   选择构建npm,再等个一两秒后会提示构建成功！

第四步：使用：

        1、首先你需要一个可以给你生成Lottie动画资源的ui，一般是使用ae做的，没有就只能自己做或者去"Alipay Design"去找了。

        2、在代码中使用

<canvas id="c0" type="2d" style="width: 100%; height: 100%;"></canvas>
 
 
 
import lottie from 'lottie-miniprogram'//引入lottie npm包
Page({
  data: {
   
  },
  onLoad() {
 const windowWidth = systemInfo.screenWidth; // 窗口宽度
    const windowHeight = systemInfo.screenHeight; // 窗口高度
    wx.createSelectorQuery().select('#c0').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.width = windowWidth //设置宽高，也可以放到wxml中的canvas标签的style中
      canvas.hight = windowHeight 
      lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象
 
      lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂
        loop: true,//是否循环播放（选填）
        autoplay: true,//是否自动播放（选填）
        path:'https://cdn.你的域名.com/aaa.json',//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
        rendererSettings:{
          context//es6语法：等同于context:context（必填）
        }       
      })
    }).exec()
  }
})

        注意：我举得例子是将lottie动画资源放到服务器上的例子，如果你没有的话，想放在本地，就是这样：

<canvas id="c0" type="2d" style="width: 100%; height: 100%;"></canvas>
 
 
 
import lottie from 'lottie-miniprogram'//引入lottie npm包
Page({
  data: {
   
  },
  onLoad() {
 const windowWidth = systemInfo.screenWidth; // 窗口宽度
    const windowHeight = systemInfo.screenHeight; // 窗口高度
    wx.createSelectorQuery().select('#c0').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.width = windowWidth //设置宽高，也可以放到wxml中的canvas标签的style中
      canvas.hight = windowHeight 
      lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象
 
      lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂
        loop: true,//是否循环播放（选填）
        autoplay: true,//是否自动播放（选填）
        animationData: require('../json/data.js'),//自己找个路径放置静态资源，然后引入就行，在本地的话需要改成.js文件，并且把文件中的图片路径做修改。
        rendererSettings:{
          context//es6语法：等同于context:context（必填）
        }       
      })
    }).exec()
  }
})

然后就算是完成了。

坑：

本地存放资源的话，首先你要改成.js文件，第二你还要在文件最开头添加

module.exports =原来的代码

第三：如果json文件中有图片的话，需要修改图片路径。这就要结合你的实际路径了。

坑2：一定一定一定一定一定一定要记得销毁，释放内存！！！！！！！！！！！

尤其是使用多个动画资源的情况下，要不非常容易崩溃

//如果是在组件中的话
lifetimes: {
    attached() {
      ........
    },
    detached(){
      this.ani.destroy()
    }
  },
 
//如果是在主界面中的话
 
onUnload(){
      this.ani.destroy()
}

我在第二个坑死的老惨了！

结束下班！！！！