小程序開發----底部導航欄

1、下載矢量圖標

阿里的矢量圖官網
可以輸入色號，選擇符合自己小程序主題的顏色。我選擇的是有填充和沒有填充的圖片，爲了區別點擊與沒有點擊的行爲。

2、新建image文件夾存儲照片

回到項目裏，新建一個images文件夾，將剛剛下載好的圖標放在文件夾底下備用，將上述起好名字的圖標 保存到 小程序 項目目錄中 新創建的 images 文件夾中，準備工作就做好了。

3、添加配置文件

//app.json
{ 
  "pages": [
  "pages/user/user",
  "pages/order/order",
  "pages/menu/menu",
  "pages/goods/goods"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "WeiCMS",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#8c8c8c",
    "selectedColor": "#3CC472",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/menu/menu",
      "text": "菜單",
      "iconPath":"images/manage.png",
      "selectedIconPath":"images/manage_fill.png"
    }, 
    {
      "pagePath": "pages/goods/goods",      
      "text": "購物車",
      "iconPath":"images/goods.png",
      "selectedIconPath":"images/goods_fill.png"
    },
    {
      "pagePath": "pages/order/order",      
      "text": "訂單",
      "iconPath":"images/order.png",
      "selectedIconPath":"images/order_fill.png"
    },
    {
      "pagePath": "pages/user/user",      
      "text": "我的",
      "iconPath":"images/mine.png",
      "selectedIconPath":"images/mine_fill.png"
    }  
    ],
    "position": "bottom"
  } 
 
}

4、界面效果

5、遇到的問題

1.[“tabBar”][“list”][2] 未找到
在配置tabBar時注意配置的順序，同時還要注意圖片路徑和頁面路徑的正確性。

2.真機上底部導航欄上的背景色沒有爲默認的白色
tabBar 設置 “backgroundColor”: “white” 時，在安卓手機（7.0）和開發工具（1.02.1802080）均爲正常白底，在 iOS (11.2.5) 上顯示爲黑色。修改成 “backgroundColor”: “#FFFFFF” 後，安卓和 iOS 均正常顯示。參考鏈接

全文參考連接