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

在这里插入图片描述

🏆今日学习目标：全局样式文件app.wxss、页面的根元素page、 app.json中的window配置项 😃创作者：颜颜yan_ ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：25分钟 🎉专栏系列：微信小程序开发

文章目录

• 前言
• 整体效果
• 全局样式文件app.wxss
• 页面的根元素page
• app.json中的window配置项
• 总结

前言

哈喽大家好，本期是微信小程序专栏第七期，本期主要是通过设置页面背景颜色、设置导航栏颜色来学习全局样式文件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：是否开启下拉刷新。

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

在这里插入图片描述

总结

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