微信小程序中【tabBar】的使用

1、tabBar：即底部导航栏，使用的时候，需要放在【app.json】文件目录下，同时，需要放在window的后面。

【app.json】文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

2、tabBar的属性介绍

【color】 未选择时 底部导航文字的颜色

【selectColor 】 选择时 底部导航文字的颜色

【borderStyle】 底部导航边框的样色（默认为浅灰色线条）

【list】 导航配置数组

【pagePath】 页面访问地址

【text】 导航图标下方文字

【selectedIconPath】 选中时 图标路径

【iconPath】 未选择时 图标路径

{
  "pages":[
    "pages/index/index",
    "pages/favorite/favorite",
    "pages/cook/cook",
    "pages/my/my"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#FF6347",
    "borderStyle":"black",
    "list": [
    {
    "pagePath": "pages/index/index",
    "text": "首页",
    "selectedIconPath": "pages/img/footer1-sel.png",
    "iconPath": "pages/img/footer1.png"
    },
    {
    "pagePath": "pages/favorite/favorite",
    "text": "心愿单",
    "selectedIconPath": "pages/img/footer2-sel.png",
    "iconPath": "pages/img/footer2.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "selectedIconPath": "pages/img/footer4-sel.png",
      "iconPath": "pages/img/footer4.png"
      }
    ]
    }
}

详细的样式设置可参看小程序的官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置