最直接的全局方案是pages.json中globalStyle设navigationStyle: "custom",但需分平台配置:小程序用navigationBarHidden: true,H5和APP均需显式设titleNView: false,否则会出现白条或顶部空隙。

pages.json 里 globalStyle 设置 navigationStyle: "custom" 最直接
这是最省事的全局方案,适用于所有平台(小程序、H5、APP),但效果因平台而异:
微信/支付宝等小程序:原生导航栏消失,页面内容顶到状态栏下;
H5:navigationStyle 在 H5 实际不生效,但配合 titleNView: false 才能真正隐藏框架导航栏;
APP 端:仅设 navigationStyle: "custom" 不够,必须同时加 "titleNView": false,否则可能残留白条或错位。
常见错误是只写 "globalStyle": { "navigationStyle": "custom" } 就以为万事大吉——H5 和 APP 端仍会显示标题区域。
正确写法示例:
{
"globalStyle": {
"navigationStyle": "custom",
"h5": {
"titleNView": false
},
"mp-weixin": {
"navigationBarHidden": true
},
"app-plus": {
"titleNView": false
}
}
}
APP 端必须显式关闭 titleNView,否则白条必现
APP 端(iOS/Android)的导航栏由原生 WebView 容器渲染,navigationBarHidden 字段完全被忽略。真机上看到的“灰色/白色横条”,99% 是 titleNView 没关干净导致的。
titleNView 默认为 true,即使 navigationStyle 设为 "custom",某些 Android 厂商系统(如 MIUI/HyperOS)仍会强行渲染一个空白标题区。
必须在 app-plus 下级配置中明确写 "titleNView": false,不能依赖继承或 globalStyle 的模糊覆盖。
- 不要写成
"titleNView": "false"(字符串 → 静默失效) - 不要漏掉
app-plus包裹,否则 H5 和小程序会误读该配置 - 如果用条件编译(
#ifdef APP-PLUS)动态控制,注意它只影响 JS 层,不影响 pages.json 解析
H5 端靠 titleNView: false + 条件编译隔离
H5 的“顶部导航栏”本质是 uni-app 框架自己画的一块 <div class="uni-page-head">,浏览器地址栏不属于 uni-app 控制范围,别试图隐藏它。
所以 H5 隐藏的关键就一条:"titleNView": false。但它不能放在 globalStyle 顶层,否则会被 APP 或小程序平台误用——比如 APP 端若没单独声明 titleNView,可能 fallback 到默认 true。
推荐写法是平台分治:
"h5": {
"titleNView": false
}
这样既避免干扰其他端,又确保 H5 页面内容从 0px 开始渲染。如果发现页面顶部仍有空隙,大概率是 CSS 里写了 padding-top: 44px 这类硬编码值,得一并清理。
小程序端用 navigationBarHidden: true 更稳,别混用 navigationStyle
微信、支付宝等小程序平台对 navigationBarHidden: true 支持最成熟,设置后顶部区域完全留空(胶囊按钮仍保留,这是微信规范,无法移除)。
但要注意:navigationStyle: "custom" 和 navigationBarHidden: true 不能共存——前者会让后者被忽略,且 navigationStyle 在小程序里还会影响下拉刷新触发区和返回手势行为。
所以小程序全局隐藏,直接走这个路径:
"mp-weixin": {
"navigationBarHidden": true
},
"mp-alipay": {
"navigationBarHidden": true
}
别为了“统一写法”强行在小程序里塞 navigationStyle: "custom",反而引入兼容性风险。
真正难搞的是多端一致的沉浸式体验:APP 要调 plus.navigator.setFullscreen(true),H5 无法控制状态栏,小程序连胶囊都动不了——跨端隐藏从来不是配个字段就能完事,得接受各端能力边界。


















