Skip to content

19.全局配置

19.1全局配置文件及常用的配置项

​ 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:

​ ① pages

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

​ ② window

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

​ ③ tabBar

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

​ ④ style

​ 是否启用新版的组件样式


19.2 全局配置 - window

19.2 小程序窗口的组成部分

image-20230308193431138


19.3 了解 window 节点常用的配置项
属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / white
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

19.4 设置导航栏的标题

​ 设置步骤:app.json -> window -> navigationBarTitleText

​ 需求:把导航栏上的标题,从默认的 “WeChat”修改为“黑马程序员”,效果如图所示:

image-20230308193636662


19.5 设置导航栏的背景色

​ 设置步骤:app.json -> window -> navigationBarBackgroundColor

​ 需求:把导航栏标题的背景色,从默认的 #fff 修改为 #2b4b6b ,效果如图所示:

image-20230308193748093
19.6 设置导航栏的标题颜色

​ 设置步骤:app.json -> window -> navigationBarTextStyle

​ 需求:把导航栏上的标题颜色,从默认的 black 修改为 white ,效果如图所示:

image-20230308193901437


19.7 全局开启下拉刷新功能

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

​ 设置步骤:app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

​ 注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!


19.8 设置下拉刷新时窗口的背景色

​ 当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为: app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。效果如下:

image-20230308194105848


19.9 设置下拉刷新时 loading 的样式

​ 当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下:

image-20230308194314310


19.10 设置上拉触底的距离

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

​ 设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值

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


19.11 全局配置 - tabBar

19.12 什么是 tabBar

​ tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:

​ 底部 tabBar

​ 顶部 tabBar

​ 注意:

​ tabBar中只能配置最少 2 个、最多 5 个 tab 页签

​ 当渲染顶部 tabBar 时,不显示 icon,只显示文本

image-20230308195059646image-20230308195114366


19.13 tabBar 的 6 个组成部分

​ ① backgroundColor:tabBar 的背景色

​ ② selectedIconPath:选中时的图片路径

​ ③ borderStyle:tabBar 上边框的颜色

​ ④ iconPath:未选中时的图片路径

​ ⑤ selectedColor:tab 上的文字选中时的颜色

​ ⑥ color:tab 上文字的默认(未选中)颜色

image-20230308195447426

​ 19.14 tabBar 节点的配置项

属性类型必填默认值描述
positionStringbottomtabBar 的位置,仅支持 bottom/top
borderStyleStringblacktabBar 上边框的颜色,仅支持 black/white
colorHexColortab 上文字的默认(未选中)颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortabBar 的背景色
listArraytab 页签的列表, 最少 2 个、最多 5 个 tab

19.15 每个 tab 项的配置选项
属性类型必填描述
pagePathString页面路径,页面必须在 pages 中预先定义
textStringtab 上显示的文字
iconPathString未选中时的图标路径;当 postion 为 top 时,不显示 icon
selectedIconPathString选中时的图标路径;当 postion 为 top 时,不显示 icon