有了圖片有了文字怎麼能沒有導航欄呢，所以下面來記錄下底部導航欄的過程，先展示下我做的簡易的導航欄圖片。

可以在上面的圖片中看到底部的包含“推薦”“反饋”的一個底部導航欄。製作導航欄只需要開啟微信小程式app.json，向{}裡填入下列程式碼：

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "img/tj.png",
        "iconPath": "img/tjw.png",
        "pagePath": "pages/recommend/recommend",
        "text": "推薦"
      },
      
      {
        "selectedIconPath": "img/fk.png",
        "iconPath": "img/fkw.png",
        "pagePath": "pages/fb/fb",
        "text": "反饋"
      }
    ]
  }
 

先簡易的解釋下tabBar是表示“底部 tab 欄的表現”；
color—>tab 上的文字預設顏色；
selectedColor—>tab 上的文字選中時的顏色；
borderStyle—>tabbar上邊框的顏色， 僅支援 black / white；
list—>tab 的列表，最少2個、最多5個 tab；
list包含的內容：
selectedIconPath—>選中時的圖片路徑，不支援網路圖片。
iconPath—>圖片路徑，不支援網路圖片。
pagePath—>頁面路徑，必須在 pages 中先定義。
text—>底部導航欄上的指示文字。
注：上述說的圖片指的是導航欄上顯示的小塊圖片，有個非常值得推薦的導航圖片地址：

另外對於上述的tabBar功能可以在官網上看到更加詳細的說明，
網站地址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html