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