uni-app启动页由pages.json中list数组首个path决定,H5平台可用homePage显式覆盖;App和小程序需调整list顺序;传参须用uni.getLaunchOptionsSync()在首页onLoad中读取,不可用navigateTo。
uni-app 启动页面怎么改?看 pages.json 里的 "homePage" 配置
uni-app 没有全局统一的“启动页”配置项,实际入口由 pages.json 中第一个 "path" 决定——但你可以用 "homepage" 显式覆盖它。这个字段只在 h5 平台生效(app 和小程序不认),属于 h5 专属优化手段。
常见错误是以为改了 "homePage" 就能跨平台生效,结果 App 还是从 pages.json 第一个页面启动,H5 却跳转两次(先默认页再重定向)。
-
"homePage"必须是已注册的合法页面路径,比如"pages/index/index",不能写成"index"或带后缀的"index.vue" - App 和小程序想换启动页,只能调整
pages.json中"list"数组顺序,把目标页放第一位 - H5 下启用
"homePage"后,URL 会直接定位到该页,但路由守卫(如onLaunch)仍按原逻辑执行,参数不会自动注入
如何给启动页传参?uni.navigateTo 不适用,得靠条件编译 + uni.getLaunchOptionsSync()
App 和小程序冷启动时,参数只能通过分享卡片、通知、scheme 等渠道带入,无法在编译期硬编码。所谓“设置启动参数”,本质是让首页主动读取这些动态上下文。
典型误区:在 main.js 或 App.vue 里调用 uni.navigateTo 跳转并传参——这会导致白屏或路由混乱,因为此时页面栈还没初始化。
- 正确做法是在首页的
onLoad或onShow中调用uni.getLaunchOptionsSync(),它返回对象包含query(小程序)、path(App)、url(H5)等字段 - H5 场景下若需 URL 参数,可用
location.search解析,但要注意uni.getLaunchOptionsSync()在 H5 返回空对象,得加条件编译:#ifdef H5 - App 启动时如果用了自定义 scheme(如
myapp://pages/detail?id=123),需在manifest.json → Android/iOS → Scheme配置,并在首页解析getLaunchOptionsSync().path
自定义编译模式下,uni-app 怎么指定不同环境的启动页?
uni-app 本身不支持“编译模式 → 启动页映射”,所谓自定义模式(如 dev:mp-weixin)只是改了构建目标和变量,不影响 pages.json 结构。真要差异化启动页,只能靠条件编译块手动切页面路径。
容易踩的坑是试图在 pages.json 里写 JS 逻辑或变量,比如 "path": "pages/${env}/index"——JSON 不支持表达式,会直接报错 pages.json parse error。
- 必须用
#ifdef/#ifndef包裹整个页面节点,例如在pages.json的"list"数组中为不同平台写独立条目 - 同一页面不同参数可通过
query区分,比如开发环境首页加载 mock 数据:pages/index/index?env=dev,然后在onLoad里判断 - App 和小程序无法在编译时删减页面,所有
pages.json中声明的页面都会被打包进去,慎用条件编译隐藏页面路径
为什么改了 pages.json 启动页,真机调试还是旧页面?
最常见原因是没清缓存或没重新编译。uni-app 的页面注册信息在构建产物中固化,尤其 App 平台会缓存 pages.json 的解析结果。
另一个隐蔽问题是 HBuilderX 的“运行到手机”功能默认启用“热更新”,它只同步 js/css,不重写 pages.json——导致新页面路径根本没进包。
- App 端务必点击菜单栏
运行 → 清除缓存并重启,或卸载重装 - 小程序开发者工具里,关掉“开启调试基础库”再重新编译,避免旧版本 pageMap 缓存干扰
- 检查
dist/build目录下的pages.json是否已更新,这是最终生效的文件,不是源码目录里的那个 - 如果用了
vue.config.js或自定义 webpack 插件,确认没误删/覆盖pages.json的 copy 步骤
页面路径这种底层配置,改完不生效,八成不是逻辑问题,而是构建缓存没清干净。别反复改配置,先清再试。











