[TOC] ## 1.1 JSON配置——`*.json`文件 JSON 是一種數據格式，并不是編程語言，在小程序中，JSON扮演靜態配置的角色。 根目錄中的`app.json`文件為項目的公共配置文件。 代碼清單2-1 app.json文件代碼 ~~~ { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } ~~~ JSON文件在小程序代碼中扮演靜態配置的作用，在小程序運行之前就決定了小程序一些表現，但無法在運行過程中去動態更新JSON 配置文件從而發生對應的變化。 JSON文件都是被包裹在一個大括號中 {}，通過key-value的方式來表達數據。JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。 JSON的值只能是以下幾種數據格式： - **數字**，包含浮點數和整數 - **字符串**，需要包裹在雙引號中 - **Bool值**，true 或者 false - **數組**，需要包裹在方括號中 [ ] - **對象**，需要包裹在大括號中 { } - **Null** >[danger] 其他任何格式都會觸發報錯，例如 JavaScript 中的 undefined 。 >[danger] JSON 文件中無法使用注釋，試圖添加注釋將會引發報錯。 ### 1.1.1 全局配置--`app.json` `app.json`文件用來對微信小程序進行全局配置，決定小程序各個頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。[【官方文檔詳細說明】](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html) :-: app.json 配置項列表 | 屬性 | 類型 | 必填 | 描述 | |--- | --- |--- | --- | | pages | String Array | 是 | 設置頁面路徑 | | window | Object | 否 | 設置默認頁面的窗口表現 | | tabBar | Object | 否 | 設置底部 tab 的表現 | | networkTimeout | Object | 否 | 設置網絡超時時間 | | debug | Boolean | 否 | 設置是否開啟 debug 模式 | 代碼清單3-7 app.json包含了所有配置選項。默認pages字段的第一個頁面路徑為小程序的首頁。 ~~~ { "pages": [ "pages/index/index", // 第一項默認為首頁 "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile":10000 }, "debug": true } ~~~ * **`pages`** 接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。**小程序中新增/減少頁面，都需要對 pages 數組進行修改**。文件名不需要寫文件后綴，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。 * **`window`** 用于設置小程序的狀態欄、導航條、標題、窗口背景色。 :-:  ~~~ { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } } ~~~ * **`tabBar`** 如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。 :-:  屬性說明： | 屬性 | 類型 | 必填 | 默認值 | 描述 | | --- | --- | --- | --- | --- | | color | HexColor | 是 | | tab 上的文字默認顏色 | | selectedColor | HexColor | 是 | | tab 上的文字選中時的顏色 | | backgroundColor | HexColor | 是 | | tab 的背景色 | | color | HexColor | 是 | | tab 上的文字默認顏色 | | borderStyle | String | 否 | black | tabbar上邊框的顏色， 僅支持 black/white| | list | Array | 是 | | tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab| | position | String | 否 | bottom | 可選值 bottom、top| 其中 `list` 接受一個數組，數組中的每個項都是一個對象，其屬性值如下： | 屬性 | 類型 | 必填 | 說明 | | --- | --- | --- | --- | | pagePath | String | 是 | 頁面路徑，必須在 pages 中先定義 | | text | String | 是 | tab 上按鈕文字 | iconPath | String | 否 | 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數無效，不支持網絡圖片 | | selectedIconPath | String | 否| 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此參數無效，不支持網絡圖片 | * **`networkTimeout`** 可以設置各種網絡請求的超時時間。 屬性說明： | 屬性 | 類型 | 必填 | 說明 | | --- | --- | --- | --- | | request | Number | 否 | wx.request的超時時間，單位毫秒，默認為：60000 | | connectSocket | Number | 否 | wx.connectSocket的超時時間，單位毫秒，默認為：60000 | | uploadFile | Number | 否 | wx.uploadFile的超時時間，單位毫秒，默認為：60000 | | downloadFile | Number | 否 | wx.downloadFile的超時時間，單位毫秒，默認為：60000| * **`debug`** 可以在開發者工具中開啟 debug 模式，在開發者工具的控制臺面板，調試信息以 info 的形式給出，其信息有Page的注冊，頁面路由，數據更新，事件觸發 。 可以幫助開發者快速定位一些常見的問題。 ### 1.1.2 頁面配置 每一個小程序頁面使用`.json`文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。 頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，所以無需寫 window 這個鍵，如： | 屬性 | 類型 | 默認值 | 描述 | | --- | --- | --- | --- | | navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如"#000000" | | navigationBarTextStyle | String | white | 導航欄標題顏色，僅支持 black/white | | navigationBarTitleText | String | 導航欄標題文字內容 | | backgroundColor | HexColor | #ffffff | 窗口的背景色 | | backgroundTextStyle | String| dark | 下拉 loading 的樣式，僅支持 dark/light | | enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新，詳見頁面相關事件處理函數。 | | disableScroll | Boolean | false | 設置為 true 則頁面整體不能上下滾動；只在 page.json 中有效，無法在 app.json 中設置該項| | onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為px | 例如： ~~~ { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } ~~~ ### 1.1.3 工具配置--`project.config.json` [【官方文檔】](https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html) 通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。 考慮到這點，小程序開發者工具在每個項目的根目錄都會生成一個`project.config.json`，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。