小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段去掉注释即可。小程序定义color建议使用16进制颜色
1. pages定义页面路径列表
"pages": [
"pages/news/news",
"pages/index/index",
"pages/movie/movie",
"pages/logs/logs"
],
2. window 用于设置小程序的状态栏、导航条、标题、窗口背景色
"window": {
"backgroundTextStyle": "light", // 下拉 loading 的样式,仅支持 dark / light
"navigationBarBackgroundColor": "white", // 导航栏背景颜色
"navigationBarTitleText": "哈哈", // 导航栏标题内容
"navigationBarTextStyle": "black", // 导航栏标题颜色 black / white
"navigationStyle": "custom", // 导航栏样式 默认为default custom 表示自定义导航栏,只保留右上角
"backgroundColor":"#ffffff" // 窗口的背景颜色
},
3. tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
"tabBar": {
"color": "#000", // 文字默认颜色
"borderStyle": "black", // tabBar上边框的颜色 仅支持 black / white
"selectedColor": "#ff6600", // tab 上的文字选中时的颜色
"position":"bottom", // 位置 top | bottom,
"custom": "false", // 自定义tabBar 默认false
"list": [ // tab列表
{
"pagePath": "pages/news/news", // 页面路径
"text": "新闻", // tab 上按钮文字
"iconPath": "pages/images/yuedu.png", // 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
"selectedIconPath": "pages/images/193.jpg" // 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
},
{
"pagePath": "pages/movie/movie",
"text": "电影",
"iconPath": "pages/images/diany.png",
"selectedIconPath": "pages/images/506.jpg"
}
]
},
4. networkTimeout
各类网络请求的超时时间,单位均为毫秒 默认值60000
"networkTimeout": {
"request": 10000, // wx.request 的超时时间
"downloadFile": 10000, // wx.downloadFile 的超时时间
"connectSocket": 10000, // wx.connectSocket 的超时时间
"uploadFile": 10000 // wx.uploadFile 的超时时间
},
5. debug
可以在开发者工具中开启 debug 模式
"debug": true,
6. requiredBackgroundModes
申明需要后台运行的能力,类型为数组 目前支持audio后台音乐播放 / location 后台定位
"requiredBackgroundModes": ["audio", "location"],
7. permission
小程序接口权限相关设置。字段类型为 Object
"permission": {
"scope.userLocation": { // 位置相关权限声明
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
},
8. style
微信小程序基础组件样式升级
"style": "v2",
完整app.json文件
{
"pages": [
"pages/news/news",
"pages/index/index",
"pages/movie/movie",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "white",
"navigationBarTitleText": "哈哈",
"navigationBarTextStyle": "black",
"navigationStyle": "custom",
"backgroundColor": "#ffffff"
},
"tabBar": {
"color": "#000",
"borderStyle": "black",
"selectedColor": "#ff6600",
"position": "bottom",
"custom": "false",
"list": [
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath": "pages/images/yuedu.png",
"selectedIconPath": "pages/images/193.jpg"
},
{
"pagePath": "pages/movie/movie",
"text": "电影",
"iconPath": "pages/images/diany.png",
"selectedIconPath": "pages/images/506.jpg"
}
]
},
"networkTimeout": {
"request": 6000,
"downloadFile": 60000,
"connectSocket": 60000 ,
"uploadFile": 60000
},
"debug": true,
"requiredBackgroundModes": [
"audio",
"location"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"style": "v2"
}