準(zhǔn)備工作
14-46-45.jpg
- 創(chuàng)建my頁(yè)面（基礎(chǔ)工作不在復(fù)述，參照上一篇）；
- 創(chuàng)建圖片文件夾images，及子目錄tabBar；
- 前往http://iconfont.cn，下載任意兩個(gè)icon及對(duì)應(yīng)的高亮顏色版，60px，保存到tabBar目錄下；
改變下導(dǎo)航欄
14-55-40.jpg
在app.json中添加window相關(guān)配置項(xiàng)：
注意：json中是不能加注釋的，這里注釋只是為了說(shuō)明，請(qǐng)自行刪除
"window":{
"navigationBarTitleText":"小程序?qū)W習(xí)筆記", //導(dǎo)航欄標(biāo)題
"navigationBarTextStyle":"black", //標(biāo)題顏色，默認(rèn)black，可選white
"navigationBarBackgroundColor":"#eee", //導(dǎo)航欄背景色，默認(rèn)#000
//下面影響的是下拉刷新的部分，還沒(méi)研究出怎么實(shí)現(xiàn)
"backroundColor":"#555", //窗口背景色，默認(rèn)#fff
"backroundTextStyle":"dark", //下拉字體樣式，默認(rèn)dark，可選light
"enablePullDownRefresh": true //是否支持下拉刷新，默認(rèn)false
}
寫個(gè)tabBar吧
15-07-57.jpg
tabBar最少2個(gè)，最多5個(gè)tab
在app.json中添加tabBar配置項(xiàng)：
"tabBar":{
"color":"#999", //字體顏色，必填
"selectedColor":"#56abe4", //選中狀態(tài)字體顏色，必填
"backroundColor":"#fff", //背景色，必填
"borderStyle":"white", //上邊框顏色，非必填，默認(rèn)black，可選white
//list數(shù)組，為每一個(gè)tab的配置，必填。tab排序與數(shù)組排序一致
"list":[
{
"pagePath":"pages/index/index", //頁(yè)面路徑
"iconPath":"images/tabBar/article.png", //icon路徑
"selectedIconPath":"images/tabBar/articleHL.png", //選中狀態(tài)icon路徑
"text":"筆記" //文字
},
{
"pagePath":"pages/my/my",
"iconPath":"images/tabBar/my.png",
"selectedIconPath":"images/tabBar/myHL.png",
"text":"我的"
}
]
}
page的json
15-19-35.jpg
page也是支持json文件的，不過(guò)只能配置window相關(guān)的，因此無(wú)需寫window這個(gè)鍵
例如，在my.json添加下面代碼，改變了標(biāo)題欄文本為“我的”，而不是“小程序?qū)W習(xí)筆記”。
{
"navigationBarTitleText":"我的"
}
json配置項(xiàng)里還剩下networkTimeOut 和 debug，以后用到再說(shuō)吧
