【⼩程序】代码构成——JSON配置
转载：
⼩程序代码由以下四类⽂件构成：
1. .json 后缀的 JSON 配置⽂件
2. .wxml 后缀的 WXML 模板⽂件
3. .wxss 后缀的 WXSS 样式⽂件
4. .js 后缀的 JS 脚本逻辑⽂件
⼀、JSON 配置
我们可以看到在项⽬的根⽬录有⼀个 app.json 和 fig.json，此外在 pages/logs ⽬录下还有⼀个 logs.json，我们依次来说明⼀下他们的⽤途。
⼩程序配置 app.json
app.json 是对当前⼩程序的全局配置，包括了⼩程序的所有页⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。QuickStart 项⽬⾥边的app.json 配置内容如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
我们简单说⼀下这个配置各个项的含义:
1. pages字段 —— ⽤于描述当前⼩程序所有页⾯路径，这是为了让客户端知道当前你的⼩程序页⾯定义在哪个⽬录。
2. window字段 —— ⼩程序所有页⾯的顶部背景颜⾊，⽂字颜⾊定义在这⾥的。
⼯具配置 fig.json
通常⼤家在使⽤⼀个⼯具的时候，都会针对各⾃喜好做⼀些个性化配置，例如界⾯颜⾊、编译配置等等，当你换了另外⼀台电脑重新安装⼯具的时候，你还要重新配置。
考虑到这点，⼩程序开发者⼯具在每个项⽬的根⽬录都会⽣成⼀个 fig.json，你在⼯具上做的任何配置都会写⼊到这个⽂件，当你重新安装⼯具或者换电脑⼯作时，你只要载⼊同⼀个项⽬的代码包，开发者⼯具就⾃动会帮你恢复到当时你开发项⽬时的个性化配置，其中会包括编辑器的颜⾊、代码上传时⾃动压缩等等⼀系列选项。
页⾯配置 page.json
这⾥的 page.json 其实⽤来表⽰ pages/logs ⽬录下的 logs.json 这类和⼩程序页⾯相关的配置。
如果你整个⼩程序的风格是蓝⾊调，那么你可以在 app.json ⾥边声明顶部颜⾊是蓝⾊即可。实际情况可能不是这样，可能你⼩程序⾥边的每个页⾯都有不⼀样的⾊调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独⽴定义每个页⾯的⼀些属性，例如刚刚说的顶部颜⾊、是否允许下拉刷新等等。
配置细节
app.json⽂件⽤来对⼩程序进⾏全局配置，决定页⾯⽂件的路径、窗⼝表现、设置⽹络超时时间、设置多 tab 等。
以下是⼀个包含了所有配置选项的 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
}
app.json 配置项列表
属性类型必填描述
String Array是设置页⾯路径
Object否设置默认页⾯的窗⼝表现
Object否设置底部 tab 的表现
Object否设置⽹络超时时间
Boolean否设置是否开启 debug 模式
pages
接受⼀个数组，每⼀项都是字符串，来指定⼩程序由哪些页⾯组成。每⼀项代表对应页⾯的【路径+⽂件名】信息，数组的第⼀项代表⼩程序的初始页⾯。⼩程序中新增/减少页⾯，都需要对 pages 数组进⾏修改。
⽂件名不需要写⽂件后缀，因为框架会⾃动去寻路径下 .json, .js, .wxml, .wxss 四个⽂件进⾏整合。
如开发⽬录为：
pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss
则需要在 app.json 中写
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
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 Number50页⾯上拉触底事件触发时距页⾯底部距离，单位为px
注：HexColor（⼗六进制颜⾊值），如"#ff00ff"
注：navigationStyle 只在 app.json 中⽣效。开启 custom 后，低版本客户端需要做好兼容。开发者⼯具基础库版本切到 1.7.0（不代表最低版本，只供调试⽤） 可⽅便切到旧视觉
如 app.json ：
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "接⼝功能演⽰",
json值的类型有哪些"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
如果⼩程序是⼀个多 tab 应⽤（客户端窗⼝的底部或顶部有 tab 栏可以切换页⾯），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显⽰的对应页⾯。
Tip：
1. 当设置 position 为 top 时，将不会显⽰ icon
2. tabBar 中的 list 是⼀个数组，只能配置最少2个、最多5个 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可选值 bottom、top
其中 list 接受⼀个数组，数组中的每个项都是⼀个对象，其属性值如下：
属性类型必
填
说明
pagePath String是页⾯路径，必须在 pages 中先定义text String是tab 上按钮⽂字
iconPath String否图⽚路径，icon ⼤⼩限制为40kb，建议尺⼨为 81px * 81px，当 postion 为 top 时，此参数⽆效，不⽀持⽹络图⽚
selectedIconPath String否选中时的图⽚路径，icon ⼤⼩限制为40kb，建议尺⼨为 81px * 81px ，当 postion 为 top 时，此参数⽆效
networkTimeout
可以设置各种⽹络请求的超时时间。
属性说明：
属性类型必填说明
request Number否的超时时间，单位毫秒，默认为：60000
connectSocket Number否的超时时间，单位毫秒，默认为：60000
uploadFile Number否的超时时间，单位毫秒，默认为：60000
downloadFile Number否的超时时间，单位毫秒，默认为：60000
属性类型必填说明
debug
可以在开发者⼯具中开启 debug 模式，在开发者⼯具的控制台⾯板，调试信息以 info 的形式给出，其信息有Page的注册，页⾯路由，数据更新，事件触发 。 可以帮助开发者快速定位⼀些常见的问题。
page.json
每⼀个⼩程序页⾯也可以使⽤.json⽂件来对本页⾯的窗⼝表现进⾏配置。 页⾯的配置⽐app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页⾯中配置项会覆盖 app.json 的 win
dow 中相同的配置项。
页⾯的.json只能设置 window 相关的配置项，以决定本页⾯的窗⼝表现，所以⽆需写 window 这个键，如：
属性类型默认值描述
navigationBarBackgroundColor HexColor#000000导航栏背景颜⾊，如"#000000"
navigationBarTextStyle String white导航栏标题颜⾊，仅⽀持 black/white
navigationBarTitleText String导航栏标题⽂字内容
backgroundColor HexColor#ffffff窗⼝的背景⾊
backgroundTextStyle String dark下拉 loading 的样式，仅⽀持 dark/light
enablePullDownRefresh Boolean false是否开启下拉刷新，详见。
disableScroll Boolean false 设置为 true 则页⾯整体不能上下滚动；只在 page.json 中有效，⽆法在 app.json 中设置该项
onReachBottomDistance Number50页⾯上拉触底事件触发时距页⾯底部距离，单位为px
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "接⼝功能演⽰",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。