1.npm i lottiejs-miniapp
2.页面上引入代码
<template>
<view class="">
<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" class="lottiejs-canvas" type="2d"></canvas>
</view>
</template>
<script>
import * as lottie from 'lottiejs-miniapp'
export default {
data() {
return {
}
},
onReady() {
wx.createSelectorQuery().select('#lottiejs-canvas').fields({
node: true,
size: true
}).exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);
lottie.setup(canvas);
lottie.loadAnimation({
loop: true,
autoplay: true,
//animationData: animationData,
path: 'https://mp.aixiangsu.com/test/tu.json',//此处应该是线上的json文件 当前已经不能使用了
// path: 'https://www.lottiejs.com/wp-content/uploads/2022/01/83351-taking-the-duggy-out.json',
rendererSettings: {
context: ctx,
},
});
});
},
mounted() {
},
methods: {}
}
</script>
<style>
.lottiejs-canvas{
width: 100%;
height: 300px;
}
</style>