前几天有人在公众号留言问我，上面的小程序界面是如何做到的？
想了想，决定把这个例子结合进来，一起分享给大家。
通过上一次的学习——《开发小程序必备知识基础》，相信大家都了解了小程序框架中主要包含了wxml、wxss和js三类文件，分别用于描述页面内组件元素、属性及动作交互。
事实上，小程序框架中还存在第四类文件——json配置文件，主要用于配置小程序的窗口表现、导航栏、底部菜单等。
带着问题，我们先来学习一下json配置文件。
什么是json配置文件?
Json文件分为app.json和page.json两种，分别是对小程序的全局配置文件和页面配置文件，每个小程序至少包含一个app.json。
而page.json并非必需的，我们可以视情况进行添加，它将会覆盖app.json中的配置信息，从而使当前页面拥有新的页面配置。
Json文件主要用于配置页面路径（也称为路由）、窗口表现（如导航栏颜色等）、底部菜单、网络超时时间等。
App.json包含的配置项如下：
*实际开发中，前三项通常需要进行配置，所以下文将进行重点讲解。
01 app.json的page参数
小程序增加/删除页面都必须对app.json进行更新修改，新版本开发者工具在增加新页面时将会自动在app.json中添加新的页面路由。
高坑预警：开发过程中除非必须，否则建议不要进行关键文件删除动作，容易引起IDE报错。
如小程序包含a页面也b页面，他们之下的文件分别以aa或bb命名，如aa.js、aa.wxml、bb.wxss等，那么app.json中的页面配置如下：
“pages”:[
“pages/a/aa”,
“pages/b/bb”
]
高坑预警：pages中的第一项代表小程序首页，且必须在tabbar中，否则会导致tabbar不显示（此时IDE不会报错）。
02 app.json的tabbar参数
▲
底部菜单真机效果
通常在小程序中，需要借助底部菜单来实现不同页面的切换，这时我们便需要对tabbar进行配置。
▲
点开可查看大图
如上，是官方文档对于tabbar的参数描述。
值得注意的是，尽管官方文档中color、selectedColor、backgroundColor和list均属于必填项，但实际上如对tabbar无特别的视觉要求，仅填写list即可。
list参数用于配置菜单栏中每个按钮的跳转路径、文本说明、样式和被选中时的样式，前两项属于必填项，后两项选填，只能绑定本地图片。
list从类型上来讲是一个数组，可配置2-5个tab（即菜单按钮），tab的顺序与list中的顺序一致。
list的写法：整个数组使用中括号[]包起来，数组中每一项用花括号{}包起来，每一项采用类似键值对的形式，均需英文引号括起，项与项之间使用英文逗号隔开。如下为示范：
"tabBar": {
"list": [{
"pagePath": "pages/aa/aa",
"text": "首页"
},{
"pagePath": "pages/index/index",
"text": "索引"
}]
}
Tips :tabbar默认位置为底部（bottom），可通过设置position的值为top使tabbar在小程序顶部显示，此时tabbar将不显示icon（按钮图标）。
03 app.json的window参数
window参数用于设置小程序的状态栏、导航条、标题、窗口背景色。
常用参数如：
导航栏标题navigationBarTitleText
下拉刷新enablePullDownRefresh
讲到这里，我们回到文首的问题：
如何让小程序顶部不再非黑即白？
如何让界面更彰显创意、别具一格呢？
答案很简单，我们只需将app.json中window的navigationStyle值设置为custom，小程序将只保留右上角胶囊装的按钮。
"window":{
"navigationStyle": "custom"
}
▲
可复制文本
（navigationStyle的默认值为”default”）
值得注意的是，此时整个小程序界面会随之上移，所以在开发过程中应测试是否对界面UI等造成影响。
Tips：如果小程序开启custom，应注意做好低版本客户端的兼容。
04 注意点
1、页面路径按照页面在小程序包中的文件路径即可；
2、所有的页面文件名称仅用于代码中调用，与用户前端使用的页面标题无关；
3、同一个页面下的项目文件名称应一致，如aa.wxml、aa.wxss、aa.wxs，在json中进行页面路径设置时，仅需写aa即代表了以上几个文件合并；
4、页面文件名与其下的项目文件名可以不一致，如页面文件名为abc，项目文件可以是def.wxml、def.wxss和def.wxs等 ;
5、在json配置页面路径时，页面路径之间用英文逗号隔开过行，最后一项不加逗号，否则会报错。
查看原文更多详细资料，欢迎关注公众号【一人从零开发小应用】（或搜索微信号：xiaochengxu1038）：
" class="reference-link">
关于我们
我们愿意利用每天的三分钟，致力于帮助更多新媒体人从零基础到深度掌握小程序；
我们谨希望在新媒体探索上，一路有你，一起成长；
这，是我们的梦想。
如果你认同我们，请帮我们转发，这将是对我们坚持梦想最大的鼓励！
往期回顾
▼
▲
《开发小程序必备知识基础》
▲
《小程序如何给公众号做吸粉？》
