本文详细解析微信小程序核心配置文件app.json的各项属性及其用法，包括pages、window、tabBar等关键配置项，帮助开发者掌握小程序的基础配置技巧。
目录结构
上图是我建立的的微信小程序的目录结构
主体学习
app.json
json简介
json在我们web开发中一般是作为前后端 数据交互 的方式, 他是以键值对的形式来进行数据的传输, 而他的书写规范也是极为简单的, 以{}来包括住整个json文件之后在里面使用 健值对的形式来,保存信息, 如
"key";"value""key":{"valuekey":"value"}"key":["value1","value2"]基本我们json的键值对就是上面的三种,再复杂的json都是由上面变种过来的, 每个键值对中间以’,’隔开. 而现在json也因为他的简单等一系列原因而慢慢地占据更多的位置, 好了这就是关于json的介绍,我们只要有了解就好了.
app.json总体
我们先看看微信给我们的满配的app.json(☺)
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}好了我们先对此有个了解就好了,接下来开始剖析了
下表为官方对各个字段的解释
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pages | String Array | 是 | 设置页面路径 |
| window | Object | 否 | 设置默认页面的窗口表现 |
| tabBar | Object | 否 | 设置底部 tab 的表现 |
| networkTimeout | Object | 否 | 设置网络超时时间 |
| debug | Boolean | 否 | 设置是否开启 debug 模式 |
我们也会根据这个表格来进行相对应的解释
pages
类型 StringArray 字符串数组
必填 是
描述 设置页面路径
pages他是接受一个数组,指定小程序是由那些页面组成, 每个字符串的组成为 [路径+文件名(去掉后缀)], 第一个代表了小程序的初始页面, 而且不在这里面配置的路径是不可以访问的, 而且在这里面写个新路径微信编译器也会自动生成对应的四个文件.wxml .js .index.wxss .json, 注意微信小程序已经做好了优化, 他会自动将四个同名的文件进行关联,不需要自己做,这个在以后的开发中会有体现
自动生成没有的四个文件 在微信IDE开发环境下
window
下表为微信官方解释
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如#000000 | |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black/white | |
| navigationBarTitleText | String | 导航栏标题文字内容 | ||
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom。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 |
附带官方解释图片
navigationBarBackgroundColor
类型HexColor使用十六进制来表示颜色,具体的可以上网查看
默认#000000
作用 设置导航栏的背景颜色
测试 我将我的导航栏设计为天依蓝#66ccff"window":{ "navigationBarBackgroundColor": "#66ccff" }navigationBarTextStyle
类型
String仅支持black/white
默认white
作用 设置标题字体颜色
测试 默认的是白的,但生成的时候是黑色的,我要将他调回来,而且为了防止将来发生改变,建议默认的是写上比较好,发现其实白色的也挺好看的"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white" }navigationBarTitleText
类型String
默认 无
作用 作为导航栏标题
测试 将 Hello,World 作为标题"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World" }navigationStyle
类型String仅支持default以及custom
默认default
作用 设置导航栏样式
default模式就是我们默认显示的那个标题栏
custom模式可自定义导航栏，只保留右上角胶囊状的按钮
测试 我感觉还是使用默认的比较好"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World", "navigationStyle": "default" }enablePullDownRefresh
类型Boolean
默认false
作用 是否开启下拉刷新
测试 设置为true"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World", "navigationStyle": "default", "enablePullDownRefresh" : true }backgroundColor
类型HexColor使用十六进制来表示颜色
默认#ffffff白色
作用 调整窗体的背景颜色. 知道么? 本来我是把这个作为第五个的但是我发现写了以后没有地方可以用这就很尴尬了…, 我一直在找那个 background 在哪, 之后在我看到下拉刷新后就明白了
测试 将背景设为灰色#F1F1F1"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World", "navigationStyle": "default", "enablePullDownRefresh" : true, "backgroundColor": "#F1F1F1" }backgroundTextStyle
类型String可选值dark/light
默认dark
作用 影响下拉loading 的样式
测试 在经过测试后我发现还是dark这个样式好看,给人一种在加载的感觉"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World", "navigationStyle": "default", "enablePullDownRefresh" : true, "backgroundColor": "#F1F1F1", "backgroundTextStyle" : "dark" }
接下来的是ios支持的
backgroundColorTop
类型String
默认#ffffff白色
作用 顶部窗口的背景色, 其实他会覆盖掉我们上面设计的backgroundColor目前是这样的, 而且说是只会在ios中启用我只是在虚拟机中测试了,切换不同的手机, 发现还是启用了而且覆盖掉了,很神奇
测试 我将这个设置为#ff0000展示覆盖"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World", "navigationStyle": "default", "enablePullDownRefresh" : true, "backgroundColor": "#F1F1F1", "backgroundTextStyle" : "dark", "backgroundColorTop" : "#ff0000" }backgroundColorBottom
类型String
默认 #ffffff 白色
作用 底部窗口的背景色, 而且因为backgroundColorTop的原因,说是只会在ios中启用我对此表示不相信
测试 我将这个设置为#ffffff"window":{ "navigationBarBackgroundColor": "#66ccff", "navigationBarTextStyle":"white", "navigationBarTitleText": "Hello,World", "navigationStyle": "default", "enablePullDownRefresh" : true, "backgroundColor": "#F1F1F1", "backgroundTextStyle" : "dark", "backgroundColorTop" : "#ff0000", "backgroundColorBottom" : "#ffffff" }- onReachBottomDistance
类型Number单位px
默认 50
作用 说是上拉触底事件,但是我也没法上拉啊,等我回来学到了再说
演示代码效果
代码展示
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/mypage/mypage"
],
"window":{
"navigationBarBackgroundColor": "#66ccff",
"navigationBarTextStyle":"white",
"navigationBarTitleText": "Hello,World",
"navigationStyle": "default",
"enablePullDownRefresh" : true,
"backgroundColor": "#F1F1F1",
"backgroundTextStyle" : "dark",
"backgroundColorTop" : "#ff0000",
"backgroundColorBottom" : "#ffffff",
"onReachBottomDistance" : 50
}
}tabBar
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| 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 | 可选值 bottom、top |
list
类型Array必填
默认 无
作用 在顶部或底部创建按钮组
测试 我将系统原生的两个页面,作为按钮组"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] }color
类型HexColor
默认 无
作用 tab上的文字默认颜色
测试 我采用了黑色的字 #000000"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ], "color" : "#000000" } }selectedColor
类型HexColor必填
默认 无
作用 tab上的文字被选中的颜色
测试 我将被选中的颜色设置为 绿色 #009900"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ], "color" : "#000000", "selectedColor" : "#009900" }backgroundColor
类型HexColor必填
默认 无
作用 tab的背景色
测试 我将背景色设置为白色 #ffffff"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ], "color" : "#000000", "selectedColor" : "#009900", "backgroundColor" : "#ffffff" }borderStyle
类型String非必填
默认black
作用 tab按钮组容器的边框
测试 我试图调为白色但是感觉不好看,然后我又调为默认的黑色"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ], "color" : "#000000", "selectedColor" : "#009900", "backgroundColor" : "#ffffff", "borderStyle" : "black" }position
类型String支持bottom/top
默认bottom
作用 设置tabBar是在顶部还是底部
测试 设置为底部,其实顶部也很好看,但是为了接下来我还是设置为底部"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ], "color" : "#000000", "selectedColor" : "#009900", "backgroundColor" : "#ffffff", "borderStyle" : "black", "position" : "bottom" }效果演示
list解析
这个主要是用于对你的tabBar里面的list中的item进行定制操作
下表为官方文档
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
| text | String | 是 | tab 上按钮文字 |
| iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片 |
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为top 时，此参数无效 |
对于前两个很简单, 一个是这个item对应的页面, 一个是要显示的文字,现在我要把我自己创建的一个页面添加进来
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
},
{
"pagePath": "pages/mypage/mypage",
"text": "我"
}
]演示
后两个应当也是成组出现的, 一个是未选中的图标, 一个是已选中的图标
在此打个广告 iconfont 阿里巴巴矢量图库 我采用的是这里的图标,挺好的
我将下下来的用户设置为 user.png, 填充的设置为 userUse.png
首先我设置了 iconPath,当点击时会没有图片
{
"pagePath": "pages/mypage/mypage",
"text": "我",
"iconPath" : "imgs/user.png"
}演示
我们发现在选中时图片没了, 这是肯定的,因为我们只设置了没选中的, 那么接下来我们设置下选中图片selectedIconPath
{
"pagePath": "pages/mypage/mypage",
"text": "我",
"iconPath" : "imgs/user.png",
"selectedIconPath" :"imgs/userUse.png"
}演示
我们还记得 假如position值为top时图标不会显现, 让我们试试
networkTimeout
这个因为暂时我们并没有学习对应的js,我们先把官方文档搞到手
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| request | Number | 否 | wx.request的超时时间，单位毫秒，默认为：60000 |
| connectSocket | Number | 否 | wx.connectSocket的超时时间，单位毫秒，默认为：60000 |
| uploadFile | Number | 否 | wx.uploadFile的超时时间，单位毫秒，默认为：60000 |
| downloadFile | Number | 否 | wx.downloadFile的超时时间，单位毫秒，默认为：60000 |
我只解释里面的三个因为有一个我也没看懂. 或许后面就懂了
request
类型Number单位 毫秒 否
默认 无
作用 设置request请求超时时间
测试 我设为10秒吧,原本是60秒"networkTimeout" : { "request" : 10000 }uploadFile
类型Number单位 毫秒 否
默认 无
作用 设置上传文件请求超时时间
测试 这个设为20秒,原本是60秒"networkTimeout" : { "request" : 10000, "uploadFile" : 20000 }downloadFile
类型Number单位 毫秒 否
默认 无
作用 设置下载文件超时时间
测试 这个设为20秒,原本是60秒"networkTimeout" : { "request" : 10000, "uploadFile" : 20000, "downloadFile" : 20000 }这个也没什么演示的,等我回来做网络访问时一起做了
debug
关于debug 我给出官方解释
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info
的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
在使用debug 后我们会发现控制台提示量会显著提升,示例
扫一扫
1469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
