微信小程序底部导航栏tabBar及不显示问题解决记录

1，首先需要新建一个目录images来保存相关导航图标，如下图：

2，在app.json文件中对tabBar进行配置（注意字母大小写不要写错，图片路径不要写错）

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/test_hall.png",
        "iconPath": "images/test_hall.png",
        "pagePath": "pages/index/index",
        "text": "商城"
      },
      {
        "selectedIconPath": "images/test_shoplist.png",
        "iconPath": "images/test_shoplist.png",
        "pagePath": "pages/databaseGuide/databaseGuide",
        "text": "清单"
      },
      {
        "selectedIconPath": "images/test_user.png",
        "iconPath": "images/test_user.png",
        "pagePath": "pages/deployFunctions/deployFunctions",
        "text": "用户"
      }
    ]
  }

3，配置好以后我遇到了不显示图标的问题，造成问题的原因是app.json中pages的页面路径中的第一个路径不是tabBar配置中list[0]的第一个页面路径，所以这里最简单的方法就是把它们改成一致。

 

我只遇到这个问题，所以这样配置好代码以后就正常显示底部导航了，如下：