首次打开判断:App启动后立即用uni.getStorageSync('launchFlag')检查标记,需显式判断===true并确保后续调用uni.setStorage存值;引导页需在pages.json中为对应路径配置"navigationStyle":"custom";轮播图须设height且image用mode="aspectFill",数据为空时需初始化默认图片。

怎么判断是不是首次打开?用 uni.getStorageSync 就行
核心就一句话:App 启动后第一件事,不是跳首页,而是查本地有没有存过标记。这个标记通常叫 launchFlag 或 hasLaunched,值为 true 表示已看过引导页。
常见错误是直接在 onLoad 里写逻辑但没处理异步或缓存未命中——uni.getStorageSync 是同步的,但返回 undefined 不等于 false,必须显式判断是否为真值:
-
if (uni.getStorageSync('launchFlag'))→ 安全,推荐 -
if (uni.getStorageSync('launchFlag') === true)→ 更严谨,防字符串误判 -
if (uni.getStorageSync('launchFlag'))但后续没调uni.setStorage→ 第二次仍进引导页,漏存
别用 uni.getStorage(异步),引导页逻辑必须快、确定、无竞态——同步 API 才可控。
引导页怎么去掉顶部导航栏?改 pages.json 的 navigationStyle
引导页要全屏轮播,顶部标题栏会遮挡、破坏沉浸感。这不是 CSS 能藏掉的,得在路由配置层关掉。
关键点在于:必须把引导页路径(比如 pages/index/guide/guide)单独配一个 style 块,并设 "navigationStyle": "custom":
{
"path": "pages/index/guide/guide",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black"
}
}
容易踩的坑:
- 只改了
navigationBarBackgroundColor却没设navigationStyle→ 标题栏还在 - 把
navigationStyle: "custom"写在首页或入口页 → 首页也变无头,不符合预期 - 没配
navigationBarTextStyle→ 某些安卓机状态栏文字看不见(默认白字配白底)
轮播图卡顿、图片不显示?重点看 mode 和 height
轮播图渲染失败,80% 出在容器高度丢失或图片拉伸异常。uni-app 的 <swiper> 不自动撑高,必须给明确 height;<image> 若不设 mode,在不同机型上可能留白、变形或直接不渲染。
实操建议:
- 外层
<swiper>必须设height,例如height: 300rpx或height: 100vh(H5可用) -
<image>推荐mode="aspectFill":等比缩放填满,裁边不拉伸,适配各种图比 - 避免用
mode="widthFix":宽固定、高自适应,但 swiper-item 高度不确定时,图片会塌缩成一条线 - 如果用网络图,加载前加占位色块或骨架图,否则白屏几秒很突兀
轮播数据从接口来,为什么第一次进引导页是空的?
因为 onLoad 触发时,接口还没返回,swiperList 还是空数组,<swiper> 渲染了个寂寞——它不会等数据,也不会报错,就静默空白。
解决思路不是“等接口”,而是“先给默认值 + 数据回来后更新”:
- data 里初始化
swiperList: [{ url: '/static/default-banner.jpg' }],至少保底一张图 - 请求成功后,直接赋值
this.swiperList = res.data,响应式会自动刷新 swiper - 别在请求回调里手动调
this.$forceUpdate(),多余且可能触发重复渲染 - 如果接口慢,考虑加
uni.showLoading,但别在轮播区域里叠加 loading 提示,干扰视觉
最常被忽略的一点:轮播图组件在数据为空时,indicator-dots 仍会显示一个点,但点下没内容——这会让用户以为功能坏了。所以空数据兜底比样式更重要。

















