章节 59 | tabBar组件（一）：系统默认的tabBar组件如何开启及使用

在微信小程序的开发中，tabBar 是一个非常重要的组件，它为用户提供了在不同页面间快速切换的导航方式，通常位于屏幕底部，包含多个选项卡（tab项），每个tab项对应一个页面。tabBar 的存在极大地提升了用户体验，让用户能够轻松地在应用的不同功能模块间跳转。本章节将详细介绍如何在微信小程序中开启并使用系统默认的 tabBar 组件。

一、了解tabBar的基本概念

在深入讨论如何开启和使用之前，首先需要明确 tabBar 的几个核心概念：

• tabBar：底部导航栏，用于在不同页面（通常是应用的主要功能模块）间进行切换。
• tab项：tabBar 上的每一个按钮，代表一个可切换的页面。
• iconPath：tab项上未选中时的图标路径。
• selectedIconPath：tab项选中时的图标路径，用于表示当前页面。
• text：tab项的文字描述，用于辅助图标表达页面功能。
• pagePath：tab项对应的页面路径，用户点击tab项后跳转到的页面。

二、开启系统默认的tabBar组件

微信小程序提供了系统默认的 tabBar 组件，开发者只需在 app.json 文件中进行配置，即可轻松实现底部导航栏的功能。下面将详细介绍配置步骤：

1. 编辑app.json文件

   app.json 是小程序的全局配置文件，其中包含了小程序的窗口表现、网络超时时间、页面的路径及窗口表现等。要在小程序中使用 tabBar，首先需要在 app.json 的 tabBar 字段中进行配置。

   {
     "pages": [
       "pages/index/index",
       "pages/logs/logs",
       "pages/profile/profile"
     ],
     "window": {
       "navigationBarBackgroundColor": "#ffffff",
       "navigationBarTextStyle": "black",
       "navigationBarTitleText": "WeChat"
     },
     "tabBar": {
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页",
           "iconPath": "icons/home.png",
           "selectedIconPath": "icons/home_active.png"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志",
           "iconPath": "icons/logs.png",
           "selectedIconPath": "icons/logs_active.png"
         },
         {
           "pagePath": "pages/profile/profile",
           "text": "我的",
           "iconPath": "icons/profile.png",
           "selectedIconPath": "icons/profile_active.png"
         }
       ],
       "color": "#7A7E83",
       "selectedColor": "#3cc51f",
       "backgroundColor": "#ffffff",
       "borderStyle": "black"
     }
   }

   在上面的配置中，tabBar 字段下的 list 数组定义了 tabBar 的所有tab项，每个tab项都是一个对象，包含 pagePath、text、iconPath 和 selectedIconPath 属性。此外，tabBar 还支持全局配置，如 color（未选中时的文字颜色）、selectedColor（选中时的文字颜色）、backgroundColor（背景颜色）和 borderStyle（边框样式，仅支持 black/white）。

2. 准备图标资源

   如上配置所示，每个tab项都需要提供两种图标资源：未选中时的图标（iconPath）和选中时的图标（selectedIconPath）。这些图标资源应放置在项目的合适位置（如 images 或 icons 文件夹），并确保路径正确无误。

   图标的尺寸和样式应符合微信小程序的设计规范，以保证在不同设备和屏幕尺寸上都能有良好的显示效果。

3. 验证配置

   配置完成后，保存 app.json 文件，并在微信开发者工具中预览小程序。如果一切配置正确，你将看到底部出现了 tabBar，并且点击不同的tab项能够正确跳转到对应的页面。

三、使用tabBar的注意事项

1. tabBar页面数量限制

   微信小程序对 tabBar 的tab项数量有限制，最多只能配置5个tab项。这是因为过多的tab项会占用屏幕空间，影响用户体验。

2. tabBar页面路径

   tabBar 的 pagePath 必须是小程序页面的完整路径，且该路径必须是 pages 字段中列出的页面之一。如果尝试跳转到未声明的页面，将导致小程序无法正常工作。

3. 自定义tabBar

   虽然系统默认的 tabBar 已经能够满足大部分需求，但在某些特殊场景下，开发者可能需要自定义 tabBar 的样式或行为。微信小程序也提供了自定义 tabBar 的能力，但这需要更多的代码工作，并且需要注意与小程序生命周期的协调。

4. tabBar的显示与隐藏

   在某些情况下，开发者可能希望在某些页面上隐藏 tabBar（例如，在登录页面或全屏页面）。虽然系统默认的 tabBar 不直接支持通过配置隐藏，但可以通过在特定页面的 app.json 配置中设置 "tabBar": false 来实现（注意，这种方式仅适用于该页面，且需要在该页面的配置文件中设置，而非全局的 app.json）。

5. tabBar的更新

   如果需要在小程序运行过程中动态更新 tabBar 的内容（如添加、删除tab项或修改图标），则需要使用小程序的API（如 wx.setTabBarStyle、wx.setTabBarItem）来实现。但需要注意的是，这些API的使用场景有限，且需要谨慎操作，以免破坏用户体验。

四、结语

系统默认的 tabBar 组件是微信小程序中不可或缺的一部分，它为用户提供了快速导航的便利。通过合理配置 app.json 文件中的 tabBar 字段，开发者可以轻松实现底部导航栏的功能。同时，也需要注意 tabBar 的使用限制和注意事项，以确保小程序的稳定性和用户体验。在未来的开发中，随着小程序功能的不断完善和扩展，tabBar 也将扮演更加重要的角色。