微信的開發文件裡有，很多人也寫了，自己寫一遍，加深印象罷！

在學習Android的時候，被模仿一個app的介面，實現其UI。而一般來說，總是避免不了導航欄的。

比較大眾化的，就是底部導航欄啦，而實現的方式也是非常的多，如：Fragment+ViewPage Or 來一個RadioGroup Or 以前的TabHost 等~

效果，是一樣或差不多的，而實現手法，是五花八門特色鮮明的！

在微信小程式中，可以說是，一統江山了吧，扔出了一個tabBar~

emmm..沒錯，你需要做的是：找一個漂亮的圖片，給一個導航名，然後選個好看的顏色，再一一對應即可。

就好比，之前學習Android的時候，學的是手動擋的車。現在接觸微信小程式，就好比開著自動擋的車~

那效果是怎麼樣的呢？

先建兩個目錄，待會我們跳轉用！

在app.json中，別忘了要新增目錄！

好，幹正事！

"tabBar": {
    "list": [{
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  }

emmm...這裡“list”裡，現在只有一個標籤的內容，我們來三個吧！

差點忘了我們要放圖示~那怎麼把圖片放進來呢？

 在目錄裡建立資料夾，然後放入圖片，開發工具就會自動更新了，關於圖示，可以直接去網上搜 阿里巴巴圖示庫 ，豐富的圖示供你下載！

補全程式碼：

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "微笑",
      "iconPath": "pages/index/img/Smile.png",
      "selectedIconPath": "pages/index/img/Smile_select.png"
    },
    {
      "pagePath": "pages/tabOne/tabOne",
      "text": "購物車",
      "iconPath": "pages/index/img/cart.png",
      "selectedIconPath": "pages/index/img/cart_select.png"
    },
    {
      "pagePath": "pages/tabTwo/tabTwo",
      "text": "所有",
      "iconPath": "pages/index/img/all.png",
      "selectedIconPath": "pages/index/img/all_select.png"
    }]
  }
 

不過好像字木有變化哦！

還要新增一行程式碼！

就完成啦！

即使是自動擋的車，那不僅僅要會打方向、踩油門，還要了解每個按鈕的作用，這樣開起車來，才更得心應手！

“菜是原罪！”

學習，需要再加把勁！