本文介紹開發(fā)微信小程序項目中的主體文件杈女，這些文件的作用达椰，以及具體的配置字段啰劲。
1.0 配置文件(app.json)
app.json文件說明
該文件是小程序的配置文件呈枉，編寫的時候需要嚴格遵循json的格式規(guī)范(關于JSON的知識點請參考javaScript系列 [05]-javaScript和JSON)，在程序加載的時候負責對小程序的全局進行配置酥泞，配置項如下：
?? page:設置頁面路徑芝囤。
?? tabBar:設置tab的表現(xiàn)。
?? window:設置默認頁面的窗口表現(xiàn)羡藐。
?? networkTimeout:設置網(wǎng)絡超時時間仆嗦。
?? debug設置是否開啟debug模式，可選項為true或false谆甜，默認關閉规辱。
列出app.json文件內(nèi)容的整體結(jié)構(gòu)
{
"pages":[],
"window":{},
"tabBar":{},
"networkTimeout":{},
"debug":false
}
pages配置項
pages配置選項負責注冊小程序的頁面罕袋，是必須要填寫的碍岔，當我們使用開發(fā)工具來創(chuàng)建頁面的時候默認會自動生成對應的配置信息付秕。
pages配置項的value值是一個包含多有頁面路徑的數(shù)組询吴，用來指定小程序由哪些頁面構(gòu)成，其中每一項均有“路徑+文件名”組成唠摹，下面給出示例：
{
"pages": [
"pages/home/home",
"pages/cart/cart",
"pages/category/category",
"pages/mine/mine",
"pages/index/index",
"pages/logs/logs",
"pages/login/login",
"component/wdd-component/block/index",
"pages/mine/coupon/coupon",
"component/wdd-component/addresscard/index"
]
}
說明：pages配置項中的第一個元素(上面為home)默認為小程序的首頁勾拉，路徑中不需要填寫文件后綴名藕赞，渲染頁面的時候框架會自動尋找路徑并把同名的.json斧蜕、.wxml砚偶、.wxss和.js文件進行整合。
window配置項
window配置項負責設置小程序狀態(tài)欄均芽、導航條、標題深纲、窗口背景色等系統(tǒng)級樣式囤萤。
navigationBarBackgroundColor 導航欄背景顏色 [HexColor類型]
navigationBarTextStyle 導航欄標題顏色 [String類型]涛舍，black或white(默認)
navigationBarTitleText 導航欄標題文字內(nèi)容 [String類型]
navigationStyle 導航欄樣式 [String類型]富雅，default(默認)或custom
backgroundColor 窗口的背景色 [HexColor類型]
backgroundTextStyle 下拉加載的樣式 [String類型]没佑，dark(默認)和light
backgroundColorTop 頂部窗口的背景色 [HexColor類型] 温赔，僅 iOS 支持
backgroundColorBottom 底部窗口的背景色 [HexColor類型] 陶贼，僅 iOS 支持
enablePullDownRefresh 全局開啟下拉刷新 [Boolean類型值]，true和false(默認)
onReachBottomDistance 上拉觸底事件觸發(fā)時距底部距離 [Number類型]痹屹，默認值為50px
這里給出一個小程序項目中的window配置項示例
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "文頂頂?shù)男〕绦?,
"navigationBarTextStyle": "white",
"backgroundColor": "#eeeeee"
}
}
tabBar配置項
tabBar配置項 用于設置小程序中的tabBar選項卡志衍，在商業(yè)小程序中使用頻率很高楼肪。tabBar配置項的可配置屬性如下：
?? color tab 上的文字默認顏色[HexColor類型]
?? selectedColor tab 上的文字選中時的顏色[HexColor類型]
?? backgroundColor tab 的背景色[HexColor類型]
?? borderStyle tabbar上邊框的顏色淹辞， 僅支持 black / white(默認)
?? position tabBar的位置象缀，僅支持 bottom / top[String類型]
?? list tab 的列表最少2個爷速、最多5個元素[Array類型]
list配置項 中的每一項都應該是一個對象惫东，代表著一個tab的相關配置。list配置項的課配置屬性如下：
?? text tab 上按鈕文字
?? pagePath 頁面路徑颓遏，必須在 pages 中先定義
?? iconPath 圖片的相對路徑叁幢，icon 大小限制為40kb曼玩，不支持網(wǎng)絡圖片窒百。
?? selectedIconPath 選中時的圖片相對路徑，icon 大小限制為40kb顷帖，不支持網(wǎng)絡圖片贬墩。
這里給出一個小程序項目中的tabBar配置項的示例和最終顯示結(jié)果：
{
"tabBar": {
"selectedColor": "#000000",
"list": [
{
"pagePath": "pages/home/home",
"text": "首頁",
"iconPath": "img/tabbar/home.png",
"selectedIconPath": "img/tabbar/homeSelected.png"
},
{
"pagePath": "pages/login/login",
"text": "分類",
"iconPath": "img/tabbar/category.png",
"selectedIconPath": "img/tabbar/categorySelected.png"
},
{
"pagePath": "pages/cart/cart",
"text": "購物車",
"iconPath": "img/tabbar/cart.png",
"selectedIconPath": "img/tabbar/cartSelected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "img/tabbar/mine.png",
"selectedIconPath": "img/tabbar/mineSelected.png"
} ]
}}
上面配置項的顯示效果如下圖
請求超時和debug模式
networkTimeout用于控制小程序中所有網(wǎng)絡請求的超時時間(只能通過該配置項統(tǒng)一的配置)震糖。
debug配置項用于控制是否開啟debug模式吊说，默認情況下是關閉的优炬，當debug模式設置為true之后在開發(fā)者工具的控制面板，所有的調(diào)試信息將以info的形式輸雅宾。
說明：需要注意全局配置文件和頁面配置文件的關系眉抬，當路由到對應頁面的時候，頁面配置文件的配置項將會覆蓋全局配置悄谐。
2.0 邏輯控制文件(app.js)
app.js是小程序的整體邏輯控制文件，在該文件中通過App()函數(shù)來注冊小程序的生命周期函數(shù)爬舰、全局方法和全局屬性情屹，而且已經(jīng)注冊的小程序?qū)嵗梢栽谄渌倪壿媽哟a中通過getApp()函數(shù)獲取垃你。
App()函數(shù)用于注冊一個微信小程序。
App()函數(shù)必須在app.js中注冊蜡镶，且不能注冊多個官还。
App()函數(shù)的Object參數(shù)對象主要包括`生命周期函數(shù)`和其它數(shù)據(jù)望伦，生命周期函數(shù)用于程序監(jiān)聽煎殷。
生命周期函數(shù)說明
當啟動一個微信小程序的時候豪直，會首先依次觸發(fā)onLaunch和onShow方法弓乙，然后通過app.json配置文件中的pages配置項來注冊相應的頁面，最后根據(jù)默認路徑加載首頁勾习。當用戶點擊關閉標簽或點擊了設備的Home按鈕離開微信的時候小程序并不會直接銷毀懈玻，而是進入后臺，這兩種情況都會觸發(fā)onHide方法英岭，當再次打開微信小程序的時候會觸發(fā)onShow方法巴席。當小程序進入后臺一定時間或者系統(tǒng)資源占用過高的時候會被真正的銷毀诅需。
注冊小程序的示例代碼(該代碼可以在app.js文件通過敲入App + Tab鍵的方式生成)
App({
/**
* 當小程序初始化完成時堰塌，會觸發(fā) onLaunch（全局只觸發(fā)一次）
*/
onLaunch: function () {},
/**
* 當小程序啟動分衫，或從后臺進入前臺顯示蚪战，會觸發(fā) onShow
*/
onShow: function (options) {},
/**
* 當小程序從前臺進入后臺，會觸發(fā) onHide
*/
onHide: function () {},
/**
* 當小程序發(fā)生腳本錯誤瞎疼，或者 api 調(diào)用失敗時壁畸，會觸發(fā) onError 并帶上錯誤信息
*/
onError: function (msg) {},
otherDate:'存放其他數(shù)據(jù)'
})
3.0 全局樣式文件(app.wxss)
WXSS是小程序基于CSS拓展的一套樣式語言，它實現(xiàn)了CSS大部分規(guī)則太抓。
app.wxss是全局樣式表令杈，對項目中每個頁面都有效逗噩，可以將一些系統(tǒng)級別的樣式統(tǒng)一寫入到該文件中给赞。
注意：頁面在渲染的時候，頁面中的.wxss文件樣式會覆蓋app.wxss中相同的選擇器樣式残邀。
