uni-app中如何使用Lottie动画 uni-app引入lottie-web教程-uni-app-PHP中文网

lottie-web仅在H5端可用，因小程序和App端无DOM；H5需用uni.getSystemInfoSync().platform==='h5'判断、svg渲染器及绝对路径JSON；小程序须用lottie-wx；App端只能用uni-lottie原生插件。

uni-app中如何使用lottie动画 uni-app引入lottie-web教程

直接在 uni-app 里 npm install lottie-web 并调用 lottie.loadAnimation()，90% 的情况会白屏或报 document is not defined——这不是你代码写错了，是运行环境根本不支持。

为什么 lottie-web 在非 H5 端一定失败

lottie-web 严重依赖 document、Canvas 和 DOM 操作，而 uni-app 的小程序（微信/支付宝等）和 App 端（iOS/Android）没有真实 DOM，也没有全局 document 对象。哪怕你在 mounted 或 onLoad 里加了平台判断，只要没彻底隔离执行时机和上下文，就可能在真机调试时崩溃或静默失败。

常见错误现象包括：

微信开发者工具里动画不显示，控制台无报错但 canvas 区域为空
App 端启动即闪退，日志出现 ReferenceError: document is not defined
H5 端本地预览正常，但真机访问白屏（因某些安卓 WebView 禁用了 document 访问）

只在 H5 端安全使用 lottie-web 的实操要点

如果你确实只需要 H5 支持，且能接受其他端降级（比如用静态图代替），那可以条件引入。关键不是“装了就能用”，而是“在哪用、怎么用、用什么 renderer”。

必须用 uni.getSystemInfoSync().platform === 'h5' 做硬性判断，不能只靠 process.env.UNI_PLATFORM（构建时静态值，无法反映运行时环境）
容器元素必须用，不能用 —— lottie-web 不识别 Vue/uni-app 的自定义组件
推荐 renderer 设为 'svg'，比 'canvas' 更稳定；避免用 'html'，它对 DOM 结构要求高且移动端兼容差
JSON 文件路径必须是绝对路径（如 /static/loading.json），不能用相对路径或 import 方式（import data from '@/static/loading.json' 在 H5 端可能因 webpack 配置导致路径解析失败）

示例片段（仅 H5 执行）：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

if (uni.getSystemInfoSync().platform === 'h5') {
  const animation = lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/static/loading.json'
  })
}

小程序端必须换 lottie-wx 或 lottie-miniprogram

微信小程序不能跑 lottie-web，官方推荐方案是 lottie-wx（由微信团队维护），它把 JSON 编译成 WXML + WXSS，不依赖 Canvas，性能稳、兼容好。

安装：npm install lottie-wx --save，然后在微信开发者工具中「构建 npm」并勾选「使用 npm 模块」
JSON 文件不能放 static/ 下——必须放在 lottie/ 目录（与 components/lottie-wx/ 同级），例如：/lottie/loading.json
组件写法必须带 animation-path 属性，值是相对于 app.js 的路径，如：animation-path="/lottie/loading.json"
别手动频繁调 this.$refs.lottie.play()，lottie-wx 内部已做节流，外部高频触发会导致卡顿甚至渲染错乱

App 端只能用 uni-lottie 原生插件

App 端（iOS/Android）既没有 DOM，也没有小程序的 WXML 渲染层，lottie-web 和 lottie-wx 全部失效。唯一可行路径是 DCloud 官方维护的 uni-lottie 插件，它通过原生 SDK 渲染动画。

安装：npm install uni-lottie --save，然后在 manifest.json → App 模块配置 中勾选「Lottie 动画」
JSON 必须放在 nativeResources/lottie/ 目录下（不是 static），否则打包后找不到文件
动画不动？先检查 JSON 是否含 assets 字段引用了外部图片——uni-lottie 不支持外链，所有图片必须转成 base64 内嵌或一并放进 nativeResources
慎用 loop="true"：长动画+无限循环在低端 Android 机器上极易触发 OOM，建议设为 loop="2" 或监听 animationEnd 事件手动重播