pages.json配置文件詳解

1. 前言

pages.json 配置文件我們?cè)谇懊嫘」?jié)中多次講過，配置頁面路由、進(jìn)行頁面的全局配置和頁面配置都可以在 pages.json 文件中配置。屬于我們開發(fā)過程中經(jīng)常會(huì)操作的文件。

但pages.json 文件的功能可不止這些，本小節(jié)我們來詳細(xì)看一下 pages.json 配置文件中的其他配置項(xiàng)。

2. condition 配置項(xiàng)

condition 是與 pages同級(jí)的配置項(xiàng)，意義是啟動(dòng)模式配置，只在開發(fā)期間生效，那既然項(xiàng)目上線后又不起作用，為什么會(huì)用到 condition 啟動(dòng)模式配置呢？主要是方便我們進(jìn)行頁面測試時(shí)看到預(yù)覽效果。

比如我們開發(fā)的頁面是嵌套在N個(gè)頁面以后，每次測試需要層層跳轉(zhuǎn)才能看到預(yù)覽效果，這樣就會(huì)極大的拉低我們開發(fā)效率，這時(shí)候condition啟動(dòng)模式配置就派上用場了。

可以直接將當(dāng)前開發(fā)的頁面設(shè)置為啟動(dòng)頁面，測試的時(shí)候，每次重新運(yùn)行項(xiàng)目，當(dāng)前開發(fā)的頁面都會(huì)作為第一個(gè)頁面顯示出來，再也不同點(diǎn)擊多次才能看到頁面效果了。

實(shí)例：

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

2.1 list說明

list是一個(gè)數(shù)組列表，里面存放著我們需要調(diào)試的頁面對(duì)象，我們將想要調(diào)試的頁面都放在 list 數(shù)組列表中。

想要調(diào)試哪個(gè)頁面，就將這個(gè)頁面對(duì)象所對(duì)應(yīng)的的 list 索引寫在 current 屬性的后面、這樣我們調(diào)試的時(shí)候，就會(huì)將這個(gè)頁面作為項(xiàng)目的啟動(dòng)頁面了。

比如 "current": 1，current 屬性后面跟著 1，也就是 list 數(shù)組列表中索引為 1 的頁面對(duì)象，我們調(diào)試的時(shí)候，list 數(shù)組中的第 2 個(gè)頁面對(duì)象就會(huì)作為項(xiàng)目的初始啟動(dòng)頁面。

Tips：
我們一般直接在 App 里真機(jī)調(diào)試運(yùn)行，這樣可以直接打開配置的頁面，如果在微信開發(fā)者工具中調(diào)試需要手動(dòng)改變編譯模式。

3. tabBar 配置項(xiàng)

tabBar 是與 condition、pages同級(jí)的配置項(xiàng)，當(dāng)應(yīng)用需要顯示 tab 欄時(shí)，我們只需要通過配置 pages.json 配置文件中的 tabBar 屬性，就可以控制項(xiàng)目中 tab 欄的顯示。

不能只配置1個(gè) tab 項(xiàng)，只能配置最少2個(gè)，最多5個(gè) tab 項(xiàng)。tab 欄從左到右的顯示順序與 tabBar 中 list 數(shù)組中 tab 項(xiàng)的排序有關(guān)。接下來我們來看看怎樣來設(shè)置 tabBar 配置項(xiàng)。

實(shí)例：

"tabBar": {
  "color": "#8B8B8B", // 必須設(shè)置的選項(xiàng)，表示 tab 文字默認(rèn)的顏色，也是沒有選中 tab 時(shí)文字顯示的顏色
  "selectedColor":  "#EA5149", // 必須設(shè)置的選項(xiàng)，表示選中 tab 時(shí)文字顯示的顏色
  "backgroundColor": "#ffffff",// 必須設(shè)置的選項(xiàng)，表示 tab 的背景顏色
  "borderStyle": "black",// 可選設(shè)置，表示 tab 上邊框的顏色，目前只支持 black/white
 
  "list": [{
    "text": "首頁", // 表示第1個(gè) tab 項(xiàng)的顯示文字
    "pagePath": "pages/index/main", // 表示第1個(gè) tab 項(xiàng)的頁面路徑
    "iconPath": "static/images/danhuang.png", // 表示第1個(gè) tab 項(xiàng)未選中時(shí)所顯示的圖標(biāo)路徑
    "selectedIconPath": "static/images/danhuang-active.png"// 表示第1個(gè) tab 項(xiàng)被選中時(shí)所顯示的圖標(biāo)路徑
  },
  {
    "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是一個(gè)用來存放 tab 項(xiàng)的數(shù)組列表，將所有的 tab 項(xiàng)都放在 list 數(shù)組列表中。

3.2 selectedColor 說明

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

3.3 pagePath 說明

pagePath 表示點(diǎn)擊 tab 時(shí)，需要跳轉(zhuǎn)的頁面路徑，這個(gè)頁面路徑必須要先在 pages 配置項(xiàng)中定義，不然會(huì)報(bào)錯(cuò)。

3.4 圖標(biāo)路徑說明

我們每個(gè) tab 項(xiàng)需要設(shè)置兩個(gè)圖標(biāo)，一個(gè)是未選中時(shí)顯示的圖標(biāo)路徑 iconPath，一個(gè)是選中時(shí)顯示的圖標(biāo)路徑 selectedIconPath。

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

Iconfont 平臺(tái)
網(wǎng)址：https://www.iconfont.cn

這個(gè)網(wǎng)址建議收藏一下，不僅僅是 tab 圖標(biāo)，我們?nèi)粘ｍ?xiàng)目開發(fā)需要用到的圖標(biāo)，在這個(gè)平臺(tái)上面基本都可以找到。

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

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

Tips：
tab 頁面展示過一次以后就會(huì)保存在內(nèi)存中，再次切換 tab 時(shí)，只會(huì)觸發(fā)頁面的 onShow 函數(shù)，不會(huì)再觸發(fā) onLoad 函數(shù)，這個(gè)開發(fā)的時(shí)候需要注意。

4. 小結(jié)

本小節(jié)我們主要講了pages.json 配置文件中，除了配置頁面路由、進(jìn)行頁面的全局配置和頁面配置之外的其他配置項(xiàng)。本小節(jié)我們需要掌握的重點(diǎn)如下：

• 掌握 condition 配置項(xiàng)的代碼實(shí)例，了解condition 啟動(dòng)模式配置在開發(fā)過程中的應(yīng)用；
• 掌握 tabBar 配置項(xiàng)的用法，以及配置 tabBar 時(shí)需要注意的一些地方。