微信小程式開發 一 tabbar圖示和顏色
阿新 • • 發佈:2019-01-10
前期準備 :註冊,填材料,驗證等等:
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 好看一點了吧
今天先到這裡吧。。。