uni-app状态栏颜色需按平台分别处理:微信小程序需同时传frontColor和backgroundColor;App端需关闭原生导航栏且用style控制文字色;自定义导航栏须CSS模拟;uni-app x仅frontColor有效;H5不支持。

uni-app 里状态栏颜色不是“设一次就全局生效”的东西,不同平台、不同导航栏模式下,控制方式完全不同。直接写 uni.setNavigationBarColor 很可能没反应——不是你代码错,是它根本不在当前场景下起作用。
微信小程序:必须同时传 frontColor 和 backgroundColor
小程序端支持 uni.setNavigationBarColor,但两个参数缺一不可:
-
frontColor控制时间、信号、电量图标的颜色,只能是"#000000"(黑)或"#ffffff"(白) -
backgroundColor控制状态栏背景色,任意十六进制色值都行 - 只传一个,整个调用就静默失败,界面毫无变化
- 必须在
onReady或之后调用;onLoad里调可能因生命周期未就绪而无效
示例:
onReady() {
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#1e40af'
})
}
App 端(iOS/Android):关闭原生导航栏才生效,且 style 参数才管文字颜色
App 端行为最复杂:
-
uni.setNavigationBarColor只影响原生导航栏区域,**不控制状态栏**——除非你在pages.json中关闭了原生导航栏(即启用自定义导航栏) - 若已设
"navigationStyle": "custom",状态栏变透明,此时uni.setNavigationBarColor的backgroundColor完全失效 - 状态栏文字颜色(白/黑)由
style字段控制,但仅 App 端有效,取值只能是"default"或"black" - 这个
style必须配合navigationBarBackgroundColor才能稳定生效,单独设常被忽略 - Android 还需在
AndroidManifest.xml中配置android:windowLightStatusBar="true",否则文字始终白色不可见
自定义导航栏(navigationStyle: "custom"):靠 CSS + statusBarHeight 模拟
一旦启用自定义导航栏,你就接管了整个顶部区域,状态栏颜色得自己“画”出来:
- 不能依赖
uni.setNavigationBarColor设置背景色,它会忽略 - 必须用
uni.getSystemInfoSync().statusBarHeight动态获取高度(iPhone X 是 44px,安卓多为 24–30px),不能写死 - CSS 中要用
position: fixed; top: 0;固定定位,否则滚动时会跟着动 - 记得加
z-index,确保盖在页面内容之上 -
navigationBarTextStyle在 custom 模式下依然有效,用于控制系统图标颜色("white"/"black"),但只对微信小程序和 App 端起作用
pages.json 示例:
{
"path": "pages/home/index",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
}
uni-app x 项目:backgroundColor 恒无效,只认 frontColor
如果你用的是 uni-app x(非传统 Vue 版本),这个 API 行为彻底变了:
-
uni.setNavigationBarColor的backgroundColor参数完全被忽略,状态栏背景恒为透明 - 只有
frontColor能生效,用来改系统图标颜色 - 想填色?只能手动加 view +
statusBarHeight,和 custom 导航栏方案一致 - H5 端该 API 直接不支持,调用无效果也不报错,别浪费时间调试
真正容易被忽略的点是:你以为在改“状态栏”,其实每次都在和平台原生机制博弈。iOS 要关 UIViewControllerBasedStatusBarAppearance,Android 要配权限和 manifest,小程序要双参数齐备,uni-app x 则干脆砍掉一半能力——没有银弹,只有按平台拆解、逐个击破。


















