文件結(jié)構(gòu)
小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁面的 page。一個(gè)小程序主體部分由三個(gè)文件組成放前，必須放在項(xiàng)目的根目錄葡公，如下：
| 文件 | 必須 | 作用 |
|---|---|---|
| app.js | 是 | 小程序邏輯 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共樣式表 |
一個(gè)小程序頁面由四個(gè)文件組成闷袒，分別是：
| 文件 | 必須 | 作用 |
|---|---|---|
| 頁面名.js | 是 | 頁面邏輯 |
| 頁面名.wxml | 是 | 界面布局文件 |
| 頁面名.wxss | 否 | 頁面樣式表 |
| 頁面名.json | 否 | 頁面配置 |
注意：這四個(gè)文件的頁面名必須具有相同的路徑與文件名序目。
（小安娜：js & json我認(rèn)識(shí)臂痕，wxml伯襟、wxss是什么鬼猿涨，地球上從未見過的格式！）
配置
我們使用app.json文件來對微信小程序進(jìn)行全局配置姆怪，決定頁面文件的路徑叛赚、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間稽揭、設(shè)置多 tab 等俺附。以下是一個(gè)包含了所有配置選項(xiàng)的簡單配置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)！）揪胃，#fff代表HexColor十六進(jìn)制顏色值璃哟。（小安娜：我不管這些，我只想知道這個(gè)值是怎么來的喊递？）随闪，小安娜你是刁難我的吧，這個(gè)是設(shè)計(jì)上的問題骚勘，開發(fā)前可讓設(shè)計(jì)師標(biāo)注下界面的顏色值铐伴，或者看到喜歡的顏色也可用屏幕顏色拾取工具獲取。
app.json 配置項(xiàng)列表
| 文件 | 類型 | 必須 | 作用 |
|---|---|---|---|
| pages | String Array | 是 | 設(shè)置頁面路徑集合 |
| window | Object | 否 | 設(shè)置默認(rèn)頁面的窗口表現(xiàn) |
| tabBar | Object | 否 | 設(shè)置底部 tab 的表現(xiàn) |
| networkTimeout | Object | 否 | 設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間 |
| debug | Boolean | 否 | 設(shè)置是否開啟 debug 模式 |
pages
接受一個(gè)數(shù)組俏讹，每一項(xiàng)都是字符串当宴，來指定小程序由哪些頁面組成。每一項(xiàng)代表對應(yīng)頁面的【路徑+文件名】泽疆，數(shù)組的第一項(xiàng)代表小程序的初始頁面户矢。小程序中新增/減少頁面，都需要對 pages 數(shù)組進(jìn)行修改于微。
文件名不需要寫后綴逗嫡，框架會(huì)自動(dòng)尋找路徑.json青自、.js、.wxml驱证、.wxss四個(gè)文件進(jìn)行整合延窜。
（小安娜：不是很明白這段話，什么鬼自動(dòng)尋找路徑抹锄，四個(gè)文件進(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
由于本項(xiàng)目中未用到tabBar就不耽誤大家的時(shí)間了摊趾，如需要了解見官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar
（小安娜：tabBar是客戶端窗口底部的tab欄可以切換頁面，可配置最少2個(gè)游两、最多5個(gè) tab砾层，不要感謝我，記得我是雷鋒就行）贱案，噗~肛炮，這都行！
networkTimeout
可以設(shè)置各種網(wǎng)絡(luò)請求的超時(shí)時(shí)間宝踪。
| 屬性 | 類型 | 必填 | 說明 |
|---|---|---|---|
| request | Number | 否 |
wx.request的超時(shí)時(shí)間侨糟，單位毫秒 |
| connectSocket | Number | 否 |
wx.connectSocket的超時(shí)時(shí)間，單位毫秒 |
| uploadFile | Number | 否 |
wx.uploadFile的超時(shí)時(shí)間肴沫，單位毫秒 |
| downloadFile | Number | 否 |
wx.downloadFile的超時(shí)時(shí)間粟害，單位毫秒 |
（小安娜：wx.request、wx.connectSocket颤芬、wx.uploadFile悲幅、wx.downloadFile這些又是什么？）站蝠，wx.request：發(fā)起網(wǎng)絡(luò)請求汰具，wx.connectSocket：創(chuàng)建 WebSocket 連接，wx.uploadFile：上傳文件菱魔，wx.downloadFile：下載文件留荔，這些API先簡單有個(gè)印象，文章會(huì)陸續(xù)用上詳細(xì)介紹。
debug
可以在開發(fā)者工具中開啟 debug 模式聚蝶，在開發(fā)者工具的控制臺(tái)面板（小安娜：控制臺(tái)面板在哪杰妓？），調(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微信小程序會(huì)讀取這些文件，并生成小程序?qū)嵗＠玻魏我粋€(gè)文件名都不可以改動(dòng)。
wxml妄痪、wxss文件格式是什么哈雏？
杰爾夫君：WXML（WeiXin Markup Language）是微信框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件衫生、事件系統(tǒng)裳瘪，可以構(gòu)建出頁面的結(jié)構(gòu)。WXSS(WeiXin Style Sheets)是一套樣式語言罪针，用于描述 WXML 的組件樣式彭羹，與CSS類似，也具有CSS大部分特性泪酱。這2個(gè)文件具體會(huì)在下一篇文章詳細(xì)講解派殷。
