【小程序从0到1】页面配置

本文深入讲解了微信小程序中页面配置文件的作用及配置项，包括如何通过页面配置文件来自定义窗口外观，实现特殊窗口表现，并解释了页面配置与全局配置之间的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 $R e a c t / 小程序$ 🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

页面配置文件的作用
页面配置和全局配置的关系
页面配置中常用的配置项

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

上篇文章详细讲解了微信小程序全局的一些配置，这篇文章将带领大家学习的是小程序的「页面配置」

页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果每个小程序页面希望能有自己特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。
在页面配置文件中可以对自己的窗口外观进行自定义配置。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准（就近原则）。

页面配置中常用的配置项

属性名	类型	默认值	描述
navigationBarTitletext	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#fff	导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black/white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark/white
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离（px）
backgroundColorTop	String	#fff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	String	#fff	底部窗口的背景色，仅 iOS 支持
navigationStyle	String	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮
pageOrientation	String	portrait	屏幕旋转设置，支持 auto / portrait / landscape
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件配置