uni-app中lottie需分平台适配：H5用lottie-web（document存在），小程序用lottie-wx，App用uni-lottie；JSON须base64内嵌图片、控制体积＜500KB、按DPR设置canvas宽高，否则白屏或崩溃。
uni-app里直接用lottie-web会白屏或报document is not defined
这不是你代码写错了，是运行环境根本不支持。lottie-web 依赖 document、canvas 和完整 dom api，而 uni-app 的小程序（微信/支付宝）和 app 端（ios/android）没有真实 dom，也没有全局 document 对象。哪怕你在 onload 或 mounted 里加了判断，只要没彻底隔离执行时机和上下文，真机调试就可能静默失败或闪退。
常见现象包括：
- 微信开发者工具里 canvas 区域为空，控制台无报错
- App 启动即崩溃，日志出现
ReferenceError: document is not defined - H5 本地预览正常，但安卓 WebView 真机访问白屏（因部分系统禁用
document访问）
三端必须分路径：H5 用 lottie-web，小程序用 lottie-wx，App 用 uni-lottie
没有“一套代码通吃”的捷径，只有按平台选对库、放对路径、配对参数。
-
H5 端：必须用
uni.getSystemInfoSync().platform === 'h5'做硬性运行时判断；容器必须是<div id="lottie-container"></div>（不能用<view>）；renderer推荐'svg'，path必须是绝对路径（如/static/lottie/loading.json） -
微信小程序：npm 安装
lottie-wx，JSON 文件得放在/lottie/loading.json（不是/static/），组件写法为<lottie-wx animation-path="/lottie/loading.json"></lottie-wx> -
App 端：必须用 DCloud 插件市场里的
uni-lottie（确认描述含 “iOS/Android”、“nvue”）；JSON 文件要放进nativeResources/lottie/loading.json，路径写成/_www/lottie/loading.json
JSON 文件里带外链图片会导致动画空白
很多设计师导出的 JSON 里有 assets 字段，比如 "p": "images/img_0.png"——uni-lottie 和 lottie-wx 都不支持运行时加载远程或相对路径图片，会直接静默失败。
- 导出时务必在 Bodymovin 或 LottieFiles 上勾选
Include images as base64 - 如果已有带外链的 JSON，可用命令行工具内嵌：
npx lottie-api embed anim.json -o anim-embedded.json - 确认最终 JSON 体积：单文件超过 500KB 容易触发小程序包体积警告，或 App 启动卡顿
Canvas 渲染模糊？必须手动处理 DPR 缩放
在小程序或 App 里用 uni-lottie 或 lottie-miniprogram，如果只写 style="width: 200rpx; height: 200rpx;"，动画会模糊、文字锯齿、细线断裂——因为 Canvas 绘制分辨率（DPR）和 CSS 渲染分辨率是分离的。
- 必须显式设置 canvas 宽高属性（非 style），并按设备 DPR 缩放，例如：
canvas.width = 200 * window.devicePixelRatio -
uni-lottie内部已做适配，但需确保你没覆盖其 canvas 初始化逻辑 - 安卓低端机帧率可能掉到 15fps，可在 Lottie 导出时用 Player Settings → Reduce FPS 降到 24 或 30
真正难的不是让某一个平台跑起来，而是 JSON 资源目录结构、base64 内嵌、DPR 处理、插件路径写法这四点，任意一个漏掉，都会在某个平台悄无声息地失效。
