前面我们对小程序开发>小程序开发目录进行了讲解【点击查看】,现在我们对其中的重头文件app.json进行剖析
打开app.json,我们看到很多配置文件,那真的琳琅满目,看的眼花缭乱,不过我们都是老司机了,也能猜个一二不离三
格式都是json类型,这也和文件名app.json遥相呼应,可见作者这点还是很睿智的,减少了键盘侠的出现
我先贴出来整体内容,然后再分解
{
"pages": [
"pages/index/main",
"pages/logs/main",
"pages/counter/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#999",
"backgroundColor": "#fafafa",
"selectedColor": "#333",
"borderStyle": "white",
"list": [{
"text": "首页",
"pagePath": "pages/index/main",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png"
}, {
"text": "我的",
"pagePath": "pages/logs/main",
"iconPath": "static/tabs/orders.png",
"selectedIconPath": "static/tabs/orders-active.png"
}],
"items": [{
"name": "首页",
"pagePath": "pages/index/main",
"icon": "static/tabs/home.png",
"activeIcon": "static/tabs/home-active.png"
}, {
"name": "我的",
"pagePath": "pages/logs/main",
"icon": "static/tabs/orders.png",
"activeIcon": "static/tabs/orders-active.png"
}],
"position": "bottom"
}
}
配置页面
我们先看最上面
这是一个key:value格式,key是pages,望文生义,这个是页面的意思,对,小程序的页面,key是一个list列表,里面放着的是一些页面,这个地方要注意了,后续开发的过程中,新增一个页面就需要在这个地方配置上去
配置窗口
而window则表示的窗口展示,种类比较多
backgroundTextStyle:下拉背景字体
navigationBarBackgroundColor:导航栏背景色,默认黑色
navigationBarTitleText:导航栏文字内容
navigationBarTextStyle:导航栏标题颜色
除此之外,还有enablePullDownRefresh【下拉是否刷新】等
底部tabBar
tobBar,明显就是小程序底部显示相关了
color:未激活的文字颜色
backgroundColor:tab背景色
selectedColor:激活状态的文字颜色
borderStyle:边框上的颜色
list:表示具体的小程序底部tab,最少2个,最多5个
list中又可以设置4个值
text:显示的文字
pagePath:跳转到页面路径
iconPath:非激活状态的icon路径
selectedIconPath:激活状态下icon路径
items不用多说了,就是各种主题啦