微信小程序 - 添加以及配置底部TabBar

• 微信小程序 tabBar 文档

• 这边以新项目为例，刚创建项目是没有 tabBar 的：

• 如果我们需要加上 tabBar 的支持，我们需要找到 app.json 文件

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/dzm/dzm",
    "pages/test/test"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#000"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• 在 app.json 文件里面添加 tabBar 的配置即可：

  如果想要一进来选中第几个 tabBar 上面的木块，只需要将它的路由链接放在 pages 第一位就行了，就列入我一小程序就需要选中首页，我就将 "pages/index/index" 放在 pages 的第一位，这样就能一进来默认就打开的是首页了：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/dzm/dzm",
    "pages/test/test"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#000"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#ccc",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabBar0.png",
        "selectedIconPath": "images/tabBarSelect0.png"
      },
      {
        "pagePath": "pages/dzm/dzm",
        "text": "dzm",
        "iconPath": "images/tabBar1.png",
        "selectedIconPath": "images/tabBarSelect1.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "测试",
        "iconPath": "images/tabBar2.png",
        "selectedIconPath": "images/tabBarSelect2.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• Demo 效果，我这边就没有去找 icon 图片了，所以就是看不到的，自己加个图片就行了。

• tabBar 还可以通过放在顶部，通过调整 position 即可

  position：tabBar 的位置，仅支持 bottom / top，默认 bottom，当设置为 top 的时候，icon 就会失效

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/dzm/dzm",
    "pages/test/test"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#000"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#ccc",
    // 设置为顶部
    "position": "top",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/dzm/dzm",
        "text": "dzm"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "测试"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• Demo 效果