在uni-app中使用LottieFiles（小程序）

最新推荐文章于 2025-06-19 18:26:26 发布

原创最新推荐文章于 2025-06-19 18:26:26 发布 · 3.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序

本文介绍了如何在微信小程序和uni-app中利用LottieFiles插件加载SVG或网络动画数据，包括安装步骤、代码示例和本地与网络路径的使用。

LottieFiles官网：https://lottiefiles.com/

uni-app中LottieFiles插件：https://ext.dcloud.net.cn/plugin?id=1044

微信小程序中的LottieFiles的插件lottie-miniprogram：https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html

1、安装

按照微信小程序中的方法安装

npm install --save lottie-miniprogram

2、代码：

<template>
	<view>
		<canvas id="canvas" type="2d" style="width: 100px; height: 100px;"></canvas>
	</view>
</template>

<script>
	import lottie from 'lottie-miniprogram'
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
            // 主要差异点：
			// 微信中使用的是wx.createSelectorQuery()
            // uni-app中使用的是uni.createSelectorQuery()

			uni.createSelectorQuery().select('#canvas').node(res => {
		      const canvas = res.node
			  const context = canvas.getContext('2d')
		      lottie.setup(canvas)
			 lottie.loadAnimation({
				rendererSettings: {
				    context,
				},
			  	loop: true,
			  	autoplay: true,
				animationData:require('../../common/dataSVG.json')
			  	// path: 'https://xxxx/dataSVG.json'
			  })
		    }).exec()
		}
	}
</script>

animationData支持本地资源

path （只支持网络地址）