? ?微信小程序已經(jīng)出來將近2個月了洽腺,雖然還是內(nèi)測但是很多同學(xué)已經(jīng)在開始自己研究了,網(wǎng)上有好多評論微信小程序怎么怎么的努潘,我個人感覺既然一個新技術(shù)出來肯定有它出現(xiàn)的理由扛禽,不妨學(xué)一學(xué)懂牧。廢話不多說侈净,微信小程序開發(fā)者文檔我已經(jīng)上傳到github上開發(fā)者文檔,如有需要可以下載僧凤,開發(fā)者工具小程序開發(fā)工具畜侦。?
? 好下面我們來創(chuàng)建一個新的項目,并且剖析一下項目目錄中各個文件的作用躯保。打開開發(fā)者工具并且登錄旋膳。
如果沒有appID的,就直接選擇 無AppID(AppID目前只有內(nèi)測資格的人員才有)途事,接下來點(diǎn)擊添加項目验懊。
? ? ?我們可以看到這個項目,已經(jīng)初始化并包含了一些簡單的代碼文件尸变。最關(guān)鍵也是必不可少的义图,是app.js、app.json召烂、app.wxss這三個碱工。其中,.js后綴的是腳本文件奏夫,.json后綴的文件是配置文件怕篷,.wxss后綴的是樣式表文件。
? ? app.js是小程序的腳本代碼桶蛔。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)匙头、聲明全局變量。
? ?我的理解:(看不懂沒關(guān)系仔雷,你只需要知道這個文件是監(jiān)聽整個程序的,處理程序生命周期等等)相當(dāng)于iOS里面Appdelegate類。
? ? app.json是對整個小程序的全局配置碟婆。我們可以在這個文件中配置小程序是由哪些頁面組成电抚,配置小程序的窗口?背景色,配置導(dǎo)航條樣式竖共,配置默認(rèn)標(biāo)題蝙叛。(注意該文件不可添加任何注釋)
我的理解:就是配置界面跳轉(zhuǎn)的和導(dǎo)航欄的。公给,pages標(biāo)簽里配置的兩個路徑借帘,就是當(dāng)前項目里面啷個頁面的路徑,window標(biāo)簽里面淌铐,設(shè)置的是整個項目里面navigationBar的屬性肺然。
app.wxss是整個小程序的公共樣式表。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則腿准。
我認(rèn)為:這個文件就是設(shè)置整個項目的css文件际起。針對每個頁面的css文件的內(nèi)容不同,加載到對應(yīng)頁面的css樣式時吐葱,當(dāng)前頁面的wxss文件會覆蓋app.wxss文件街望。
? ?現(xiàn)在我們來項目的啟動流程,項目啟動后弟跑,從app.js文件中獲取用戶數(shù)據(jù)灾前,從app.wxss中設(shè)置界面樣式,從app.json中配置跳轉(zhuǎn)的第一個頁面孟辑,默認(rèn)跳轉(zhuǎn)page標(biāo)簽里的第一個頁面哎甲。在剛剛的項目里就是index的頁面。
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成扑浸,如:index.js烧给、index.wxml、index.wxss喝噪、index.json础嫡。.js后綴的文件是腳本文件,.json后綴的文件是配置文件酝惧,.wxss后綴的是樣式表文件榴鼎,.wxml后綴的文件是頁面結(jié)構(gòu)文件。
分析一下index的目錄結(jié)構(gòu):發(fā)現(xiàn)它比app文件少了.json文件晚唇,多了一個.xml文件巫财,如果頁面中沒有.json文件,則默認(rèn)讀取app.json文件哩陕,如果有則覆蓋平项。
index.wxml 文件就是html頁面赫舒,在里面可以畫UI.每個界面的UI都是不一樣的∶銎埃基本上接癌。wxml文件是必不可少的。wxcss和.json和.js文件都不一定是必須的扣讼。
index.js是頁面的腳本文件缺猛,在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗址暶鞑⑻幚頂?shù)據(jù)荔燎,響應(yīng)頁面交互事件等.(如果該頁面只是一個靜態(tài)頁面 則該文件可以省略)
? index.wxss是頁面的樣式表:(頁面的樣式表是非必要的。當(dāng)有頁面樣式表時销钝,頁面的樣式表中的樣式規(guī)則會層疊覆蓋app.wxss中的樣式規(guī)則有咨。如果不指定頁面的樣式表,也可以在頁面的結(jié)構(gòu)文件中直接使用app.wxss中指定的樣式規(guī)則)
這就是小程序的目錄結(jié)構(gòu)曙搬。