微信小程序中的tabBar設置

我們先來看一份圖，這個設置在官方文檔中已經寫得很清楚了，我只是做一個總結

注：我寫注釋是為了方便說明，在小程序中的json文件中是不能用注釋的
這個tabBar屬於全局屬性，因此就在全局配置文件app.json中配置

1.tabBar的配置

"color": "#8a8a8a",
    "selectedColor": "#f40",//選中的顏色
    "backgroundColor": "#ffffff",//背景色
    "borderStyle": "black",//邊界線的顏色
    "position":"top",//位置，是在上邊。還是選擇在下邊，如果選擇top，就不會顯示圖標
    "list": [//組件的清單
      {
        "pagePath": "page/component/index",//頁面路徑
        "text": "組件",//組件上顯示的文字 
        "iconPath": "img/compont_un.png",//默認圖標
        "selectedIconPath": "img/compont_on.png"//選中后的圖標
      },
      {
        "pagePath": "page/API/index",
        "text": "API",
        "iconPath": "img/API_un.png",
        "selectedIconPath": "img/API_on.png"
      },
      {
        "pagePath": "page/persion/index",
        "text": "我的",
        "iconPath": "img/我的_un.png",
        "selectedIconPath": "img/我的_on.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "img/日志.png",
        "selectedIconPath": "img/日志_on.png"
      }
    ]
  },

最后再加一張圖，如果你設置了在頂部顯示，效果如下：