微信小程序底部菜单栏怎么弄

### 创建或修改微信小程序的底部菜单栏

#### 底部菜单栏的基础概念
在微信小程序中，底部菜单栏通常被称为`tabBar`。通过配置`app.json`文件中的特定字段可以轻松定义和调整这个组件。

#### 配置 tabBar 属性
为了创建一个带有自定义图标和文字标签的底部导航条，在项目的根目录下的`app.json`文件内加入如下结构：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./image/home.png", // 默认状态图片路径
      "selectedIconPath": "./image/active_home.png" // 选中状态下图片路径
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "./image/log.png",
      "selectedIconPath": "./image/active_log.png"
    }],
    "color": "#999", // 文字默认颜色
    "selectedColor": "#3cc51f", // 当前选项的文字颜色
    "borderStyle": "white", // tab 上边框的颜色，仅支持 black / white，默认黑色
    "backgroundColor": "#ffffff" // tab 背景色
  }
}

上述JSON片段展示了如何指定两个页面作为底部分页项，并设置了各自对应的文本描述以及不同状态下的图标资源[^3]。

#### 修改现有项目中的 tabBar 设置
对于已经存在的项目而言，只需编辑`app.json`里的相应节点来更新底部菜单的内容。注意保持`pagePath`指向实际存在并已声明于`pages`数组内的页面路径；同时确保提供的图像资源确实存在于所指明的位置下。

#### 动态改变当前显示的 page 或者隐藏 tabBar
有时应用程序逻辑可能会要求临时隐藏整个底部导航条或是跳转至不在tab列表中的某个特殊界面。此时可以通过API函数`wx.switchTab()`用于切换到另一个tab页面，而当目标不是任何一个tabs时，则应该采用`wx.navigateTo()`, `wx.redirectTo()`等方法替代。另外，利用`wx.hideTabBar({})`可快速收起该控件而不必更改任何布局设定。