全局配置 - tabBar配置

tabBar 字段：定義小程序頂部、底部 tab 欄，用以實現頁面之間的快速切換；可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面；

在上面圖中，標注了一些 tabBar 常用的配置項：

• borderStyle：用來控制 tab 欄上方的一條邊線，控制邊線是否需要進行演示或者隱藏；
• backgroundColor：用來配置整條 tab 欄的背景色；
• selectedColor：用來配置 tabBar 被激活時對應的文字顏色；
• color：用來配置 tabBar 沒有被激活時文字的顏色；
• list：list 是一個數組，數組中每一項都是一個對象，在對象中可以配置 selectedIconPath、pagePath、iconPath、text；selectedIconPath 表示當對應的 tabBar 被激活時對應 icon 的路徑，pagePath 表示當對應的 tabBar 被激活時需要跳轉的頁面路徑，iconPath 用來配置當前 tabBar 沒有被激活時對應 icon 的路徑，text 用來定義每個 tabBar 對應的文字是什么；

注意事項：tab 按數組的順序排序。list 配置最少配置 2 個，最多 5 個；可以通過官方文檔：tabBar 配置項來學習進行相關配置；

打開微信開發者工具，選擇根目錄下的 app.json 文件，由于 tabBar 主要用于頁面間的切換，這里我們現在 pages 字段中創建好對應的頁面信息：

app.json 中的 tabBar 字段和 pages 字段是同級的，所以在 app.json 中添加這個字段：

"tabBar": {"selectedColor": "#f3514f","color": "#666","borderStyle":"black","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "/assets/tabbar/index.png","selectedIconPath": "/assets/tabbar/index-active.png"},{"pagePath": "pages/cate/cate","text": "分類","iconPath": "/assets/tabbar/cate.png","selectedIconPath": "/assets/tabbar/cate-active.png"},{"pagePath": "pages/cart/cart","text": "購物車","iconPath": "/assets/tabbar/cart.png","selectedIconPath": "/assets/tabbar/cart-active.png"},{"pagePath": "pages/profile/profile","text": "我的","iconPath": "/assets/tabbar/profile.png","selectedIconPath": "/assets/tabbar/profile-active.png"}]}

這里 tabbar 需要使用一些圖片資源，可以從 GitCode 中下載相關圖片資源（圖片資源來自尚硅谷，侵權刪除，無意冒犯），下載后的圖片資源放置在根目錄的 assets 文件夾中，路徑地址為 ./assets/tabbar/，具體如下：

參考視頻：尚硅谷微信小程序開發教程