微信小程序從入門到實踐（一）-設置底部導航欄

微信小程序最多能加5個導航圖標。因為我們只有兩個默認頁面，這里我們就添加兩個導航圖標

先看我們要達到的就是這么一個效果

 

 接下來開始實踐：

（1）准備工作

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

 （二）更改配置文件

每個小程序頁面都是由四個文件組成（json、WXML、wxss、js）。

app.js 為整個小程序的入口文件，app.json 為整個小程序的全局配置文件，app.wxss 為全局樣式文件。

我們找到項目根目錄中的配置文件 app.json 加入如下配置信息

app.json 文件如下：

"tabBar": {
    "color": "#858585",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "/images/user.png",
        "selectedIconPath": "/images/user.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/images/star.png",
        "selectedIconPath": "/images/happy.png"
      }
    ]
  }

保存 編譯 就可以看到上面的效果了。

 主要了解下對應屬性信息

對應的屬性信息

　　tabBar 指底部的 導航配置屬性，就是是配置底部兩個菜單的

       window 是配置整個小程序窗口風格的；

　　pages 是整個小程序的頁面路徑；

　　project.config.json 為項目配置文件；

　　pages/ 下面為具體的頁了，比如 index 代表首頁，其由四個文件組成，json 文件為可選文件，可有可無。

　　color 未選擇時 底部導航文字的顏色

　　selectedColor 選擇時 底部導航文字的顏色

　　borderStyle 底部導航邊框的樣色(注意 這里如果沒有寫入樣式 會導致 導航框上邊框會出現默認的淺灰色線條)

　　list 導航配置數組

　　selectedIconPath 選中時 圖標路徑

　　iconPath 未選擇時 圖標路徑

　　pagePath 頁面訪問地址

　　text 導航圖標下方文字

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

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

 最后看看效果圖