🏆今日学习目标：全局样式文件app.wxss、页面的根元素page、 app.json中的window配置项
😃创作者：颜颜yan_
✨个人主页：颜颜yan_的个人主页
⏰预计时间：25分钟
🎉专栏系列：微信小程序开发
前言
哈喽大家好，本期是微信小程序专栏第七期，本期主要是通过设置页面背景颜色、设置导航栏颜色来学习全局样式文件app.wxss、页面的根元素page、 app.json中的window配置项。
整体效果
全局样式文件app.wxss
全局样式表可以为所有页面设置“默认”样式，也就是app.wxss。
如果不想在某个页面中使用全局默认样式，那么只需要在相应页面的wxss文件中重新定义这个样式即可。小程序会优先选择页面的wxss文件，而不是app.wxss文件。
这里我在app.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; font-family: Microsoft YaHei; }
页面的根元素page
page是小程序默认的容器元素，这是MINA框架为大家默认添加的。每个小程序页面的最外层都有page元素，page代表着页面这个整体。
如果想对页面整体做样式或者属性设置，那么应该考虑page这个根元素。
app.json中的window配置项
window配置项可以用来设置小程序的状态栏、导航栏、标题和窗口的背景色。
window属性
• navigationBarTextStyle：配置导航栏文字颜色，只支持black/white。
• navigationBarTitleText：配置导航栏文字内容。
• backgroundColor：配置窗口颜色。
• backgroundTextStyle：下拉背景字体，仅支持dark/light。
• enablePullDownRefresh：是否开启下拉刷新。
如下，我们更改导航栏颜色👇
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~
