微信小程式從零開始開發步驟（三）底部導航欄

上一章節，我們分享瞭如何建立一個新的頁面和設定頁面的標題，這一章我們來聊聊底部導航欄是如何實現的。即點選底部的導航，會實現不同對應頁面之間的切換。

我們先來看個我們要實現的底部導航欄的效果圖：（三個導航圖示示例，微信小程式最多能加5個）

1. 圖示準備

阿里圖示庫 http://www.iconfont.cn/collections/show/29

在這個網站上下載一些自己要用到的圖示，比如人員頭像，home主頁等一些常用的圖示，直接點選下載儲存到本地，修改一下命名。也可以使用UI準備好的圖示。

回到專案裡，新建一個images資料夾，將剛剛下載好的圖示放在資料夾底下備用，將上述起好名字的圖示 儲存到 小程式 專案目錄中 新建立的 images 資料夾中，準備工作就做好了。

2. 新增配置檔案

我們找到專案根目錄中的配置檔案 app.json 加入如下配置資訊（app.json檔案用來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。）

   "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/index/index",
      "text": "首頁"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/test/test",
      "text": "測試"
    }
  ]
}

以上只是基礎的部分，當然了小程式的官方文件提供了更多的豐富的元件和樣式
參考文件：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK，結束，儲存 編譯 就可以實現小程式的經典的底部導航效果了

github:https://github.com/wangxiaoting666/myproject

==============
附錄：一份完整程式碼（可忽略不計）

{
  "pages":[
        "pages/index/index",
        "pages/category/category",
        "pages/topic/topic",        
        "pages/user/user",
        "pages/logs/logs"
  ],
  "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "WeiCMS",
        "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#8c8c8c",
    "selectedColor": "#f4645f",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }, 
    {
      "pagePath": "pages/category/category",      
      "text": "分類",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/topic/topic",      
      "text": "話題",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/user/user",      
      "text": "我的",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }  
    ],
    "position": "bottom"
  }  
}

下一章：微信小程式從零開始開發步驟（四）微信小程式頁面自定義分享onShareAppMessage

文末福利：

福利一：前端，Java，產品經理，微信小程式，Python等資源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程式入門與實戰全套詳細視訊教程

原文作者：祈澈姑娘；原文連結：https://www.jianshu.com/u/05f416aefbe1
創作不易，轉載請告知；90後前端妹子，愛程式設計，愛運營，愛折騰。

閱讀連結：
微信小程式從零開始開發步驟（一）搭建開發環境https://www.jianshu.com/p/0ff8c3b2f59f
微信小程式從零開始開發步驟（二）建立小程式頁面https://www.jianshu.com/p/fe0db14e2869
微信小程式從零開始開發步驟（三）底部導航欄https://www.jianshu.com/p/89a63dc99839
微信小程式從零開始開發步驟（四）自定義分享的功能https://www.jianshu.com/p/65d9bdb8051d
微信小程式從零開始開發步驟（五）輪播圖https://www.jianshu.com/p/bc3261557031
微信小程式從零開始開發步驟（六）4種頁面跳轉的方法https://www.jianshu.com/p/01a5a6a0fdb9
微信小程式從零開始開發步驟（七）引入外部js 檔案https://www.jianshu.com/p/5f2cde64d7f2
微信小程式從零開始開發步驟（八）引入框架WeUI：https://www.jianshu.com/p/fd423b6e17be