【微信小程序】全局样式文件app.wxss、页面的根元素page、 app.json中的window配置项

🏆今日学习目标：全局样式文件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; 
} 
1
2
3
4
5
6
7
8
9
10
11

页面的根元素page

page是小程序默认的容器元素，这是MINA框架为大家默认添加的。每个小程序页面的最外层都有page元素，page代表着页面这个整体。
如果想对页面整体做样式或者属性设置，那么应该考虑page这个根元素。

app.json中的window配置项

window配置项可以用来设置小程序的状态栏、导航栏、标题和窗口的背景色。

window属性
• navigationBarTextStyle：配置导航栏文字颜色，只支持black/white。
• navigationBarTitleText：配置导航栏文字内容。
• backgroundColor：配置窗口颜色。
• backgroundTextStyle：下拉背景字体，仅支持dark/light。
• enablePullDownRefresh：是否开启下拉刷新。

如下，我们更改导航栏颜色👇

---

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~