微信小程序（具體可以看《官方微信開發(fā)文檔》）頁(yè)面在我這個(gè)前端超菜雞看來(lái)，其實(shí)就是類似html+css+js+配置文件組成的展示視圖，當(dāng)然，我覺(jué)得它用的應(yīng)該是微信自己的東西，跟傳統(tǒng)的html、css、js等并不完全一致，數(shù)據(jù)值對(duì)應(yīng)用的是類似Vue的那種雙向綁定。它前端部分的項(xiàng)目結(jié)構(gòu)也并不很復(fù)雜，后端部分可以用多種語(yǔ)言編程，我個(gè)人因?yàn)楣ぷ骱笾饕佑|java，所以只說(shuō)java，用過(guò)感覺(jué)和普通項(xiàng)目后端沒(méi)兩樣的，開發(fā)工具生成的微信頁(yè)面前端部分先看截圖：
其實(shí)這個(gè)圖里我加了images這個(gè)文件夾
那我們來(lái)簡(jiǎn)單記錄下各個(gè)文件夾以及不同類型文件的主要作用：
1、pages目錄：這個(gè)目錄下放的其實(shí)就是一個(gè)個(gè)的微信端的頁(yè)面了，截圖中的index文件夾、logs文件夾其實(shí)都是單獨(dú)的頁(yè)面；
? ? ? ? ? ? ? ? ? ? 再以index文件夾舉例說(shuō)——下屬4個(gè)不同后綴文件：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （1）js：就是頁(yè)面內(nèi)的js文件，頁(yè)面中的變量、監(jiān)聽(tīng)事件全都在這里；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （2）json：頁(yè)面的配置文件，其實(shí)就類似后端的配置文件，就看成
????????????????????????????????????????????????????properties或者xml就好了；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （3）wxml：頁(yè)面的結(jié)構(gòu)文件，查看可以發(fā)現(xiàn)就是各種標(biāo)簽組成的結(jié)構(gòu)塊；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? （4）wxss：頁(yè)面的樣式文件，看著里面都是選擇器。
2、utils目錄：這里面存的都是一些公用的js，就當(dāng)作web后端項(xiàng)目的工具類就好啦，提供公共方法減少冗余和維護(hù)難度的；
3、app.js文件:整個(gè)微信小程序相關(guān)的全局js，這里有監(jiān)聽(tīng)整個(gè)小程序的生命周期函數(shù)和全局變量；
4、app.json文件：是對(duì)整個(gè)小程序的靜態(tài)全局配置，我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成（路由），配置小程序的窗口背景色、配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題，可以配置整個(gè)項(xiàng)目的樣式，超時(shí)時(shí)間，加載的插件等等；(注意該文件不可添加任何注釋)；
5、app.wxss文件：整個(gè)小程序的樣式文件，我個(gè)人認(rèn)為這個(gè)文件就是設(shè)置整個(gè)項(xiàng)目的css文件。針對(duì)每個(gè)頁(yè)面的css文件的內(nèi)容不同，加載到對(duì)應(yīng)頁(yè)面的css樣式時(shí)，當(dāng)前頁(yè)面的wxss文件會(huì)覆蓋app.wxss文件（估計(jì)跟普通的css樣式的覆蓋規(guī)則類似）。
6、project.config.json文件:? 這個(gè)其實(shí)是每個(gè)開發(fā)者工具生成的項(xiàng)目都有的，但和項(xiàng)目?jī)?nèi)容實(shí)際沒(méi)有特別大關(guān)聯(lián)，主要是記錄相關(guān)工具的配置的，在工具上做的任何配置都會(huì)寫入到這個(gè)文件，當(dāng)重新安裝工具或者換電腦工作時(shí)，只要載入同一個(gè)項(xiàng)目的代碼包，開發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)。
7、sitemap.json文件:? 這個(gè)可以配置是否允許被微信索引，具體看微信官方文檔-sitemap 配置
8、類似我自己添加的images這樣的文檔：可以作為分類存放的目錄用，一般的后端項(xiàng)目也都是這樣做的，沒(méi)什么特別難理解的。
頁(yè)面加載時(shí)，json中的數(shù)據(jù)初始化，js可以監(jiān)聽(tīng)處理各類響應(yīng)，wxml可以加載頁(yè)面主體結(jié)構(gòu)，wxss美化頁(yè)面樣式。
以上四類文件，分為全局配置文件，和單個(gè)page配置文件。
全局的位于根目錄下；位于page目錄下，是每個(gè)頁(yè)面的配置文件；頁(yè)面配置文件之間互不影響。
全局的配置文件為整個(gè)項(xiàng)目制定統(tǒng)一的風(fēng)格，而每個(gè)頁(yè)面的配置文件，在于有了整體的風(fēng)格以后，為每個(gè)頁(yè)面提供個(gè)性化的風(fēng)格。
一般的啟動(dòng)流程：項(xiàng)目啟動(dòng)后，從app.js文件中獲取用戶數(shù)據(jù)，從app.wxss中設(shè)置界面樣式，從app.json中配置跳轉(zhuǎn)的第一個(gè)頁(yè)面，默認(rèn)跳轉(zhuǎn)page標(biāo)簽里的第一個(gè)頁(yè)面。在剛剛的項(xiàng)目里就是index的頁(yè)面。
