頁麵寫(xie) 好了，總感覺哪裏不爽，對，就是那，每個(ge) 頁麵的標題都一樣，都是 Wechat

cou 呀 真cou, 那咱就單獨說說，如何設置 頁麵標題。

設置頁麵標題 ，相當的簡單，

找到所在頁麵的目錄，新建一個(ge) json 文件，比如我們(men) 上一次建造的 test 頁麵

我們(men)  找到 pages/test/ 目錄 新建一個(ge) test.json 文件 加入如下代碼

view plain co

二：設置底部導航

好了 小程序的頭部標題 設置好了，我們(men) 來說說底部導航欄是如何實現的。

我們(men) 先來看個(ge) 效果圖

這裏，我們(men) 添加了三個(ge) 導航圖標，因為(wei) 我們(men) 有三個(ge) 頁麵，微信小程序最多能加5個(ge) 。

那他們(men) 是怎麽(me) 出現怎麽(me) 著色的呢？兩(liang) 步就搞定！

1. 圖標準備

阿裏圖標庫  https://www.iconfont.cn/collections/show/29

我們(men) 進入該網站，鼠標滑到一個(ge) 喜歡的圖標上麵  點擊下方的 下載按鈕

在彈出框中 選擇了 倆(lia) 個(ge) 不同顏色的 圖標  選擇64px大小即可，我選擇的是png  然後下載下來 起上別名 

將上述起好名字的圖標 保存到 小程序 項目目錄中 新創建的 images 文件夾中，準備工作就做好了

2. 更改配置文件

我們(men) 找到項目根目錄中的配置文件 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  底部導航邊框的樣色（注意 這裏如果沒有寫(xie) 入樣式 會(hui) 導致 導航框上邊框會(hui) 出現默認的淺灰色線條）

list   導航配置數組

selectedIconPath 選中時 圖標路徑

iconPath 未選擇時 圖標路徑

pagePath 頁麵訪問地址

text  導航圖標下方文字

如果要改變更詳細的樣式 請參看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

好了，保存 編譯  就可以看到上麵的效果了。