uni-app如何设置全局背景颜色-uni-app-PHP中文网

全局背景色需 pages.json 控制窗口背景 + app.vue 的 page 选择器控制内容背景：前者影响下拉刷新留白等区域，后者作用于页面 dom 容器；小程序中 tabbar/navigationbar 需单独配置背景色。

uni-app如何设置全局背景颜色

全局背景色在 uni-app 里不能只靠一种方式搞定，不同平台、不同层级（页面窗口 vs 内容区域）生效逻辑完全不同。最稳妥的组合是：pages.json 控制窗口级背景 + App.vue 的 page 选择器控制内容级背景。

这个配置项影响的是整个页面容器的底色，比如下拉刷新时露出的区域、页面滚动到顶部/底部的留白部分。它对 iOS/Android/H5 都有效，但对小程序平台（微信、支付宝等）**仅在非自定义导航栏时部分生效**。

"backgroundColor": "#F8F8F8" 必须写在 globalStyle 或具体页面的 style 节点下，不能单独挂在根对象里
如果启用了 titleNView（原生导航栏），backgroundColor 会失效，此时要改 titleNView.backgroundColor
小程序端该值不控制 <view></view> 内部的背景，只影响窗口层——所以你可能看到“导航栏和 tabbar 之间有一条白缝”，那其实是内容区域没设背景

这是真正让所有页面内容区域统一底色的方式，适用于 H5、App、小程序（需注意 scope 限制）。它作用于每个页面的根 page 元素，相当于给整个页面 DOM 容器加背景。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

必须写在 App.vue 的 <style></style> 块里，且不能带 scoped 属性，否则样式不会穿透到子页面
示例：
```
page { background-color: #f5f5f5; }
```
如果用了 uni.scss，也可以用变量：
```
page { background-color: $uni-bg-color-grey; }
```
，前提是 lang="scss"
小程序中若同时设置了 pages.json 的 backgroundColor 和这里的 page 样式，前者管窗口，后者管内容，二者叠加才完整

小程序里 tabBar 和 navigationBar 是原生组件，它们默认有背景色（如白色），会盖住你设置的 page 背景。如果你发现底部或顶部看起来“不是预期颜色”，大概率是它们没同步改。

导航栏背景色必须通过 pages.json 的 navigationBarBackgroundColor 单独配，不能靠 CSS
tabBar 背景色同理，需在 pages.json 的 tabBar 节点里设 backgroundColor
如果用了自定义 tabBar（即用 view 实现），那它的背景就要靠 class 或内联 style 控制，和普通组件一样
切记：小程序不支持运行时修改 document.documentElement.style 来动态换全局背景，所有颜色必须预置或通过 uni.setTabBarStyle 等原生 API 更新