lottie-web在非h5端必然失败，因依赖document和canvas api，而小程序和app端无dom；h5端可用但须平台判断，小程序用lottie-miniprogram，app端必须用uni-lottie原生插件。
直接用 lottie-web 在非 H5 端（小程序、App）必然失败，不是你 JSON 有问题，是环境根本没有 document 和原生 Canvas API。
为什么 lottie-web 在小程序和 App 里会白屏或报错
它初始化时就调 document.getElementById、依赖全局 window，而小程序运行在 WXML 渲染层，App 端走的是 WebView 或原生容器，压根没 DOM。哪怕你把 JSON require 进来了，lottie.loadAnimation() 一执行就卡死或抛 ReferenceError: document is not defined。
常见误操作包括：
- 在
onLoad或mounted里无平台判断直接调用lottie.loadAnimation() - 试图用
@lottiefiles/lottie-interactivity—— 它底层还是lottie-web，一样挂 - 把 JSON 放
static/下用相对路径引用，指望它自动加载（App 端根本读不到）
uni-lottie 是 App 端唯一靠谱方案
它把 Lottie 渲染逻辑下沉到 iOS/Android 原生层，绕过 JS 层的 DOM 依赖。安装后必须确认 JSON 被打进 nativeResources 目录，否则白屏。
实操要点：
- 安装：
npm install uni-lottie --save - JSON 必须放在
uni_modules/uni-lottie/chunks/下，不能放static/ - 模板中写：
<uni-lottie src="./anim.json" auto-play="true"></uni-lottie>，src是相对路径，不带static/ - 如果动画不动，先检查 JSON 是否含
assets字段指向外部 PNG ——uni-lottie不支持外链图片，所有图必须 base64 内嵌
微信小程序请用 lottie-miniprogram
它专为小程序 canvas2D 上下文优化，比 lottie-web 轻量且稳定，但要求基础库 ≥ 2.9.0，且必须手动管理 canvas 初始化与 DPR 缩放。
关键步骤：
- 安装：
npm install lottie-miniprogram --save，然后在开发者工具中「构建 npm」 - JSON 不能直接
require，得转成 JS 模块：比如static/animations/loading.js，内容为module.exports = { /* JSON 内容 */ }; - 模板必须写
<canvas id="lottieCanvas" type="2d"></canvas>，type="2d"缺一不可 - 初始化前要用
uni.createSelectorQuery().in(this).select('#lottieCanvas').node()拿 canvas 节点，再传给lottie.setup() - 别只设 CSS 宽高，必须用
canvas.width/canvas.height乘以pixelRatio，再调ctx.scale(dpr, dpr)，否则模糊、锯齿
H5 端可保留 lottie-web，但必须加平台判断
只有这一端能跑通原生 lottie-web，其他端强行用就是白屏。别信“加个 try-catch 就行”，环境缺失是硬伤。
安全写法：
- 安装：
npm install lottie-web@5.12.2（新版有兼容问题） - 引入时加判断：
if (uni.getSystemInfoSync().platform === 'h5') { import lottie from 'lottie-web'; } - 容器用
<view id="lottieContainer"></view>，别用canvas标签（H5 用 SVG 渲染更稳） -
renderer: 'svg'比'canvas'兼容性更好，尤其对文字和细线
最常被忽略的点：JSON 里的图片资源。设计师给的文件如果含 "p": "images/img_0.png" 这种外链字段，不管哪个端都会静默失败。必须提前用 npx lottie-api embed anim.json -o anim-embedded.json 把图片转成 base64 塞进去，否则动画永远是空白。
