请注意，本文编写于 395 天前，最后修改于 395 天前，其中某些信息可能已经过时。
源码地址
https://github.com/ymzcode/taro-lottie-animation
演示（真机预览，非调试模式）
https://www.douyin.com/user/self?modal_id=7212990412485578039
介绍
整个项目是Taro的一个vue3默认模板，封装了一个简单即用的lottie组件。组件在components，只需要复制src/components/lottie-animation/中的文件。
只实现了h5和微信小程序，微信小程序依赖lottie-miniprogram，h5依赖lottie-web，可根据需要调整。
使用
| 参数 | 说明 | 默认值 |
|---|---|---|
| domId | 用于生产动画dom节点，需确保唯一不可重复！ | 无 |
| path | 动画jso文件的网络地址 | 无 |
| width | 容器的宽，数字类型单位px，组件会使用pxTransform进行转化 | 300 |
| height | 容器的高，同上 | 300 |
| weWidth | 指定后只影响微信canvas的宽，width失效 | 无 |
| weHeight | 指定后只影响微信canvas的高，height失效 | 无 |
| loop | 动画是否循环 | false |
| autoplay | 动画是否自动播放 | false |
| request | 只影响微信，原理是使用request请求path网络地址，拿到json数据使用animationData加载动画 | false |
| animationData | 使用本地数据加载动画（避免配置微信小程序的安全域名） | 无 |
| stopDefaultInit | 是否阻止默认的初始化调用（详见lottie4的演示） | false |
补充说明
- 程序利用taro的【统一接口的多端文件】这一特性实现。
- h5渲染方式为svg，微信渲染方式为canvas
- 因为组件依赖lottie-web和lottie-miniprogram，强烈建议先阅读lottie-web的文档，以便理解和继续更改本组件
- 最后，本组件用来提供一个思路，之前遇到一些使用问题一一解决之后，弄出来一个小组件，欢迎再自行修改。
问题
以下问题主要针对微信小程序
问题1：微信小程序开发工具可以正常显示加载，但手机预览不能正常显示，打开调试后又能正常显示并且控制台没有报错
- 需要检查path的域名是否配置到微信后台合法域名中
问题2: 页面卡顿
这个问题本人暂时还没有遇到，想到的可能原因如下：
- 需要检查动画的销毁是否正确执行，避免累加动画。
- 需要避免同一时间使用过多的canvas，或者过大的lottie文件。
- 如需使用应考虑改为gif或者使用其他方式。
1 条评论
你写得非常清晰明了，让我很容易理解你的观点。