uni-app中Lottie动画需分端实现：H5用lottie-web（需条件引入），小程序用lottie-wx（JSON放lottie目录，组件带animation-path），App端用uni-lottie原生插件（JSON放nativeResources）；统一通过UNI_PLATFORM判断平台并封装LottiePlayer组件。
uni-app 里直接用 lottie-web 渲染 JSON 动画行不通
因为 lottie-web 依赖 DOM 和 Canvas API，而 uni-app 的非 H5 平台（如小程序、App）不支持原生 DOM 操作。H5 端虽能跑，但真机调试时容易白屏或报 document is not defined 错误。
实操建议：
- 只在 H5 平台条件引入
lottie-web，其他平台降级为静态图或使用原生组件 - 避免在
onLoad或mounted中无判断直接调用Lottie.loadAnimation - 小程序端必须走
lottie-miniapp或平台原生封装方案（如微信的lottie-wx）
微信小程序中用 lottie-wx 渲染动画的正确姿势
这是目前最稳妥的微信小程序方案，它把 Lottie JSON 编译成 WXML + WXSS + JS，不依赖 Canvas，兼容性好、性能稳。
实操建议：
- 通过 npm 安装：
npm install lottie-wx --save，再构建 npm（开发者工具里勾选“使用 npm 模块”） - JSON 文件不能放
static目录下——要放在components/lottie-wx同级的lottie文件夹，并确保路径在json配置中声明 - 组件写法必须带
animation-path属性，值是相对app.js的路径，比如：animation-path="/lottie/loading.json" - 别手动改
lottie-wx组件里的setData调用，它内部已做节流，外部频繁触发play会卡顿
App 端（iOS/Android）用 uni-app 原生插件加载 Lottie
App 端没有 Web 渲染层，lottie-web 或 lottie-wx 全部失效。必须用 DCloud 官方或社区维护的原生插件，比如 uni-lottie。
实操建议：
- 插件市场搜索 “lottie”，安装支持 App 的版本（注意看描述是否含 “iOS/Android”、“nvue”）
- JSON 必须打包进
nativeResources目录，路径写法是/_www/lottie/loading.json，不是/static/xxx - 安卓低端机上动画帧率可能掉到 15fps，建议导出 JSON 时在 Lottie 官网用
Player Settings → Reduce FPS降到 30 或 24 - 不要在
v-for里循环多个uni-lottie组件——内存暴涨，页面直接卡死
uni-app 多端统一写法怎么组织资源和逻辑
真正的难点不在某个平台能不能跑，而在如何让同一套代码自动适配三端，又不埋雷。
实操建议：
- 用
process.env.UNI_PLATFORM做平台判断，而不是uni.getSystemInfoSync().platform（后者在编译期不可知） - JSON 动画文件按平台分目录存放：
static/lottie/h5/、static/lottie/mp-weixin/、nativeResources/lottie/ - 封装一个
LottiePlayer组件，在内部根据平台动态import不同实现，对外只暴露src、autoplay、loop等一致 props - 别忘了加 loading fallback：所有平台都该有
v-if="!loaded"的占位图，否则 JSON 加载失败时页面留白
跨端动画最麻烦的从来不是 JSON 本身，而是路径、生命周期钩子时机、资源加载完成回调这三者的错位——哪怕多一个空格、少一次 nextTick，都可能让动画在某个平台静默失败。
