微信小程序使用lottie动图插件

1、通过npm安装Lottie库

npm install --save lottie-miniprogram

2、npm 构建

1）npm init

2）微信开发者工具中 点击  工具一>构建npm

3、js文件里引用

import lottie from 'lottie-miniprogram'

4、wxml文件使用canvas

<t-popup visible="{{pickerShow}}" placement="center" close-on-overlay-click="{{false}}">
  <canvas id="canvas" type="2d"></canvas>
</t-popup>

5、js方法调用

     注：json路径为小程序合法域名下服务器上的文件，可将文件夹整体扔到服务器上

openGif() {
    wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = 750 * dpr
      canvas.height = 400 * dpr
      context.scale(dpr, dpr)
      lottie.setup(canvas)
      lottie.loadAnimation({
        loop: true,
        autoplay: true,
        path:'https://api.xxx.com/img/openGift/data.json',
        rendererSettings:{
          context
        }       
      })
    }).exec()
    setTimeout(() => {
      this.setData({
        pickerShow: false
      })
    }, 2000)
  },

6、效果展示