微信小程序开发实战（页面配置）

@作者 : SYFStrive

 

@博客首页 : HomePage

： 微信小程序

：个人社区（欢迎大佬们加入） ：社区链接

：觉得文章不错可以点点关注 ：专栏连接

：感谢支持,学累了可以先看小段由小胖给大家带来的街舞

微信小程序（）

全局配置文件及常用的配置项‍️

小程序根目录下的 app.json 文件是小程序的全局配置文件。

常用的配置项如

pages

记录当前小程序所有页面的存放路径
window

全局设置小程序窗口的外观
tabBar

设置小程序底部的 tabBar 效果
style

是否启用新版的组件样式

小程序窗口的组成部分‍️

如

了解 window 节点常用的配置项‍️

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

设置导航栏的标题‍️

设置步骤：app.json window navigationBarTitleText

需求：把导航栏上的标题，修改成 “小白开发小程序”

效果如

设置导航栏的背景颜色‍️

设置步骤：app.json window navigationBarBackgroundColor

需求：把导航栏上的标题，修改成 “小白开发小程序”

效果如

设置导航栏的标题颜色‍️

设置步骤：app.json window navigationBarTextStyle

需求：把导航栏上的标题颜色，从默认的 black 修改为 white

注意❗： navigationBarTextStyle 的可选值只有 black 和 white

效果如

全局配置下拉刷新‍️

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

设置步骤：app. window 把 enablePullDownRefresh 的值设置为 true

注意❗：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！

效果如

全局配置下拉刷新背景颜色‍️

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如何自定义下拉刷新窗口背景色，

设置步骤: app.json window 为 backgroundColor 指定16进制的颜色值 #66ccff。

注意❗：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！

效果如

全局开启下拉刷新Loading的样式‍️

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果

设置步骤为 app.json window 为 backgroundTextStyle 指定 dark 值。
注意： backgroundTextStyle 的可选值只有 light 和 dark

效果如

上拉触底是移动端的专有名词‍️

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤： app.json window 为 onReachBottomDistance 设置新的数值

注意❗：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

最后

本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家

 

                 相关专栏连接

下篇文章再见ヾ(￣▽￣)Bye_Bye