微信小程序模板tabBar底部导航

微信小程序的tabBar是一个底部的导航条，用于快速导航到各个页面。在微信小程序中，tabBar需要在项目的project.config.json文件中配置。如果你的项目没有配置tabBar，你可以按照以下步骤进行设置。

1. 配置project.config.json

首先，确保你的project.config.json文件中包含了对tabBar的配置。打开该文件，找到tabBar配置项，并按照下面格式进行设置：

{
    // ...其他配置
    "tabBar": {
        "color": "#ffffff",
        "selectedColor": "#007aff",
        "backgroundColor": "#F5F5F5",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "页面1",
                "iconPath": "assets/tabbar/iconget.png",
                "selectedIconPath": "assets/tabbar/iconyong.png"
            },
            {
                "pagePath": "pages/detail/detail",
                "text": "页面2",
                "iconPath": "assets/tabbar/car.png",
                "selectedIconPath": "assets/tabbar/car-on.png"
            },
            {
                "pagePath": "pages/shop/shop",
                "text": "页面3",
                "iconPath": "assets/tabbar/cart.png",
                "selectedIconPath": "assets/tabbar/cart-on.png"
            },
            // ...更多tabBar页面配置
        ]
    }
}

在这个示例中，list数组中的每一个对象代表一个tabBar的页面，其中：

• pagePath 指定了跳转到的页面的路径。

• text 定义了页面的显示标题。

• iconPath 表示未选中时tabBar图标的路径。

• selectedIconPath 表示选中时tabBar图标的路径。

2. 编辑tabBar使用的图片资源

在项目目录中网络搜索确保你已经准备好所有的tabBar使用的图标资源，并将它们放置在合适的路径下，例如将图标文件放在assets/tabbar/目录下。

3. 在app.json中引入tabBar配置

在你的小程序项目的app.json文件中引入刚刚配置好的tabBar，确保tabBar字段被正确指向：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/shop/shop"
    // ...其他页面路径
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#ffffff",
    "selectedColor": "#007aff",
    "backgroundColor": "#F5F5F5",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "页面1",
        "iconPath": "assets/tabbar/iconget.png",
        "selectedIconPath": "assets/tabbar/iconyong.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "页面2",
        "iconPath": "assets/tabbar/car.png",
        "selectedIconPath": "assets/tabbar/car-on.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "页面3",
        "iconPath": "assets/tabbar/cart.png",
        "selectedIconPath": "assets/tabbar/cart-on.png"
      }
      // ...更多tabBar页面配置
    ]
  }
}

4. 在各个页面中设置页面路径

确保每个页面的pagePath与配置文件中的路径相匹配。例如，pages/index/index 对应的是 index 页面的路径。