关于如何解决微信小程序无法正常显示tabBar的问题

一、问题

---

        在编写微信小程序的时候，我们的相关配置“完全正确”的前提之下，微信小程序的tabBar不能正常显示。

如下图：

二、解决思路

---

1. 查看一下我们的tabBar中引用的页面是否已经注册到了pages中，若这个页面没有注册，则应 改及时调整，注册页面到pages中；
2. 如果页面已经注册了，仍然没有显示，那么需要看一下页面应用的路径是否出现了错误，如果有则要纠正，没有的话，就看下面的解决方法；
3. tabBar中的页面路径在pages中的排序（推荐先检查这个）

三、解决方法

---

解决方法：
        将tabBar页面文件的路径放到非tabBar页面路径上面。

3.1 无法正常显示

---

app.json配置文件(不能正常显示的情况)：

{
    
    
    //页面创建
  "pages":[
    //非tabBar页面
    "pages/index/index",
    "pages/logs/logs"
      //tabBar页面
    "pages/home/home",
    "pages/msg/msg",
    
  ],
    //tabBar菜单选项配置
  "tabBar": {
    
    
    "position": "bottom",
    "borderStyle":"black",
    "color": "#75878a",
    "selectedColor": "#f00056",
    "backgroundColor": "#f0f0f4",
    "list": [{
    
    
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/icon/tabBar/home1.png",
      "selectedIconPath": "/icon/tabBar/home2.png"
    },
    {
    
    
      "pagePath": "pages/msg/msg",
      "text": "消息页面",
      "iconPath": "/icon/tabBar/msg1.png",
      "selectedIconPath": "/icon/tabBar/msg2.png"
    }]
  }
}

//配置项文件中不能有注释

注意:
tabBar的页面必须放到所有页面的前面，否则无法显示tabBar

如下列代码,若将"pages/home/home"和"pages/msg/msg"tabbar页面放到 "pages/index/index","pages/logs/logs"之后则无法显示tabBar菜单选项。

3.2 正常显示

---

app.json配置文件(正常显示的情况)：

{
    
    
    //页面创建
  "pages":[
    //tabBar页面
    "pages/home/home",
    "pages/msg/msg",
    //非tabBar页面
    "pages/index/index",
    "pages/logs/logs"   
  ],
    //tabBar菜单选项配置
  "tabBar": {
    
    
    "position": "bottom",
    "borderStyle":"black",
    "color": "#75878a",
    "selectedColor": "#f00056",
    "backgroundColor": "#f0f0f4",
    "list": [{
    
    
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/icon/tabBar/home1.png",
      "selectedIconPath": "/icon/tabBar/home2.png"
    },
    {
    
    
      "pagePath": "pages/msg/msg",
      "text": "消息页面",
      "iconPath": "/icon/tabBar/msg1.png",
      "selectedIconPath": "/icon/tabBar/msg2.png"
    }]
  }
}

//配置项文件中不能有注释