uni-app怎么做页面启动动画 uni-app启动图加载进度配置技巧

uni-app启动页动画需绕开默认机制，用App.vue接管首屏渲染：关闭自动隐藏、onLaunch后手动hideSplashScreen、v-if+transition实现过渡；进度条应基于关键异步节点而非setTimeout模拟。

uni-app 启动页动画怎么加才不闪屏

直接用 launch_page 配置静态图，根本加不了动画；真要动效，得绕开默认启动页机制，自己接管首屏渲染。核心是：把「原生启动页」当成纯占位图，等 App.vue 加载完、onLaunch 执行后，再用 Vue 组件实现过渡动画。

常见错误是试图在 pages.json 里配 animation 字段——这字段压根不存在，uni-app 不支持配置启动页 CSS 动画。

• 必须关闭原生启动页自动隐藏逻辑：在 manifest.json 的 h5 或 mp-weixin 平台配置中设 "splashscreen": {"autoclose": false}
• 在 App.vue 的 onLaunch 里调用 uni.hideSplashScreen()，但别急着调，先让自定义动画组件 mount 完
• 首屏页面（如 index.vue）用 v-if 控制显隐，配合 transition 做入场动效，避免白屏/黑屏闪一下

uni-app 启动图加载进度怎么显示真实进度

uni-app 没有内置资源加载进度回调，所谓「进度」只能靠模拟或分阶段标记。微信小程序平台能拿到部分资源加载状态，H5 则基本靠预估时间或监听关键节点（比如网络请求返回、字体加载完成）。

容易踩的坑是硬塞一个 setTimeout 递增进度条——用户网速快时卡在 90%，慢时早跳走了，体验反而更差。

• 优先监听关键异步动作：比如 uni.getSystemInfo、uni.checkSession、首页接口 uni.request 成功后，手动更新进度值
• H5 端可监听 document.fonts.ready，解决「文字闪动」问题；小程序端可用 uni.preloadWebview 提前加载后续页，把耗时摊开
• 进度条不要从 0 开始：起步至少设为 20%，避免刚进就动，显得假；结束阈值建议 95% → 100%，留 5% 给 DOM 渲染和样式计算

不同平台下 launch_page 配置差异和兼容性陷阱

launch_page 只在 pages.json 的 h5 和 mp-weixin 下生效，App 端走的是原生 splash 配置（manifest.json 的 splashscreen），完全不认这个字段。

最常被忽略的是尺寸适配：微信要求启动图必须是 750×1334（iPhone X 类机型），而 H5 端你给个 100×100 的图，它会强行拉伸糊掉，还不报错。

• 微信小程序：图片必须放在 static 目录下，路径写成 /static/splash.png，不能用相对路径或变量
• H5 端：launch_page 实际是用 CSS background-image 实现的，所以不支持 webp 格式（部分安卓浏览器不认）
• App 端：iOS 和 Android 的启动图命名、存放位置、尺寸规范完全不同，必须按 nativePlugins 文档分别处理，别指望一套图打天下

为什么 hideSplashScreen 调用后页面还是闪一下

不是 API 没生效，而是 uni.hideSplashScreen() 只关原生层，Vue 实例还没 ready，DOM 还没挂载，导致首屏组件渲染瞬间出现空白或错位——看起来像「闪」。

本质是生命周期没对齐。尤其在使用 uni-app 的 subNVue 或自定义 tabbar 时，这个问题更明显。

• 确保 hideSplashScreen 在 App.vue 的 mounted 钩子之后调用，而不是只依赖 onLaunch
• 如果用了条件编译（如 #ifdef MP-WEIXIN），检查是否漏了 H5 或 APP 分支，导致某平台没调用
• 真要稳，可以在 mounted 里加个 nextTick + setTimeout(0) 双保险，等 Vue 渲染队列清空后再关启动页

启动页动画和进度控制，真正难的不是代码怎么写，而是判断哪一帧该做什么事——什么时候算“加载完成”，取决于你的业务入口在哪、关键资源有哪些、用户实际感知点在哪。这些没法靠配置解决，得一行行看 network 面板、测真机冷启、盯着 loading 条停在哪一秒。