小程序tabBar(底部菜单)配置

pages.json
注意："tabBar" 外层没有{}包裹

{
  "pages": [{
    "path": "pages/home/home",
    "style": {}
  }, {
    "path": "pages/cate/cate",
    "style": {}
  }, {
    "path": "pages/cart/cart",
    "style": {}
  }, {
    "path": "pages/my/my",
    "style": {}
},
{
    "path": "pages/home1/home1",
    "style": {}
}
],
  "subPackages": [{
    "root": "subpkg",
    "pages": [{
      "path": "goods_detail/goods_detail",
      "style": {}
    }, {
      "path": "goods_list/goods_list",
      "style": {
        "onReachBottomDistance": 150,
        "enablePullDownRefresh": true,
        "backgroundColor": "#F8F8F8"
      }
    }, {
      "path": "search/search",
      "style": {}
    }]
  }],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页1",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
}

2.2 配置 tabBar 效果

1. 将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹

2. 修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

   {
     "tabBar": {
       "selectedColor": "#C00000",
       "list": [
         {
           "pagePath": "pages/home/home",
           "text": "首页",
           "iconPath": "static/tab_icons/home.png",
           "selectedIconPath": "static/tab_icons/home-active.png"
         },
         {
           "pagePath": "pages/cate/cate",
           "text": "分类",
           "iconPath": "static/tab_icons/cate.png",
           "selectedIconPath": "static/tab_icons/cate-active.png"
         },
         {
           "pagePath": "pages/cart/cart",
           "text": "购物车",
           "iconPath": "static/tab_icons/cart.png",
           "selectedIconPath": "static/tab_icons/cart-active.png"
         },
         {
           "pagePath": "pages/my/my",
           "text": "我的",
           "iconPath": "static/tab_icons/my.png",
           "selectedIconPath": "static/tab_icons/my-active.png"
         }
       ]
     }
   }
   

  "selectedColor": "#C00000",
  选中的文本颜色

### 配置完成不生效

解决 ： 删除默认的 index 首页

1.  在 HBuilderX 中，把 `pages` 目录下的 `index首页文件夹` 删除掉
1.  同时，把 `page.json` 中记录的 `index 首页` 路径删除掉
1.  为了防止小程序运行失败，在微信开发者工具中，手动删除 `pages` 目录下的 `index 首页文件夹`
1.  同时，把 `components` 目录下的 `uni-link 组件文件夹` 删除掉