如何設定小程式頁面各個部分的背景顏色？

完整的小程式頁面除了在頁面的.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”}。

---