必须将 manifest.json 中 app-plus 节点的 "autoclose": false 设为 false,并用服务端时间戳控制倒计时,在 uni.hidelaunchscreen 成功后跳转,通过 pages/splash/splash.vue 模拟广告页实现跳过功能。

uni-app App端启动广告页倒计时不是“在启动图上加个数字”,而是禁用原生启动页自动关闭 + 在 Vue 层模拟广告页 + 用服务端时间戳控制倒计时逻辑。直接在 app.vue 里写 setInterval 倒计时,90% 会白屏闪动、跳秒、或跳转失败。
必须改 manifest.json 的 autoclose 配置
App 启动时,原生层先显示 splash.png,然后才加载 JS 环境。默认情况下,uni-app 会在首页渲染完成后自动调用 uni.hideLaunchScreen() —— 这意味着你根本没机会插广告。
-
"autoclose": false是硬性前提,必须加在manifest.json的app-plus节点下 -
"alwaysShowBeforeRender": false防止首页白屏时还卡着启动图 -
"waiting": false关掉自带 loading 动画,让广告自己控显隐 - H5 和小程序平台完全不读这些配置,只对 iOS/Android 生效
倒计时不能写在 app.vue 的 onLaunch 里直接减数字
常见错误是:在 onLaunch 中 let sec = 3; setInterval(() => sec--, 1000)。这会导致:
- App 切后台后定时器被系统暂停,回来时直接跳到 0
- 用户快速切页再返回,多个
setInterval叠加执行 - 倒计时结束时
uni.reLaunch报 “page not found”,因为页面栈还没初始化完
正确做法是用服务端返回的绝对时间戳(如 endTime: 1754439200000),每次刷新前都算:Math.max(0, Math.floor((endTime - Date.now()) / 1000))。
倒计时结束跳转必须用 uni.reLaunch 且等 hideLaunchScreen 成功
启动页不是普通页面,没有路由栈、不走 onLoad、也不能用 uni.navigateTo。
- 必须在
uni.hideLaunchScreen的success回调里执行跳转 - 跳转目标页由本地缓存决定(如
uni.getStorageSync('token')),不能发网络请求 - 要用
uni.reLaunch或uni.redirectTo,uni.navigateTo必报错 - 示例关键逻辑:
onLaunch() {
const endTime = 1754439200000; // 服务端下发的广告结束时间戳
const timer = setTimeout(() => {
uni.hideLaunchScreen({
success: () => {
const token = uni.getStorageSync('token');
const url = token ? '/pages/home/index' : '/pages/login/index';
uni.reLaunch({ url });
}
});
}, Math.max(0, endTime - Date.now()));
}
想加「跳过」按钮?得用 pages/splash/splash.vue 模拟
原生启动图是静态图,无法响应点击。所谓“跳过”,其实是原生图消失后,立刻展示一个全屏 Vue 页面(pages/splash/splash.vue),并在该页面内实现倒计时和按钮逻辑。
- 这个页面要设为
pages.json中第一个页面,navigationStyle: "custom" - 样式必须用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;,不能依赖uni.getSystemInfo算高 - 跳过按钮的
@click要加catchtouchmove阻止穿透,否则 iOS 上滑动可能露出底色 - 所有跳转前必须先调
uni.hideLoading()和uni.hideToast(),否则遮罩残留导致黑屏
真正容易被忽略的是:倒计时的锚点时间必须来自服务端,且每次 UI 更新都要重算差值;而「跳过」功能本质上不是改启动页,而是用一个伪启动页接管过渡期。 本地时间不可信,生命周期不可控,这两点不处理,倒计时就只是看着能跑。











