全局配置
1.全局配置文件及常用的配置项
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:
- pages
记录当前小程序所有页面的存放路径 - window
全局设置小程序窗口的外观 - tabBar
设置小程序底部的tabBar效果 - style
是否启用新版的组件样式
全局配置-window
2.了解window节点常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如#000000 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundColor | HexColor | #ffffff | 窗口的背景颜色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持darl/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件出发时距页面底部距离,单位为px |
全局配置-tabBar
1.什么是tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
- 底部tabBar
- 顶部tabBar
注意:
- tabBar中只配置最少2个、最多5个tab页签
- 当渲染顶部tabBar时,不显示icon,只显示文本
2.tabBar的6个组成部分
- background:tabBar的背景颜色
- selectedIconPath:选中时的图片路径
- borderStyle:tabBar上边框的颜色
- IconPath:未选中时的图片路径
- selectedColor:tab上的文字选中时的颜色
- color:tab上文字的默认(未选中)颜色
3.tabBar节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar的位置,仅支持bottom/top |
borderStyle | String | 否 | black | tabBar上边框的颜色,仅支持black/white |
color | HexColor | 否 | tab上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | tab上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar的背景色 | |
list | Array | 是 | tab页签的列表 最少2个、最多5个tab |
4.每个tab项的配置选项
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在pages中预先定义 |
text | String | 是 | tab上显示的文字 |
iconPath | String | 否 | 未选中时的图表路径,当position为top时,不显示icon |
selectdeIconPath | String | 否 | 选中时的图标路径;当position为top时,不显示icon |
页面配置
1.页面配置文件的作用
小程序中,每个页面都有自己的.json配置文件,用来对当页面的窗口外观、页面效果等进行配置。
2.页面配置和全局配置的关系
小程序中,app.json中的window接单,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。
3.页面配置中常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如#000000 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundColor | HexColor | #ffffff | 窗口的背景颜色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持darl/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件出发时距页面底部距离,单位为px |