app.json的配置(全局配置),主要有五个功能:决定页面的文件路径,配置窗口的表现,配置tab标签导航,设置网络超时时间以及配置debug模式,下面根据以下代码进行讲解
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
(1)页面文件路径:
在app.json中,页面路径的属性名为pages,以数组的形式存储,数组的第一项代表小程序的初始页面,当增加或者删除页面时,都需要对pages中的数组进行修改,在配置完页面路径后,会生成文件路径对名称的文件夹和4个对应名称的文件(.js, .json, .wxml, .wxss)
(2)配置窗口表现
配置窗口表现内容包括导航栏背景色,导航栏标题颜色,导航栏标题文字内容,窗口的背景色,下拉背景字体,liading图样式,以及是否开启下拉刷新设置。这些功能都放在window这个对象里
1)navigationBarBackgroundColor:导航栏背景色
2)navigationBarTextStyle:导航栏标题颜色
3)navigationBarTitleText:导航栏标题文字内容
4)backgroundColor:窗口的背景色
5)backgroundTextStyle:下拉背景字体,loading图样式,仅支持dark/light
6)enablePullDownRefresh:是否开启下拉刷新
(3)配置tab标签导航
微信小程序配置tab 标签导航,可以配置底部标签导航和顶部标签导航,通过tabBar来配置。tabBar是一个数组,只能配置最少两个,最多五个tab,tab按数组的顺序排序,当position属性值为top时,为顶部标签导航,当position属性值为buttom或者不设置时,为底部标签导航,taeBar的属性如下:
1)color:tab上的文字默认颜色
2)selectedColor:tab上的文字选中时的颜色
3)backgroundColor:tab的背景色
4)borderStytle:tabbar上的边框的颜色,仅支持black/white
5)position:可选buttom/top
6)list:tab的列表,最上2个,最多5个,数组中的每一项都是一个对象
7)pagePath:页面路径,必须在pages中先定义
8)text:tab上按钮文字
9)iconPath:图片路径,icon大小限制为40kb,建议尺寸为81px*81px。当position为top时,此参数无效
10)selectedIconPath:选中时的图片路径,大小参数同上
"tabBar": {
"color": "#000000",
"selectedColor": "#D53C3E",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"position": "bottom",
"list": [
{
"pagePath": "pages/shou/index",
"text": "首页",
"iconPath": "./picture/9.jpg",
"selectedIconPath": "./picture/9.jpg"
},
{
"pagePath": "pages/ziliao/page3",
"text": "购物车",
"iconPath": "./picture/1.jpg",
"selectedIconPath": "./picture/1.jpg"
},
{
"pagePath": "pages/wo/logs",
"text": "我的",
"iconPath": "./picture/7.jpg",
"selectedIconPath": "./picture/8.jpg"
}
]
},
上述代码是生成三个底部标签导航,生成效果如下,注意对比选中状态和非选中状态的区别
如果设置成顶部标签导航,则效果如下
(4)配置网络超时时间
微信小程序设置网络超时时间是通过network Timeout对象来设置的,可以设置网络请求超时时间,WebSocket的超时时间,uploadFile文件上传超时时间和downloadFile文件下载超时时间,他的属性如下:(单位均为毫秒,默认均为60000)
1)request:wx.request的超时时间
2)connectSocket:wa.connectSocket的超时时间
3)uploadFile:wx.uploadFile的超时时间
4)downloadFile:wx.downloadFile的超时时间
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
(5)配置debug模式
配置debug模式是在开发者工具的控制面板,调试信息并以info的形式给出,其信息有Page的注册,页面的路由,数据更新和事件触发,可以帮助开发者快速定位一些常见的问题,具体代码为: "debug":true
开启debug时,控制台面板的调试信息如下:
没有开启debug时,控制台的调试信息如下: