大纲:
一、全局配置app.json
(一)pages配置项:
接受一个数组,用以指定小程序的页面组成。
注意:
1、数组的第一项用于设定小程序的初始页面,即小程序启动页
2、小程序新增/减少页面,都要对pages数组进行修改
3、文件名不需要写文件后缀。小程序框架会自动寻找路径 .json .js .wxml .wxss
例:ages页面下有index与logs两个页面文件
app.json中代码演示:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
}
(二)window配置项:
接收对象值,用于设置小程序的状态栏、导航条、标题、窗口等对象的颜色、背景色、内容属性、非必填配置项。没有配置时将使用默认值。
注释:
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle 导航栏标题颜色
navigationBarTitleText 导航栏标题文字内容
backgroundColor 窗口的背景色
backgroundTextStyle 下拉背景字体、loading图的样式
enablePullDownRefresh 是否开启下拉刷新
属性 |
类型 |
默认值 |
描述 |
最低版本 |
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色,如 #000000 |
|
navigationBarTextStyle |
String |
white |
导航栏标题颜色,仅支持 black / white |
|
navigationBarTitleText |
String |
导航栏标题文字内容 |
||
navigationStyle |
String |
default |
导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮 |
微信版本 6.6.0 |
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
|
backgroundTextStyle |
String |
dark |
下拉 loading 的样式,仅支持 dark / light |
|
backgroundColorTop |
String |
#ffffff |
顶部窗口的背景色,仅 iOS 支持 |
微信版本 6.5.16 |
backgroundColorBottom |
String |
#ffffff |
底部窗口的背景色,仅 iOS 支持 |
微信版本 6.5.16 |
enablePullDownRefresh |
Boolean |
false |
是否全局开启下拉刷新。 |
|
onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离,单位为px。 |
注释:
HexColor(十六进制颜色值),如"#ff00ff"
navigationStyle 只在 app.json 中生效。开启 custom 后,低版本客户端需要做好兼容。
代码演示:
{
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "爱学吧",
"navigationBarTextStyle":"black"
}
}
(三)tabBar配置项(切换标签)
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
属性 |
类型 |
必填 |
默认值 |
描述 |
color |
HexColor |
是 |
tab 上的文字默认颜色 |
|
selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
|
backgroundColor |
HexColor |
是 |
tab 的背景色 |
|
borderStyle |
String |
否 |
black |
tabbar上边框的颜色, 仅支持 black / white |
list |
Array |
是 |
tab 的列表,详见 list 属性说明,最少2个、最多5个 tab |
|
position |
String |
否 |
bottom |
tabBar的位置,仅支持 bottom / top |
其中 list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
属性 |
类型 |
必填 |
说明 |
pagePath |
String |
是 |
页面路径,必须在 pages 中先定义 |
text |
String |
是 |
tab 上按钮文字 |
iconPath |
String |
否 |
图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 postion 为 top 时,不显示 icon。 |
selectedIconPath |
String |
否 |
选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 postion 为 top 时,不显示 icon。 |
例:简单配置底部导航栏
代码实现:
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "演示"
}
]
},
}
(四)networkTimeout配置项
各类网络请求的超时时间,单位均为毫秒。
属性 |
类型 |
必填 |
默认值 |
说明 |
request |
Number |
否 |
60000 |
wx.request 的超时时间,单位毫秒。 |
connectSocket |
Number |
否 |
60000 |
wx.connectSocket 的超时时间,单位毫秒。 |
uploadFile |
Number |
否 |
60000 |
wx.uploadFile 的超时时间,单位毫秒。 |
downloadFile |
Number |
否 |
60000 |
wx.downloadFile 的超时时间,单位毫秒。 |
(五)debug配置项
可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发等。可以帮助开发者快速定位一些常见的问题。
debug配置项用于开启开发者工具的调试模式,它接收一个布尔值
下面的,先有个印象。
(六)functionalPages
基础库 2.1.0 开始支持,低版本需做兼容处理
启用插件功能页时,插件所有者小程序需要设置其 functionalPages 为 true。
(七)subPackages
微信客户端 6.6.0 ,基础库 1.7.3 及以上版本支持
启用分包加载时,声明项目分包结构。
(八)workers
基础库 1.9.90 开始支持,低版本需做兼容处理
使用 Worker 处理多线程任务时,设置 Worker 代码放置的目录
二、页面配置 page.json
页面.json文件配置只能设置windows配置项,且满足面中配置项会覆盖 app.json 的 window 中相同的配置项。
页面配置项列表
属性 |
类型 |
默认值 |
描述 |
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色,如 #000000 |
navigationBarTextStyle |
String |
white |
导航栏标题颜色,仅支持 black / white |
navigationBarTitleText |
String |
导航栏标题文字内容 |
|
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
backgroundTextStyle |
String |
dark |
下拉 loading 的样式,仅支持 dark / light |
enablePullDownRefresh |
Boolean |
false |
是否全局开启下拉刷新。 |
onReachBottomDistance |
Number |
50 |
页面上拉触底事件触发时距页面底部距离,单位为px。 |
disableScroll |
Boolean |
false |
设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项 |
三、工具配置 project.config.json
要求有基础,后面进行介绍