小程序之全局配置和页面配置
一、全局配置
1. app.json配置文件
🔊:小程序根目录下的 app.json
文件用来对微信小程序进行全局配置,它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
在 app.json
配置文件中,最主要的配置节点是:
pages
数组:配置小程序的页面路径window
对象:用于设置小程序的状态栏、导航条、标题、窗口背景色tabBar
对象:配置小程序的tab栏效果
!!!注:全局配置文档
2. pages数组
🔊:app.json
中的pages
数组,用来配置小程序的页面路径
基础配置
-
pages
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。 -
文件名不需要写文件后缀,框架会自动去寻找对应位置的
.json
、.js
、.wxml
和.wxss
四个文件进行处理。
创建页面的另一种方式
-
打开
app.json
-->pages
数组节点 --> 新增页面路径并保存 --> 自动创建路径对应的页面
设置项目的首页
-
打开
app.json
->pages
数组节点 -
按需调整数组中路径的顺序,即可修改默认首页
!!!注意事项:
1. 数组的第一项代表小程序的小程序的初始页面也就是首页;
2. 小程序中新增/减少页面,都需要对 pages 数组进行修改,否则在运行小程序时就会报错;
3. window
对象
1. 设置导航栏标题文字内容
app.json --> window --> navigationBarTitleText
"window": { "navigationBarTitleText": "Weixin" },
2. 设置导航栏背景色
app.json --> window --> navigationBarBackgroundColor
"window": { "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#FFB6C1" },
3. 设置导航栏标题颜色
app.json --> window --> navigationBarTextStyle
"window": { "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#FFB6C1", "navigationBarTextStyle": "black" },
!!!注意:导航栏标题颜色,仅支持 black / white
4. 全局开启下拉刷新功能
通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为
app.json --> window --> 把 enablePullDownRefresh 的值设置为 true
"window": { "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#FFB6C1", "navigationBarTextStyle": "black", "enablePullDownRefresh": true },
5. 设置下拉刷新窗口的背景色
当全局开启下拉刷新功能之后,默认的窗口背景为白色
app.json -> window -> backgroundColor
"window": { "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#FFB6C1", "navigationBarTextStyle": "black", "enablePullDownRefresh": true, "backgroundColor": "#778899" },
6. 设置下拉loading的样式
当全局开启下拉刷新功能之后,默认窗口的loading样式为白色。当前页面下拉loading的样式,仅支持dark/light。
app.json --> window --> backgroundTextStyle
"window": { "navigationBarTitleText": "Weixin", "navigationBarBackgroundColor": "#FFB6C1", "navigationBarTextStyle": "black", "enablePullDownRefresh": true, "backgroundColor": "#778899", "backgroundTextStyle": "dark" },
7. 设置上拉触底的距离
手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
app.json --> window --> onReachBottomDistance
!!!注意: 默认距离为 50px
,如果没有特殊需求,建议使用默认值即可
4. tabBar对象
1. 概念
tabBar
是移动端应用常见的页面效果,用于实现多页面的快速切换;小程序中通常将其分为底部tabBar
和顶部tabBar
"tabBar": { "position": "top", // top: 顶部, bottom:底部;默认在底部 },
!!!注意:tabBar
中,只能配置最少2个、最多5个 tab 页签,当渲染顶部tabBar
的时候,不显示icon
,只显示文本
注: tabbar 详细文档
2. 组成部分
- position:tabBar 的位置,仅支持
bottom
/top
backgroundColor
:导航条背景色borderStyle
:tabBar
上边框的颜色iconPath
:未选中时的图片路径selectedIconPath
:选中时的图片路径color
:tab
上的文字默认(未选中)颜色selectedColor
:tab
上的文字选中时的颜色
3. tabBar节点的配置项
-
tabBar
节点的配置项属性 类型 必填 默认值 描述 color HexColor 是 . tab 上的文字默认颜色,仅支持十六进制颜色 selectedColor HexColor 是 . tab 上的文字选中时的颜色,仅支持十六进制颜色 backgroundColor HexColor 是 . tab 的背景色,仅支持十六进制颜色 borderStyle string 否 black tabBar 上边框的颜色, 仅支持 black
/white
list Array 是 . tab 的列表,详见 list
属性说明,最少 2 个、最多 5 个 tabposition string 否 bottom tabBar 的位置,仅支持 bottom
/top
custom boolean 否 false 自定义 tabBar
- list 节点的配置项
属性 类型 必填 说明 pagePath string 是 页面路径,必须在 pages 中先定义 text string 是 tab 上按钮文字 iconPath string 否 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px selectedIconPath string 否 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px
-
示例
"tabBar": { "color": "#000000", //默认字体颜色 "selectedColor": "#0085EC", //选中字体颜色 "backgroundColor": "#f4ea2a", //背景颜色 "borderStyle": "black", //上边框颜色 "list": [ //tab列表 { "pagePath": "pages/home/home", "text": "首页", "iconPath": "/assets/home_normal.png", "selectedIconPath": "/assets/home_select.png" }, { "pagePath": "pages/index/index", "text": "网卡", "iconPath": "/assets/network_normal.png", "selectedIconPath": "/assets/network_select.png" }, { "pagePath": "pages/logs/logs", "text": "配置", "iconPath": "/assets/deploy_normal.png", "selectedIconPath": "/assets/deploy_select.png" }, { "pagePath": "pages/mine/mine", "text": "颜色", "iconPath": "/assets/theme_normal.png", "selectedIconPath": "/assets/theme_select.png" } ] },
!!!注意:
1. 都不支持网络图片
2. 当 position 为 top 时,不显示 icon
二、页面配置
1. 页面配置文件的作用
小程序中,每个页面都有自己的 .json
配置文件,用来对当前页面的窗口外观、页面效果等进行配置
/*home.json*/ { "usingComponents": {}, "navigationBarBackgroundColor": "#1afa29", //当前导航栏背景颜色 "navigationBarTextStyle": "white", //导航栏标题颜色,仅支持 black / white "navigationBarTitleText": "页面配置中设置的标题", //当前导航栏标题文字内容 "backgroundColor": "#13227a", //当前窗口的背景色 "backgroundTextStyle": "dark", //当前页面下拉loading的样式,仅支持dark/light "enablePullDownRefresh": false, //是否为当前页面开启下拉刷新 "onReachBottomDistance": 50 //底部距离 }
2. 页面配置和全局配置的关系
-
小程序中,
app.json
中的window
节点,可以全局配置小程序中每个页面的窗口表现 -
对小程序中某个页面想要拥有特殊的窗口表现,此时需要对页面级别的
.json
文件进行修改 -
!!!注意:
当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准
3. 页面配置中常用的配置项
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 当前导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black / white |
navigationBarTitleText | String | 当前导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 当前窗口的背景色 |
backgroundTextStyle | String | dark | 当前页面下拉loading的样式,仅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新 |
onReachBottomDistance | Number | 50 |
注: 页面配置详细文档