💌 所属专栏：【微信小程序开发教程】
😀 作 者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
文章目录
- 前言
- 一、页面配置
- 1、页面配置文件的作用
- 2、页面配置和全局配置的关系
- 3、页面配置中常用的配置项
- 总结
前言
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第18篇文章;
今天开始学习微信小程序的第十天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
一、页面配置
前面已经介绍完了微信小程序的全局配置，通过栗子学习了全局配置的 window 和 tabBar 配置项，也知道了如何美化其样式。接下来就来讲解一下小程序中另外一个配置–页面配置。话不多说，让我们原文再续，书接上回吧。
1、页面配置文件的作用
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
2、页面配置和全局配置的关系
小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。通过下面栗子来学习一下：
app.json
首先对全局配置中的 window 进行设置。
{
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTitleText": "我是夜阑的狗",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"onReachBottomDistance": 100
},
}
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
cshPageTab.json
这里以 cshPageTab 为例：
{
"usingComponents": {},
"navigationBarBackgroundColor": "#2b4b6b"
}
这里修改了 cshPageTab 页面的 json 格式，将导航栏背景颜色进行改变，由于前面全局配置也对导航栏背景颜色进行更改，这样页面配置和全局配置会产生冲突，这时候小程序就自动以页面配置为准，可以看一下运行效果：
3、页面配置中常用的配置项
小程序中页面配置有很多配置项，app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。接下来介绍页面配置经常用到的配置项，如下表所示：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 当前页面导航栏背景颜色，如 #000000 |
| navigationBarTextStyle | String | white | 当前页面导航栏标题颜色，仅支持 black / white |
| navigationBarTitleText | String | 当前页面导航栏标题文字内容 | |
| backgroundColor | HexColor | #ffffff | 当前页面窗口的背景色 |
| backgroundTextStyle | String | dark | 当前页面下拉 loading 的样式，仅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为 px |
一般在实际开发中，并不是所有页面都需要下拉刷新，只有列表页面可能需要下拉刷新的效果，所以不推荐在全局配置开启下拉刷新效果，而是那个页面需要该效果，就在该页面 json 文件单独开启即可。
接下来通过栗子来学习一下这些配置项，具体代码如下：
app.json
首先对全局配置中的 window 进行设置，在这里关闭全页面下拉刷新效果。
{
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTitleText": "我是夜阑的狗",
"navigationBarTextStyle":"white",
"backgroundColor": "#efefef",
"onReachBottomDistance": 100
},
}
cshPageButton.json
这里以 cshPageButton 为例，单独开启下拉刷新效果，对页面的导航栏，下拉效果等进行设置：
{
"usingComponents": {},
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "刺客伍六七",
"backgroundColor": "#ff0000",
"backgroundTextStyle": "light"
}
自此，就完成了整个页面配置，来看一下实际运行效果：
总结
感谢观看，这里就是页面配置的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解（持续更新中）】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记（华为云）】
- 🦄 【程序错误解决方法（建议收藏）】
- 🚀 【软件安装教程】
订阅更多，你们将会看到更多的优质内容！！
