微信小程序使用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.nodeconst context = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = 750 * dprcanvas.height = 400 * dprcontext.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、效果展示