lottie-web在非H5端必然失败，因依赖document和Canvas API；H5端需条件引入，小程序端用lottie-miniprogram或lottie-wx，App端必须用uni-lottie原生插件。
uni-app 里直接用 lottie-web 加载 JSON 动画，在非 H5 端（小程序、App）必然失败，不是配置问题，是环境根本不支持——document 和 Canvas API 在这些端不存在。必须按端选对方案：H5 用 lottie-web（需条件引入），微信小程序用 lottie-miniprogram 或 lottie-wx，App 端必须用 uni-lottie 原生插件。
为什么 lottie-web 在小程序和 App 端会白屏或报错
根本原因是 lottie-web 初始化时依赖 document.getElementById 和原生 Canvas 上下文，而小程序渲染层是 WXML+WXSS，App 端走的是 WebView 或原生容器，没有 DOM 概念。哪怕你把 animationData 正确 require 进来，lottie.loadAnimation() 一执行就会卡在 container 获取阶段，报 document is not defined 或静默白屏。
- 错误现象：真机调试时页面空白，控制台无报错但动画不出现；或直接抛出
ReferenceError: document is not defined - 常见误操作：在
onLoad或mounted中无平台判断直接调用lottie.loadAnimation - 别碰
@lottiefiles/lottie-interactivity——它只是lottie-web的封装，底层一样挂
微信小程序端必须用 lottie-miniprogram 或 lottie-wx
lottie-miniprogram 是目前最轻量、兼容性最好的方案，它把 JSON 解析逻辑跑在小程序 JS 引擎里，渲染交给小程序 canvas 2D 上下文；lottie-wx 则更进一步，把 JSON 编译成 WXML/WXSS，完全避开 Canvas 性能瓶颈。
- 安装：
npm install lottie-miniprogram --save，然后在微信开发者工具中勾选「使用 npm 模块」并构建 - JSON 文件不能放
static/下直接require——得转成 JS 模块：module.exports = {...}，后缀改为.js，比如/static/animations/loading.js - 模板里必须写
<canvas id="lottieCanvas" type="2d"></canvas>，type="2d"不可省，否则获取不到上下文 - 初始化要等
canvas节点就绪：uni.createSelectorQuery().in(this).select('#lottieCanvas').node()，再调lottie.setup(canvas)
App 端只能靠 uni-lottie 原生插件
App 端既没有 DOM，也没有小程序的 canvas 2d API，lottie-web 和 lottie-miniprogram 全部失效。唯一可靠路径是 DCloud 官方维护的 uni-lottie 插件，它把 Lottie 渲染逻辑下沉到 iOS/Android 原生层。
- 安装：
npm install uni-lottie --save，然后去uni_modules/uni-lottie/chunks目录下确认 JSON 是否被正确打包进 nativeResources - 组件写法：
<uni-lottie src="./anim.json" auto-play="true"></uni-lottie>，注意src是相对路径，不能带static/前缀 - JSON 里如果有
assets字段引用了外部图片，必须全部转为 base64 内嵌，uni-lottie不支持外链资源加载 - 性能关键：把 JSON 里的
"fr": 60改成"fr": 30，删掉隐藏图层，否则低端 Android 设备容易 OOM 或冷启动卡顿
H5 端可以跑 lottie-web，但得加平台隔离
H5 端是唯一能原生跑 lottie-web 的环境，但必须严格判断平台，否则编译到其他端会因引用未定义变量而报错。
- 判断方式用
uni.getSystemInfoSync().platform === 'h5'，不要用process.env.UNI_PLATFORM（构建时静态替换，运行时不可靠） - 引入方式要动态：
const lottie = uni.getSystemInfoSync().platform === 'h5' ? require('lottie-web') : null - 容器不能用
view+id，得用真实 DOM：<div id="lottie-h5" class="lottie-container"></div>，且确保该节点在mounted时已挂载 - 别在
onLoad里初始化——H5 端生命周期不同，要用onMounted或nextTick确保 DOM 就绪
最易被忽略的一点：所有端的 JSON 文件都不能含远程图片引用，也不能依赖表达式或 AE 特效插件导出的高级特性；Lottie 在移动端的容错率远低于 Web，一个没处理好的 assets 字段或一个 60fps 的长循环，就可能让整个 App 启动变慢甚至闪退。
