# 文件結構
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
| 文件 | 必須 | 作用 |
| ----- | ----- | ----- |
| app.js | 是 | 小程序邏輯 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共樣式表 |
一個小程序頁面由四個文件組成，分別是：
| 文件 | 必須 | 作用 |
| ----- | ----- | ----- |
| 頁面名.js | 是 | 頁面邏輯 |
| 頁面名.wxml | 是 | 界面布局文件 |
| 頁面名.wxss | 否 | 頁面樣式表 |
| 頁面名.json | 否 | 頁面配置 |
注意：這四個文件的**頁面名**必須具有相同的路徑與文件名。
*（小安娜：js & json我認識，wxml、wxss是什么鬼，地球上從未見過的格式！）*
# 配置
我們使用`app.json`文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。以下是一個包含了所有配置選項的簡單配置`app.json`：
*（小安娜：app.json，我可以改成abc.json不？）*
```javascript
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "嗶哩嗶哩彈幕視頻網",
"navigationBarTextStyle": "black",
"backgroundColor": "#f4f4f4"
},
"debug": true
}
```
*（小安娜：#fff是什么意思？我只知道FFF團！）*，#fff代表HexColor十六進制顏色值。*（小安娜：我不管這些，我只想知道這個值是怎么來的？）*，小安娜你是刁難我的吧，這個是設計上的問題，開發前可讓設計師標注下界面的顏色值，或者看到喜歡的顏色也可用屏幕顏色拾取工具獲取。
## app.json 配置項列表
| 文件 | 類型 | 必須 | 作用 |
| ----- | ----- | ----- | ----- |
| pages | String Array | 是 | 設置頁面路徑集合 |
| window | Object | 否 | 設置默認頁面的窗口表現 |
| tabBar | Object | 否 | 設置底部 tab 的表現 |
| networkTimeout | Object | 否 | 設置網絡超時時間 |
| debug | Boolean | 否 | 設置是否開啟 debug 模式 |
## pages
接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】，**數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改**。
文件名不需要寫后綴，框架會自動尋找路徑`.json`、`.js`、`.wxml`、`.wxss`四個文件進行整合。
*（小安娜：不是很明白這段話，什么鬼自動尋找路徑，四個文件進行整合）*
如開發目錄為：
- pages/
- |\-- pages/index/index.wxml
- |\-- pages/index/index.js
- |\-- pages/index/index.wxss
- app.js
- app.json
- app.wxss
則，我們只需要在 `app.json` 中寫：
（pages/index/index不需要添加后綴）
```javascript
{
"pages":[
"pages/index/index"
]
}
```
### window
用于設置小程序的狀態欄、導航條、標題、窗口背景色。
| 屬性 | 類型 | 默認值 | 描述 |
| ----- | ----- | ----- | ----- |
| navigationBarBackgroundColor | HexColor | 是 | 導航欄背景顏色，如"#000000" |
| navigationBarTextStyle | String | #000000 | 導航欄標題顏色，僅支持 black/white |
| navigationBarTitleText | String | white | 導航欄標題文字內容 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉背景字體、loading 圖的樣式，僅支持 dark/light|
| enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新 |
如 `app.json` ：
```javascript
{
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "嗶哩嗶哩彈幕視頻網",
"navigationBarTextStyle": "black",
"backgroundColor": "#f4f4f4"
}
}
```
### tabBar
由于本項目中未用到tabBar就不耽誤大家的時間了，如需要了解見官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar
*（小安娜：tabBar是客戶端窗口底部的tab欄可以切換頁面，可配置最少2個、最多5個 tab，不要感謝我，記得我是雷鋒就行）*，噗~，這都行！
## networkTimeout
可以設置各種網絡請求的超時時間。
| 屬性 | 類型 | 必填 | 說明 |
| ----- | ----- | ----- | ----- |
| request | Number | 否 | `wx.request`的超時時間，單位毫秒 |
| connectSocket | Number | 否 | `wx.connectSocket`的超時時間，單位毫秒 |
| uploadFile | Number | 否 | `wx.uploadFile`的超時時間，單位毫秒 |
| downloadFile | Number | 否 | `wx.downloadFile`的超時時間，單位毫秒 |
*（小安娜：`wx.request`、`wx.connectSocket`、`wx.uploadFile`、`wx.downloadFile`這些又是什么？）*，wx.request：發起網絡請求，wx.connectSocket：創建 WebSocket 連接，wx.uploadFile：上傳文件，wx.downloadFile：下載文件，這些API先簡單有個印象，文章會陸續用上詳細介紹。
## debug
可以在開發者工具中開啟 debug 模式，在開發者工具的控制臺面板*（小安娜：控制臺面板在哪？）*，調試信息以 info 的形式給出，其信息有Page的注冊，頁面路由，數據更新，事件觸發 。 可以幫助開發者快速定位一些常見的問題。
*（小安娜：你有沒有debug模式啊，讓我開啟就能知道你所有的秘密，微信支付、支付寶、銀行卡密碼...嘻嘻壞笑~）*
## 所以最終app.json是這樣的
```javascript
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "嗶哩嗶哩彈幕視頻網",
"navigationBarTextStyle": "black",
"backgroundColor": "#f4f4f4"
},
"debug": true
}
```
# 小安娜有問題
## app.json我可以隨便改成abc.json嗎？
**杰爾夫君：**不可以，`app.js`、`app.json`、`app.wxss`微信小程序會讀取這些文件，并生成小程序實例，任何一個文件名都不可以改動。
## wxml、wxss文件格式是什么？
杰爾夫君：WXML（WeiXin Markup Language）是微信框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，與CSS類似，也具有CSS大部分特性。這2個文件具體會在下一篇文章詳細講解。
