頁(yè)面寫好了,總感覺哪里不爽,對(duì),就是那,每個(gè)頁(yè)面的標(biāo)題都一樣,都是 Wechat
cou 呀 真cou, 那咱就單獨(dú)說說,如何設(shè)置 頁(yè)面標(biāo)題。
設(shè)置頁(yè)面標(biāo)題 ,相當(dāng)?shù)暮?jiǎn)單,
找到所在頁(yè)面的目錄,新建一個(gè) json 文件,比如我們上一次建造的 test 頁(yè)面
我們 找到 pages/test/ 目錄 新建一個(gè) test.json 文件 加入如下代碼
{
"navigationBarTitleText": "霸氣側(cè)漏"
}
view plain co
效果如下:二:設(shè)置底部導(dǎo)航
好了 小程序的頭部標(biāo)題 設(shè)置好了,我們來(lái)說說底部導(dǎo)航欄是如何實(shí)現(xiàn)的。
我們先來(lái)看個(gè)效果圖
這里,我們添加了三個(gè)導(dǎo)航圖標(biāo),因?yàn)槲覀冇腥齻€(gè)頁(yè)面,微信小程序最多能加5個(gè)。
那他們是怎么出現(xiàn)怎么著色的呢??jī)刹骄透愣ǎ?/font>
阿里圖標(biāo)庫(kù) http://www.iconfont.cn/collections/show/29
我們進(jìn)入該網(wǎng)站,鼠標(biāo)滑到一個(gè)喜歡的圖標(biāo)上面 點(diǎn)擊下方的 下載按鈕
在彈出框中 選擇了 倆個(gè)不同顏色的 圖標(biāo) 選擇64px大小即可,我選擇的是png 然后下載下來(lái) 起上別名
將上述起好名字的圖標(biāo) 保存到 小程序 項(xiàng)目目錄中 新創(chuàng)建的 images 文件夾中,準(zhǔn)備工作就做好了
我們找到項(xiàng)目根目錄中的配置文件 app.json 加入如下配置信息
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle":"white",
"list": [{
"selectedIconPath": "images/111.png",
"iconPath": "images/11.png",
"pagePath": "pages/index/index",
"text": "首頁(yè)"
}, {
"selectedIconPath": "images/221.png",
"iconPath": "images/22.png",
"pagePath": "pages/logs/logs",
"text": "日志"
}, {
"selectedIconPath": "images/331.png",
"iconPath": "images/33.png",
"pagePath": "pages/test/test",
"text": "開心測(cè)試"
}]
},
解釋一下 對(duì)應(yīng)的屬性信息
tabBar 指底部的 導(dǎo)航配置屬性
color 未選擇時(shí) 底部導(dǎo)航文字的顏色
selectedColor 選擇時(shí) 底部導(dǎo)航文字的顏色
borderStyle 底部導(dǎo)航邊框的樣色(注意 這里如果沒有寫入樣式 會(huì)導(dǎo)致 導(dǎo)航框上邊框會(huì)出現(xiàn)默認(rèn)的淺灰色線條)
list 導(dǎo)航配置數(shù)組
selectedIconPath 選中時(shí) 圖標(biāo)路徑
iconPath 未選擇時(shí) 圖標(biāo)路徑
pagePath 頁(yè)面訪問地址
text 導(dǎo)航圖標(biāo)下方文字
如果要改變更詳細(xì)的樣式 請(qǐng)參看
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
好了,保存 編譯 就可以看到上面的效果了。