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