前幾天有人在公眾號(hào)留言問(wèn)我，上面的小程序界面是如何做到的？
想了想，決定把這個(gè)例子結(jié)合進(jìn)來(lái)，一起分享給大家。

通過(guò)上一次的學(xué)習(xí)——《開(kāi)發(fā)小程序必備知識(shí)基礎(chǔ)》，相信大家都了解了小程序框架中主要包含了wxml、wxss和js三類文件，分別用于描述頁(yè)面內(nèi)組件元素、屬性及動(dòng)作交互。

事實(shí)上，小程序框架中還存在第四類文件——json配置文件，主要用于配置小程序的窗口表現(xiàn)、導(dǎo)航欄、底部菜單等。

帶著問(wèn)題，我們先來(lái)學(xué)習(xí)一下json配置文件。

什么是json配置文件?

Json文件分為app.json和page.json兩種，分別是對(duì)小程序的全局配置文件和頁(yè)面配置文件，每個(gè)小程序至少包含一個(gè)app.json。
而page.json并非必需的，我們可以視情況進(jìn)行添加，它將會(huì)覆蓋app.json中的配置信息，從而使當(dāng)前頁(yè)面擁有新的頁(yè)面配置。

Json文件主要用于配置頁(yè)面路徑（也稱為路由）、窗口表現(xiàn)（如導(dǎo)航欄顏色等）、底部菜單、網(wǎng)絡(luò)超時(shí)時(shí)間等。

App.json包含的配置項(xiàng)如下：

*實(shí)際開(kāi)發(fā)中，前三項(xiàng)通常需要進(jìn)行配置，所以下文將進(jìn)行重點(diǎn)講解。

01 app.json的page參數(shù)

小程序增加/刪除頁(yè)面都必須對(duì)app.json進(jìn)行更新修改，新版本開(kāi)發(fā)者工具在增加新頁(yè)面時(shí)將會(huì)自動(dòng)在app.json中添加新的頁(yè)面路由。
高坑預(yù)警：開(kāi)發(fā)過(guò)程中除非必須，否則建議不要進(jìn)行關(guān)鍵文件刪除動(dòng)作，容易引起IDE報(bào)錯(cuò)。

如小程序包含a頁(yè)面也b頁(yè)面，他們之下的文件分別以aa或bb命名，如aa.js、aa.wxml、bb.wxss等，那么app.json中的頁(yè)面配置如下：

“pages”:[
    “pages/a/aa”,
    “pages/b/bb”
]

高坑預(yù)警：pages中的第一項(xiàng)代表小程序首頁(yè)，且必須在tabbar中，否則會(huì)導(dǎo)致tabbar不顯示（此時(shí)IDE不會(huì)報(bào)錯(cuò)）。

02 app.json的tabbar參數(shù)

▲
底部菜單真機(jī)效果

通常在小程序中，需要借助底部菜單來(lái)實(shí)現(xiàn)不同頁(yè)面的切換，這時(shí)我們便需要對(duì)tabbar進(jìn)行配置。

▲
點(diǎn)開(kāi)可查看大圖

如上，是官方文檔對(duì)于tabbar的參數(shù)描述。
值得注意的是，盡管官方文檔中color、selectedColor、backgroundColor和list均屬于必填項(xiàng)，但實(shí)際上如對(duì)tabbar無(wú)特別的視覺(jué)要求，僅填寫list即可。

list參數(shù)用于配置菜單欄中每個(gè)按鈕的跳轉(zhuǎn)路徑、文本說(shuō)明、樣式和被選中時(shí)的樣式，前兩項(xiàng)屬于必填項(xiàng)，后兩項(xiàng)選填，只能綁定本地圖片。
list從類型上來(lái)講是一個(gè)數(shù)組，可配置2-5個(gè)tab（即菜單按鈕），tab的順序與list中的順序一致。

list的寫法：整個(gè)數(shù)組使用中括號(hào)[]包起來(lái)，數(shù)組中每一項(xiàng)用花括號(hào){}包起來(lái)，每一項(xiàng)采用類似鍵值對(duì)的形式，均需英文引號(hào)括起，項(xiàng)與項(xiàng)之間使用英文逗號(hào)隔開(kāi)。如下為示范：

   "tabBar": {
     "list": [{
       "pagePath": "pages/aa/aa",
      "text":  "首頁(yè)"
    },{
      "pagePath":  "pages/index/index",
       "text": "索引"
     }]
   }

Tips :tabbar默認(rèn)位置為底部（bottom），可通過(guò)設(shè)置position的值為top使tabbar在小程序頂部顯示，此時(shí)tabbar將不顯示icon（按鈕圖標(biāo)）。

03 app.json的window參數(shù)

window參數(shù)用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。
常用參數(shù)如：
導(dǎo)航欄標(biāo)題navigationBarTitleText
下拉刷新enablePullDownRefresh

講到這里，我們回到文首的問(wèn)題：
如何讓小程序頂部不再非黑即白？
如何讓界面更彰顯創(chuàng)意、別具一格呢？

答案很簡(jiǎn)單，我們只需將app.json中window的navigationStyle值設(shè)置為custom，小程序?qū)⒅槐Ａ粲疑辖悄z囊裝的按鈕。

"window":{
     "navigationStyle": "custom" 
  }

▲
可復(fù)制文本
（navigationStyle的默認(rèn)值為”default”）

值得注意的是，此時(shí)整個(gè)小程序界面會(huì)隨之上移，所以在開(kāi)發(fā)過(guò)程中應(yīng)測(cè)試是否對(duì)界面UI等造成影響。

Tips：如果小程序開(kāi)啟custom，應(yīng)注意做好低版本客戶端的兼容。

04 注意點(diǎn)

1、頁(yè)面路徑按照頁(yè)面在小程序包中的文件路徑即可；
2、所有的頁(yè)面文件名稱僅用于代碼中調(diào)用，與用戶前端使用的頁(yè)面標(biāo)題無(wú)關(guān)；
3、同一個(gè)頁(yè)面下的項(xiàng)目文件名稱應(yīng)一致，如aa.wxml、aa.wxss、aa.wxs，在json中進(jìn)行頁(yè)面路徑設(shè)置時(shí)，僅需寫aa即代表了以上幾個(gè)文件合并；
4、頁(yè)面文件名與其下的項(xiàng)目文件名可以不一致，如頁(yè)面文件名為abc，項(xiàng)目文件可以是def.wxml、def.wxss和def.wxs等 ;
5、在json配置頁(yè)面路徑時(shí)，頁(yè)面路徑之間用英文逗號(hào)隔開(kāi)過(guò)行，最后一項(xiàng)不加逗號(hào)，否則會(huì)報(bào)錯(cuò)。

查看原文更多詳細(xì)資料，歡迎關(guān)注公眾號(hào)【一人從零開(kāi)發(fā)小應(yīng)用】（或搜索微信號(hào)：xiaochengxu1038）：

" class="reference-link">

關(guān)于我們

我們?cè)敢饫妹刻斓娜昼姡铝τ趲椭嘈旅襟w人從零基礎(chǔ)到深度掌握小程序；
我們謹(jǐn)希望在新媒體探索上，一路有你，一起成長(zhǎng)；
這，是我們的夢(mèng)想。

如果你認(rèn)同我們，請(qǐng)幫我們轉(zhuǎn)發(fā)，這將是對(duì)我們堅(jiān)持夢(mèng)想最大的鼓勵(lì)！

往期回顧
▼

▲
《開(kāi)發(fā)小程序必備知識(shí)基礎(chǔ)》

▲
《小程序如何給公眾號(hào)做吸粉？》