微信小程序開發 一 tabbar圖標和顏色

前期準備 ：註冊，填材料，驗證等等：

https://mp.weixin.qq.com

1.瀏覽一遍簡易教程，下載相應的開發工具

寫一個小例子

點擊左側的 “編輯”-》點擊右側代碼裏的 app.json 修改爲

{
  "pages":[
    "pages/fightings/home", 
    "pages/publish/home", 
    "pages/mine/home"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/fightings/home",
        "text": "挑戰"
      },
      {
        "pagePath": "pages/publish/home",
        "text": "發佈"
      },
      {
        "pagePath": "pages/mine/home",
        "text": "我"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "i挑戰",
    "navigationBarTextStyle":"black"
  }
}

說明

pages就是我們有多少個頁面
tabbar是頁面底部的tab
window是頁面的一些屬性

這個樣子太醜了 我們先來美化一下這個tab

{
  "pages":[
    "pages/home/home",    
    "pages/fightings/home", 
    "pages/mine/home"
  ],
  "tabBar": {
    "color":"#666666",
    "selectedColor":"#f10b2e",

    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "大廳",
        "iconPath": "./res/icon_tab_home.png",
        "selectedIconPath": "./res/icon_tab_home_hl.png"
        },
        {
        "pagePath": "pages/fightings/home",
        "text": "挑戰",
        "iconPath":"./res/icon_tab_fighting.png",
        "selectedIconPath":"./res/icon_tab_fighting_hl.png"
      },

      {
        "pagePath": "pages/mine/home",
        "text": "我",
        "iconPath": "./res/icon_tab_me.png",
        "selectedIconPath": "./res/icon_tab_me_hl.png"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "i挑戰",
    "navigationBarTextStyle":"black"
  }
}

說明

字段都比較簡單就不詳細說了 其中 “iconPath”: “./res/icon_tab_me.png”是圖片的路徑

自己在項目裏創建一個res文件夾，然後放入需要的圖片

tab 好看一點了吧

今天先到這裏吧。。。