實現底部導航欄

先上乾貨 –
在小程序開發工具中自動生成的app.json文件中添加：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/user/userInfo"
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/首頁.png",
        "iconPath": "images/首頁.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "selectedIconPath": "images/消息.png",
        "iconPath": "images/消息.png",
        "pagePath": "pages/logs/logs",
        "text": "消息"
      },
      {
        "selectedIconPath": "images/購物車.png",
        "iconPath": "images/購物車.png",
        "pagePath": "pages/cart/cart",
        "text": "購物車"
      },
      {
        "selectedIconPath": "images/我的.png",
        "iconPath": "images/我的.png",
        "pagePath": "pages/user/userInfo",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

這裏要注意了pagePath這個絕對路徑需要在pages中添加進去
展示目錄結構：

展示效果圖：

總結：當前實現方案是參考了官方文檔實現https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar