微信小程序设置页面背景颜色
时间: 2023-09-15 13:20:00 浏览: 939
可以在小程序的app.wxss文件中设置全局样式,包括设置页面背景颜色。具体操作步骤如下:
1. 在app.json文件中配置需要引入的样式文件,如下所示:
```
{
"pages": [
"pages/index/index",
"pages/settings/settings"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Demo",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/settings/settings",
"text": "设置"
}
]
},
"style": "styles/global.wxss"
}
```
2. 在styles文件夹中新建global.wxss文件,并设置背景颜色,如下所示:
```
body {
background-color: #f2f2f2;
}
```
3. 在需要设置背景颜色的页面的wxss文件中,可以根据具体情况进行样式覆盖,如下所示:
```
/* settings.wxss */
page {
background-color: #fff;
}
```
这样就可以在小程序中设置页面背景颜色了。
阅读全文