uni-app中直接使用lottie-web会白屏，因其依赖DOM操作，而App端和小程序端无document对象；推荐使用uni-lottie等适配包，并注意JSON路径、资源内嵌、帧率优化及端差异处理。
uni-app里直接用lottie-web会白屏？原因和绕过方案
uni-app默认不支持lottie-web的dom操作，尤其在app端和小程序端，lottie.loadanimation()一调就报document is not defined或直接空白。这不是你json写错了，是运行环境根本没document。
实操建议：
- 别在
onLoad里直接调lottie.loadAnimation()，App端和微信小程序都会挂 - 改用
@lottiefiles/lottie-interactivity也不行——它底层还是依赖lottie-web - 真正能跑通的只有
lottie-miniapp（专为小程序优化）或uni-lottie这类封装好的uni-app适配包 - 如果必须用原生
lottie-web，只限H5端，且得用uni.getSystemInfoSync().platform === 'h5'做环境隔离
uni-lottie怎么装、怎么配、怎么动起来
uni-lottie是目前最稳的uni-app Lottie方案，内部自动处理了多端差异，App、微信、支付宝、H5全通。但它不是npm install完就能用——路径和资源加载方式很关键。
实操建议：
- 安装：
npm install uni-lottie --save（注意不是lottie-web） - JSON文件不能放
static目录下直接引用，得放uni_modules/uni-lottie/chunks或通过require引入，否则App端读不到 - 模板里写：
<uni-lottie src="./anim.json" auto-play="true"></uni-lottie>，其中src必须是相对路径，且不能带static/前缀 - 如果动画不动，检查
anim.json是否含assets字段引用了外部图片——uni-lottie不支持外链图片，所有图片得转成base64内嵌或一并打包进static
JSON动画在App端卡顿、内存飙升？这是资源没压缩
Lottie JSON本身不大，但一旦包含大量图层、表达式或高帧率（比如60fps），App端渲染压力会陡增，表现为掉帧、闪退、冷启动变慢。这不是uni-app的问题，是Android/iOS WebView对Canvas频繁重绘的容忍度低。
实操建议：
- 用
LottieFiles网站导出时勾选Optimize for mobile，或者本地用lottie-apiCLI跑一次压缩：npx lottie-api optimize anim.json -o anim-min.json - 把帧率从60降到30：打开JSON，找到
fr字段，改成"fr": 30，多数动画感知不到差别 - 删掉无用图层：用
Ae关掉所有hidden图层再导出，JSON体积常能砍掉40%+ - App端慎用
loop="true"，长动画+无限循环极易OOM；改用loop="2"或监听animationEnd事件手动重播
微信小程序里Lottie显示模糊？别碰scale和width硬设
小程序Canvas有固定DPR逻辑，如果在uni-lottie组件上直接写style="width: 200rpx; height: 200rpx;"，动画会拉伸失真，尤其文字和细线。这不是缩放问题，是Canvas像素对齐没对上。
实操建议：
- 删掉所有
width/height内联样式，让uni-lottie按JSON原始宽高自动适配 - 需要缩放？改用
scale属性：<uni-lottie scale="0.8"></uni-lottie>，它会走transform而非Canvas resize - 如果还是糊，检查JSON里的
nm（合成名）是否含中文或特殊字符——部分旧版uni-lottie解析会出错，导致画布初始化异常 - 真要精细控制尺寸，用
canvas-id配合uni.createCanvasContext手动画，但这就脱离Lottie本意了，慎选
最麻烦的从来不是“怎么播”，而是“在哪播不崩”。JSON文件看着一样，放到App里就卡，扔小程序里就糊，本质是各端Canvas实现差了一截。别信“一套代码全端跑”，Lottie这种重度依赖渲染链路的功能，永远得按端抠参数。
