先看效果图：
微信小程序的tab并不是单独的组件，他进一步简化了创建难度，使用描述的的方式创建，在app.json全局配置文件中使用json对象描述。
通过tabBar属性设置每个tab的样式，以及使用到tab的页面：
属性说明：
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色 | |
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | |
| backgroundColor | HexColor | 是 | tab 的背景色 | |
| borderStyle | String | 否 | black | tabbar上边框的颜色， 仅支持 black/white |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab |
list 属性是个tab项的配置，实际上说明了2个内容：
1. 设置每个菜单项的样式，文字、图片等， 使用到iconPath、selectedIconPath、text
2. 设置哪个页面中会使用tab栏，使用到pagePath， 注意pagePath项必须是pages中配置的
另外，还规定list数组的大小，2<=size && size<=5, 即最多有5个tab项。
一个完整的项目结构：
完整的app.json配置：
{
"pages":[
"pages/index/index",
"pages/classify/classify",
"pages/cart/cart",
"pages/my/my"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "tab实例",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#6e6d6b",
"selectedColor": "#f9f027",
"borderStyle": "white",
"backgroundColor": "#292929",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/footer-icon-01.png",
"selectedIconPath": "images/footer-icon-01-active.png",
"text": "极速免税"
}, {
"pagePath": "pages/classify/classify",
"iconPath": "images/footer-icon-02.png",
"selectedIconPath": "images/footer-icon-02-active.png",
"text": "分类"
}, {
"pagePath": "pages/cart/cart",
"iconPath": "images/footer-icon-03.png",
"selectedIconPath": "images/footer-icon-03-active.png",
"text": "购物车"
}, {
"pagePath": "pages/my/my",
"iconPath": "images/footer-icon-04.png",
"selectedIconPath": "images/footer-icon-04-active.png",
"text": "我的"
}]
}
}下载源码：https://pan.baidu.com/s/1qYAMek8