写在前面

本篇文章是微信小程序开发入门的第二十一篇，介绍小程序开发如何增加底部tab栏

全局配置的配置项：tabBar

全局配置在app.json文件中进行配置，他有一个配置项：tabBar，通过tabBar配置可以实现底部tab栏，先看最终效果：

现在我们在app.json文件中进行配置，代码如下，tabBar下我使用了三个字段，color：文字颜色，selectedColor：tab选中时的文字颜色，list：tab列表（pagePath：tab的页面地址，需在pages中定义好，text：tab的文字，iconPath：tab的图标，selectedIconPath：tab选中时的图标）：

{
  "pages": [
    "pages/index/index",
    "pages/fruit-detail/fruit-detail",
    "pages/fruit-edit-add/fruit-edit-add",
    "pages/manage/manage",
    "pages/stat/stat",
    "pages/my/my"
  ],
  "tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#36ab60",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-hl.png"
    },{
      "pagePath": "pages/manage/manage",
      "text": "管理中心",
      "iconPath": "images/manage.png",
      "selectedIconPath": "images/manage-hl.png"
    },{
      "pagePath": "pages/stat/stat",
      "text": "数据统计",
      "iconPath": "images/stat.png",
      "selectedIconPath": "images/stat-hl.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "images/my.png",
      "selectedIconPath": "images/my-hl.png"
    }]
  },
  ...
}

为什么设置这四个tab：

tab名称	功能描述
首页	显示水果列表，点击水果可以查看水果详情；后续还将在页面上添加一个购买按钮，模拟买家购买带水果的操作，因为微信支付需要开通才能调用，而个人号是无法开通的，所以只能模拟
管理中心	将原本的新增、编辑水果的功能移到这个tab下，模拟后台对水果的管理；还将添加水果类型管理、水果销售记录、水果库存数量过低警报设置、库存警报记录，也放在这个tab下
数据统计	统计某个水果的销售量、剩余库存量；统计某个种类的水果的总销售量、平均销售量、剩余库存量；统计日销售量、月销售量、年销售量
我的	增加角色（商家、买家），买家只能看到首页tab和我的tab，商家还可以查看水果管理tab和数据统计tab；卖家在我的页面还可以对用户进行管理，给用户配置角色，以区分商家用户和买家用户

写在最后

以上就是小程序开发增加底部tab栏的代码的全部内容

小程序入门21：底部tab栏

写在前面

全局配置的配置项：tabBar

为什么设置这四个tab：

写在最后