微信小程序一出来就引起了一片热议，我也终于不懒了，想着还是看看吧，结果发现与我之前学的 react 神似。
基础知识什么的就不再阐述了，其地址如下：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
下面就是我做的第一个功能：底部导航切换栏，tabBar：
图片.png
项目结构：
1CEDF521-75F9-4EE9-9AFF-F81CCA82DDE2.png
tabBar的配置主要在 app.json 下面：
{
"pages":[
"pages/home/home",
"pages/category/category",
"pages/cart/cart",
"pages/mine/mine",
"pages/index/index",
"pages/logs/logs"
],
"tabBar": {
"color": "#464a56",
"selectedColor": "#6595e9",
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "images/ic_nav_main_home.png",
"selectedIconPath": "images/ic_nav_main_home_press.png"
},{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "images/ic_nav_main_category.png",
"selectedIconPath": "images/ic_nav_main_category_press.png"
},{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "images/ic_nav_main_cart.png",
"selectedIconPath": "images/ic_nav_main_cart_press.png"
},{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/ic_nav_main_mine.png",
"selectedIconPath": "images/ic_nav_main_mine_press.png"
}]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#6595e9",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white",
"backgroundColor": "#eeeeee"
}
}
这里需要注意的是，pages 中接受的是一个数组，小程序的页面就放在这个里面。
但是尤其要注意的是，数组中的第一个页面就是小程序的初始页面，所以这里我们就要将 home 页面放在第一位，这样小程序启动起来才能看到我们的TabBar。
小程序新增或者减少页面的时候都需要对 pages 进行修改。
在做TabBar的时候，为了表示每个页面，我们可以给每个页面一个标题栏，navigationBarTitleText。
图片.png
标题栏是首页、分类、购物车以及个人中心都需要的，所以我们可以在 app.json 下面配置之后，再在各个页面直接用。
app.json 是全局配置，而各个页面也可以对自己的页面进行配置，即首页就可以在 home.json 下面进行配置，不过它不需要将配置写在window中：
app.json（全局）:
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#6595e9",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white",
"backgroundColor": "#eeeeee"
}
home.json ：
{
"navigationBarTitleText": "首页"
}
这么简单的配置后，就可以实现TabBar了。
