pages.json配置文件詳解

1. 前言

pages.json 配置文件我們在前面小節中多次講過，配置頁面路由、進行頁面的全局配置和頁面配置都可以在 pages.json 文件中配置。屬于我們開發過程中經常會操作的文件。

但pages.json 文件的功能可不止這些，本小節我們來詳細看一下 pages.json 配置文件中的其他配置項。

2. condition 配置項

condition 是與 pages同級的配置項，意義是啟動模式配置，只在開發期間生效，那既然項目上線后又不起作用，為什么會用到 condition 啟動模式配置呢？主要是方便我們進行頁面測試時看到預覽效果。

比如我們開發的頁面是嵌套在N個頁面以后，每次測試需要層層跳轉才能看到預覽效果，這樣就會極大的拉低我們開發效率，這時候condition啟動模式配置就派上用場了。

可以直接將當前開發的頁面設置為啟動頁面，測試的時候，每次重新運行項目，當前開發的頁面都會作為第一個頁面顯示出來，再也不同點擊多次才能看到頁面效果了。

實例：

// condition 是與 tabBar 同級的配置項
"condition": {
        "current": 0, //當前激活的模式（list 的索引項）
        "list": [
{
                    "name": "index", //模式名稱 
                    "path" : "pages/index/index",//啟動頁面(我們需要調試頁面的路徑)
 
                    "query": "interval=4000&autoplay=false" //啟動參數，在頁面的onLoad函數里面得到
 
          },
          {
                    "name": "about",                    
"path" : "pages/about/about",
                    "query": "" /        
}
 
        ]
}

2.1 list說明

list是一個數組列表，里面存放著我們需要調試的頁面對象，我們將想要調試的頁面都放在 list 數組列表中。

想要調試哪個頁面，就將這個頁面對象所對應的的 list 索引寫在 current 屬性的后面、這樣我們調試的時候，就會將這個頁面作為項目的啟動頁面了。

比如 "current": 1，current 屬性后面跟著 1，也就是 list 數組列表中索引為 1 的頁面對象，我們調試的時候，list 數組中的第 2 個頁面對象就會作為項目的初始啟動頁面。

Tips：
我們一般直接在 App 里真機調試運行，這樣可以直接打開配置的頁面，如果在微信開發者工具中調試需要手動改變編譯模式。

3. tabBar 配置項

tabBar 是與 condition、pages同級的配置項，當應用需要顯示 tab 欄時，我們只需要通過配置 pages.json 配置文件中的 tabBar 屬性，就可以控制項目中 tab 欄的顯示。

不能只配置1個 tab 項，只能配置最少2個，最多5個 tab 項。tab 欄從左到右的顯示順序與 tabBar 中 list 數組中 tab 項的排序有關。接下來我們來看看怎樣來設置 tabBar 配置項。

實例：

"tabBar": {
  "color": "#8B8B8B", // 必須設置的選項，表示 tab 文字默認的顏色，也是沒有選中 tab 時文字顯示的顏色
  "selectedColor":  "#EA5149", // 必須設置的選項，表示選中 tab 時文字顯示的顏色
  "backgroundColor": "#ffffff",// 必須設置的選項，表示 tab 的背景顏色
  "borderStyle": "black",// 可選設置，表示 tab 上邊框的顏色，目前只支持 black/white
 
  "list": [{
    "text": "首頁", // 表示第1個 tab 項的顯示文字
    "pagePath": "pages/index/main", // 表示第1個 tab 項的頁面路徑
    "iconPath": "static/images/danhuang.png", // 表示第1個 tab 項未選中時所顯示的圖標路徑
    "selectedIconPath": "static/images/danhuang-active.png"// 表示第1個 tab 項被選中時所顯示的圖標路徑
  },
  {
    "text":"記錄",
    "pagePath":"pages/record/main",
    "iconPath": "static/images/huasheng.png",
    "selectedIconPath": "static/images/huasheng-active.png"
  },
  {
    "text": "我的",
    "pagePath": "pages/me/main",
    "iconPath": "static/images/binggan.png",
    "selectedIconPath": "static/images/binggan-active.png"
  }]
}

3.1 list說明

list是一個用來存放 tab 項的數組列表，將所有的 tab 項都放在 list 數組列表中。

3.2 selectedColor 說明

selectedColor 是 tab 上的文字選中時的顏色，要注意這里只能是十六進制的顏色，比如白色要寫成#FFFFFF，不能寫成white

3.3 pagePath 說明

pagePath 表示點擊 tab 時，需要跳轉的頁面路徑，這個頁面路徑必須要先在 pages 配置項中定義，不然會報錯。

3.4 圖標路徑說明

我們每個 tab 項需要設置兩個圖標，一個是未選中時顯示的圖標路徑 iconPath，一個是選中時顯示的圖標路徑 selectedIconPath。

這些圖標我們一般需要自己去下載，在這里給大家推薦一個免費的矢量圖標平臺，這里面素材挺全的，基本可以滿足我們的開發需求。

Iconfont 平臺
網址：https://www.iconfont.cn

這個網址建議收藏一下，不僅僅是 tab 圖標，我們日常項目開發需要用到的圖標，在這個平臺上面基本都可以找到。

將圖標下載下來之后，我們將圖標放到項目根目錄下面的 static 文件夾下面，然后就可以在 pages.json配置文件中引用了，引用的時候 static 前面不要加 /，不然圖片顯示不出來。

正確引用方式：
"iconPath": “static/images/binggan.png"
錯誤引用方式：
"iconPath”: “/static/images/binggan.png”

Tips：
tab 頁面展示過一次以后就會保存在內存中，再次切換 tab 時，只會觸發頁面的 onShow 函數，不會再觸發 onLoad 函數，這個開發的時候需要注意。

4. 小結

本小節我們主要講了pages.json 配置文件中，除了配置頁面路由、進行頁面的全局配置和頁面配置之外的其他配置項。本小節我們需要掌握的重點如下：

• 掌握 condition 配置項的代碼實例，了解condition 啟動模式配置在開發過程中的應用；
• 掌握 tabBar 配置項的用法，以及配置 tabBar 時需要注意的一些地方。