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、效果展示文章来源：https://www.toymoban.com/news/detail-758223.html
文章来源地址https://www.toymoban.com/news/detail-758223.html
到了这里，关于微信小程序使用lottie动图插件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
