1、通過npm安裝Lottie庫
npm install --save lottie-miniprogram
2、npm?構(gòu)建
1）npm init
2）微信開發(fā)者工具中?點擊? 工具一>構(gòu)建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方法調(diào)用
? ? ?注：json路徑為小程序合法域名下服務(wù)器上的文件，可將文件夾整體扔到服務(wù)器上
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、效果展示文章來源：http://www.zghlxwxcb.cn/news/detail-758223.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-758223.html
到了這里，關(guān)于微信小程序使用lottie動圖插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
