uniapp-小程序引入lottiejs-miniapp

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>