微信 小程序 顶部背景色问题及整体背景色的坑

  "window":{

    "navigationBarBackgroundColor": "blue", 

    "navigationBarTitleText": "123456",  

    "navigationStyle": "default",               

    "navigationBarTextStyle": "white",

    "enablePullDownRefresh": true

显示不正常

  },

  "window":{

    "navigationBarBackgroundColor": "#aaa", 

    "navigationBarTitleText": "123456",  

    "navigationStyle": "default",               

    "navigationBarTextStyle": "white",

    "enablePullDownRefresh": true

  },

 背景色问题：

  "window":{

    "navigationBarBackgroundColor": "#0af", 

    "navigationBarTitleText": "123456",  

    "navigationStyle": "default",               

    "navigationBarTextStyle": "white",

    "enablePullDownRefresh": true,

    "backgroundColor": "#00f"

  },

"window": {
    "navigationBarBackgroundColor": "#32A2FD",  // 顶部背景颜色
    "navigationBarTitleText": "123456",         // 顶部文字
    "navigationStyle": "default",               // 是否自定义导航栏,当"default"为"custom"时开启自定义头部导航栏选项
    "navigationBarTextStyle": "white",          // 顶部文字颜色 仅支持 white/black
    "enablePullDownRefresh": true,              // 开启下拉刷新, 在单个页面设置为"false",在使用页面会覆盖掉当前设置
    "backgroundTextStyle":"light"               // 下拉背景字体、loading 图的样式,仅支持 dark/light
},

显示不正常：当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。

解决方案：

如果要设置页面背景颜色，得在 wxss 文件中自定义样式，如下：

/**app.wxss**/

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

} 

page {

  background-color: #f00;

}