uni-app启动页加「跳过」按钮需在首页onLoad中调用uni.hideSplashScreen()后立即显示全屏遮罩,绑定点击跳转逻辑,并用requestAnimationFrame实现不卡顿倒计时;状态通过uni.getStorageSync在onLaunch读取并全局注入,且仅限app-plus平台生效。

uni-app 启动页怎么加「跳过」按钮
启动页(splash)本身是原生层渲染的,pages.json 里配的 splashscreen 不支持加按钮或交互。所谓“跳过”,实际是在启动页隐藏后、首屏页面加载前,用一个全屏遮罩模拟引导页,并提供跳过逻辑。
关键点:不能在 onLaunch 里直接 show 遮罩,因为此时页面还没 ready;必须等首屏 onLoad 触发后、uni.hideSplashScreen() 完成再处理。
- 在首页
onLoad中调用uni.hideSplashScreen(),并立即uni.showLoading({ mask: true })或自定义遮罩组件 - 遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%覆盖整个视口 - 「跳过」按钮绑定
@click="skip",内部执行uni.switchTab({ url: '/pages/tab1/tab1' })或uni.navigateTo({ url: '/pages/home/home' }) - 别忘了在
onShow或定时器结束后自动跳转,否则用户不点就卡住
uni-app 倒计时跳转怎么写才不卡顿
倒计时如果放在 setInterval 里直接改 data,频繁触发 setData 会导致 iOS 下卡顿甚至白屏。uni-app 的 setData 是异步跨端通信,每秒 10 次更新就是 10 次 JS → Native 调用。
正确做法是只在倒计时结束时更新一次 UI,过程中用 CSS 动画或 canvas 渲染倒计时数字,或者用 requestAnimationFrame 控制节奏。
- 用
let timer = null+clearTimeout(timer)管理倒计时,避免重复启动 - 倒计时变量建议用
ref(Vue 3)或data中单个字段(如countdown: 3),不要绑定复杂对象 - 显示层用
v-if="countdown > 0"控制「跳过」按钮文案,比如跳过 ({{countdown}}) - 注意安卓和 iOS 对
setTimeout最小间隔的差异,低于 16ms 可能被合并,倒计时不准优先用requestAnimationFrame
uni.hideSplashScreen() 调用时机不对会怎样
调用太早(比如 onLaunch 里)会报错 hideSplashScreen:fail splash screen is not showing;调用太晚(比如首页 onReady 之后)会导致启动页卡住不动,用户以为 App 崩了。
官方文档没说清楚,但实测:必须在首页 onLoad 第一行调用,且不能包裹在 setTimeout 或异步回调里。
- 确保
pages.json中"splashscreen": { "alwaysShowBeforeRender": true }已开启(默认 true) - 如果用了自定义原生启动图(iOS LaunchScreen.storyboard / Android drawable),
uni.hideSplashScreen()无效,必须走原生插件或改用 webview 层模拟 - 真机调试时,HBuilderX 的「运行到手机」可能跳过 splash,要打正式包测试
- 部分低端安卓机 hide 后有白屏闪动,可在 hide 前先
uni.showLoading({ mask: true })过渡
App 引导页「跳过」状态怎么持久化
用户点了一次跳过,下次启动不该再出现。但不能只存 localStorage,因为 App 冷启动时 localStorage 还没初始化完,首页可能已经渲染完毕。
可靠方式是用 uni.getStorageSync 在 onLaunch 就读取标记,然后通过全局变量或 Vuex/Pinia 注入首页,控制是否显示遮罩。
- 首次安装后,在跳过逻辑里执行
uni.setStorageSync('guide_skipped', true) -
onLaunch中读取:const skipped = uni.getStorageSync('guide_skipped') === true,存到globalData或 Pinia state - 首页
onLoad先判断getApp().globalData.guideSkipped,为 true 就跳过遮罩逻辑 - 别用
uni.setStorage(异步),冷启动时它还没写完,getStorageSync就读不到
最易忽略的是多端一致性:微信小程序没有 splashscreen,H5 更没有,这个逻辑得用 process.env.UNI_PLATFORM === 'app-plus' 包一层,不然上线后 H5 页面会多出奇怪的跳过按钮。

















