在 UniApp 开发过程中，页面背景颜色是界面设计中非常基础但又十分重要的一部分。无论是设置普通页面背景、统一主题颜色，还是实现动态切换皮肤，都需要掌握正确的背景颜色配置方式。
UniApp 基于 Vue 语法开发，并支持编译到多个平台，包括微信小程序、H5、App 等。因此，页面背景颜色的设置方式也比较灵活。根据应用场景不同，可以通过页面样式、全局配置、自定义组件以及动态绑定等方式实现。
下面介绍 UniApp 中常用的 4 种设置页面背景颜色的方法。
方法一：通过页面 style 样式设置背景颜色
最直接的方式是在页面的
这里通过 background-color 属性设置背景颜色，height: 100vh 可以让背景铺满整个可视区域。
这种方式适合单个页面使用不同背景颜色的场景，例如：
登录页面使用渐变背景；
首页使用浅色背景；
活动页面使用特殊主题颜色。
优点是简单直观，维护成本低。
需要注意的是，UniApp 中的 view 默认不会自动撑满屏幕高度，如果希望背景覆盖整个页面，需要设置合适的高度，例如：
.container {
min-height: 100vh;
background-color: #ffffff;
}相比固定高度，min-height 对不同设备适配效果更好。
方法二：通过 page 页面样式统一设置背景颜色
如果希望整个页面区域都具有背景颜色，可以使用 UniApp 提供的页面级样式。
在页面对应的 .vue 文件中：
page 是 UniApp 特有的选择器，可以直接修改当前页面的整体样式。
这种方式与普通 CSS 选择器不同，它不是作用于某个组件，而是直接影响当前页面容器。
例如：
页面背景颜色
运行后，整个页面都会显示指定背景颜色。
这种方案特别适合：
页面内容高度不固定；
页面中存在多个组件；
不希望额外添加外层容器。
在实际项目开发中，page 设置背景颜色是比较常见的方案。
方法三：通过 pages.json 设置全局页面背景颜色
UniApp 提供了 pages.json 配置文件，可以进行全局页面样式配置。
例如：
{
"globalStyle": {
"backgroundColor": "#f8f8f8"
}
}配置完成后，所有页面默认都会使用该背景颜色。
这种方式适合整个应用统一风格，例如：
企业管理系统；
电商应用；
内容类 App。
通过全局配置，可以避免每个页面重复编写 CSS。
同时，pages.json 还可以配置导航栏颜色：
{
"globalStyle": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"backgroundColor": "#f5f5f5"
}
}其中：
navigationBarBackgroundColor：设置顶部导航栏背景色；navigationBarTextStyle：设置导航栏文字颜色；backgroundColor：设置页面背景颜色。
需要注意的是，不同运行平台对部分配置支持程度可能存在差异，开发时建议根据目标平台进行测试。
方法四：使用动态绑定实现背景颜色切换
在一些应用中，背景颜色并不是固定的，例如：
夜间模式；
主题切换；
用户自定义皮肤。
这时可以使用 Vue 数据绑定动态修改背景颜色。
示例：
切换背景
通过 :style 动态绑定 CSS 属性，可以根据业务逻辑随时修改背景颜色。
这种方式适合：
主题系统；
用户个性化设置；
根据状态改变界面颜色。
如果项目使用 Vuex 或 Pinia 管理状态，也可以将主题颜色保存到全局状态中，实现多个页面同步切换。
四种背景颜色设置方式对比
| 方法 | 使用范围 | 适用场景 | 推荐程度 |
|---|---|---|---|
| view样式设置 | 当前组件 | 单页面特殊样式 | ★★★★ |
| page选择器设置 | 当前页面 | 页面整体背景 | ★★★★★ |
| pages.json配置 | 全局页面 | 统一应用主题 | ★★★★★ |
| 动态绑定样式 | 动态场景 | 主题切换 | ★★★★★ |
UniApp设置背景颜色时的常见问题
1. 设置背景颜色后没有铺满屏幕
很多开发者会发现：
.container {
background-color: #eee;
}但是页面底部仍然显示默认颜色。
主要原因是容器高度不足。
解决方法：
.container {
min-height: 100vh;
}或者：
.container {
height: 100%;
}同时确保父级元素具有有效高度。
2. 微信小程序中背景颜色不生效
部分情况下，直接设置普通元素背景颜色，只会影响元素自身区域。
如果需要修改整个页面背景，应使用：
page {
background-color: #f5f5f5;
}3. App端和H5端显示效果不同
由于不同平台渲染机制存在差异，建议避免使用过于特殊的 CSS 写法。
常见做法：
使用
rpx进行尺寸适配；使用
vh控制页面高度；使用
page统一管理页面背景。
实际项目中的推荐方案
如果是普通业务项目，可以采用以下组合方式：
全局统一背景：
{
"globalStyle": {
"backgroundColor": "#f7f7f7"
}
}特殊页面单独覆盖：
page {
background-color: #ffffff;
}需要动态变化时：