如何设置小程序页面各个部分的背景颜色？

完整的小程序页面除了在页面的.wxml中定义的视图外，还包括导航栏等部分。在.wxss中定义的样式只对页面内容部分起作用，其他部分的背景色如何设置呢？下面就做一个完整的介绍。

一、主体部分

首先看下图，标出来了三个部分：

分别如下设置：

1. app.json -> “window”: {“navigationBarBackgroundColor”: “#EEE”}
2. app.json -> “window”: {“backgroundColor”: “#33CCFF”}
3. app.wxss 设置全局内容样式 .content {background-color: “#CCFF00”}

如果要单独设置一个页面的头部样式，就在页面的json文件中设置。注意，与在 app.json 中的写法有点不一样，没有 “window”，例如：

{
  "navigationBarTitleText": "个人中心",
  "navigationBarBackgroundColor": "#0387FE",
  "navigationBarTextStyle": "white"
}

二、页面全局背景

关于页面背景，如果页面长度占不满一屏，就会出现下面的尴尬情况：

解决办法是在页面的.wxss里设置（注意，page前没有点）：

page { background-color: #fef2dc; }

三、底部菜单

最后，还有一个部分，在app.json中设置了tarBar，就会出现底部菜单，如下图：

底部菜单的背景颜色设置在app.json中：“tabBar”: {“backgroundColor”: “#fff9e9”}。

---