本文主要是介绍微信小程序使用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、效果展示
这篇关于微信小程序使用lottie动图插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
