前幾天有人在公眾號留言問我，上面的小程序界面是如何做到的？
想了想，決定把這個例子結合進來，一起分享給大家。

通過上一次的學習——《開發小程序必備知識基礎》，相信大家都了解了小程序框架中主要包含了wxml、wxss和js三類文件，分別用于描述頁面內組件元素、屬性及動作交互。

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

帶著問題，我們先來學習一下json配置文件。

什么是json配置文件?

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

Json文件主要用于配置頁面路徑（也稱為路由）、窗口表現（如導航欄顏色等）、底部菜單、網絡超時時間等。

App.json包含的配置項如下：

*實際開發中，前三項通常需要進行配置，所以下文將進行重點講解。

01 app.json的page參數

小程序增加/刪除頁面都必須對app.json進行更新修改，新版本開發者工具在增加新頁面時將會自動在app.json中添加新的頁面路由。
高坑預警：開發過程中除非必須，否則建議不要進行關鍵文件刪除動作，容易引起IDE報錯。

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

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

高坑預警：pages中的第一項代表小程序首頁，且必須在tabbar中，否則會導致tabbar不顯示（此時IDE不會報錯）。

02 app.json的tabbar參數

▲
底部菜單真機效果

通常在小程序中，需要借助底部菜單來實現不同頁面的切換，這時我們便需要對tabbar進行配置。

▲
點開可查看大圖

如上，是官方文檔對于tabbar的參數描述。
值得注意的是，盡管官方文檔中color、selectedColor、backgroundColor和list均屬于必填項，但實際上如對tabbar無特別的視覺要求，僅填寫list即可。

list參數用于配置菜單欄中每個按鈕的跳轉路徑、文本說明、樣式和被選中時的樣式，前兩項屬于必填項，后兩項選填，只能綁定本地圖片。
list從類型上來講是一個數組，可配置2-5個tab（即菜單按鈕），tab的順序與list中的順序一致。

list的寫法：整個數組使用中括號[]包起來，數組中每一項用花括號{}包起來，每一項采用類似鍵值對的形式，均需英文引號括起，項與項之間使用英文逗號隔開。如下為示范：

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

Tips :tabbar默認位置為底部（bottom），可通過設置position的值為top使tabbar在小程序頂部顯示，此時tabbar將不顯示icon（按鈕圖標）。

03 app.json的window參數

window參數用于設置小程序的狀態欄、導航條、標題、窗口背景色。
常用參數如：
導航欄標題navigationBarTitleText
下拉刷新enablePullDownRefresh

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

答案很簡單，我們只需將app.json中window的navigationStyle值設置為custom，小程序將只保留右上角膠囊裝的按鈕。

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

▲
可復制文本
（navigationStyle的默認值為”default”）

值得注意的是，此時整個小程序界面會隨之上移，所以在開發過程中應測試是否對界面UI等造成影響。

Tips：如果小程序開啟custom，應注意做好低版本客戶端的兼容。

04 注意點

1、頁面路徑按照頁面在小程序包中的文件路徑即可；
2、所有的頁面文件名稱僅用于代碼中調用，與用戶前端使用的頁面標題無關；
3、同一個頁面下的項目文件名稱應一致，如aa.wxml、aa.wxss、aa.wxs，在json中進行頁面路徑設置時，僅需寫aa即代表了以上幾個文件合并；
4、頁面文件名與其下的項目文件名可以不一致，如頁面文件名為abc，項目文件可以是def.wxml、def.wxss和def.wxs等 ;
5、在json配置頁面路徑時，頁面路徑之間用英文逗號隔開過行，最后一項不加逗號，否則會報錯。

查看原文更多詳細資料，歡迎關注公眾號【一人從零開發小應用】（或搜索微信號：xiaochengxu1038）：

" class="reference-link">

關于我們

我們愿意利用每天的三分鐘，致力于幫助更多新媒體人從零基礎到深度掌握小程序；
我們謹希望在新媒體探索上，一路有你，一起成長；
這，是我們的夢想。

如果你認同我們，請幫我們轉發，這將是對我們堅持夢想最大的鼓勵！

往期回顧
▼

▲
《開發小程序必備知識基礎》

▲
《小程序如何給公眾號做吸粉？》