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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/henryhu712/article/details/80883197

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

一、主体部分

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

分别如下设置：

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

需要说明的是，在微信开发环境中，第2部分（下拉出现的那部分区域）的样式是不起作用的，但在真机上测试就没问题。

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

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

二、页面全局背景

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

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

page { background-color: #fef2dc; }

三、底部菜单

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

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