微信小程序項目目錄講解以及項目搭建

? ?微信小程序已經(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)擊添加項目验懊。

項目目錄結(jié)構(gòu)

? ? ?我們可以看到這個項目,已經(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.js文件

? ? app.json是對整個小程序的全局配置碟婆。我們可以在這個文件中配置小程序是由哪些頁面組成电抚,配置小程序的窗口?背景色,配置導(dǎo)航條樣式竖共,配置默認(rèn)標(biāo)題蝙叛。(注意該文件不可添加任何注釋)

我的理解:就是配置界面跳轉(zhuǎn)的和導(dǎo)航欄的。公给,pages標(biāo)簽里配置的兩個路徑借帘,就是當(dāng)前項目里面啷個頁面的路徑,window標(biāo)簽里面淌铐,設(shè)置的是整個項目里面navigationBar的屬性肺然。

app.json文件

app.wxss是整個小程序的公共樣式表。我們可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則腿准。

我認(rèn)為:這個文件就是設(shè)置整個項目的css文件际起。針對每個頁面的css文件的內(nèi)容不同,加載到對應(yīng)頁面的css樣式時吐葱,當(dāng)前頁面的wxss文件會覆蓋app.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目錄

index.wxml 文件就是html頁面赫舒,在里面可以畫UI.每個界面的UI都是不一樣的∶銎埃基本上接癌。wxml文件是必不可少的。wxcss和.json和.js文件都不一定是必須的扣讼。

index.xml

index.js是頁面的腳本文件缺猛,在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗址暶鞑⑻幚頂?shù)據(jù)荔燎,響應(yīng)頁面交互事件等.(如果該頁面只是一個靜態(tài)頁面 則該文件可以省略)

index.js

? index.wxss是頁面的樣式表:(頁面的樣式表是非必要的。當(dāng)有頁面樣式表時销钝,頁面的樣式表中的樣式規(guī)則會層疊覆蓋app.wxss中的樣式規(guī)則有咨。如果不指定頁面的樣式表,也可以在頁面的結(jié)構(gòu)文件中直接使用app.wxss中指定的樣式規(guī)則)

index.wxss

這就是小程序的目錄結(jié)構(gòu)曙搬。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末摔吏,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子纵装,更是在濱河造成了極大的恐慌征讲,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件橡娄,死亡現(xiàn)場離奇詭異诗箍,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)挽唉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門滤祖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瓶籽,你說我怎么就攤上這事匠童。” “怎么了塑顺?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵汤求,是天一觀的道長。 經(jīng)常有香客問我严拒,道長扬绪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任裤唠,我火速辦了婚禮挤牛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘种蘸。我一直安慰自己墓赴,他們只是感情好竞膳,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著竣蹦,像睡著了一般顶猜。 火紅的嫁衣襯著肌膚如雪沧奴。 梳的紋絲不亂的頭發(fā)上痘括,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天,我揣著相機(jī)與錄音滔吠,去河邊找鬼纲菌。 笑死,一個胖子當(dāng)著我的面吹牛疮绷,可吹牛的內(nèi)容都是我干的翰舌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼冬骚,長吁一口氣:“原來是場噩夢啊……” “哼椅贱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起只冻,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤庇麦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后喜德,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體山橄,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年舍悯,在試婚紗的時候發(fā)現(xiàn)自己被綠了航棱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡萌衬,死狀恐怖饮醇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秕豫,我是刑警寧澤朴艰,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站馁蒂,受9級特大地震影響呵晚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜沫屡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一饵隙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧沮脖,春花似錦金矛、人聲如沸芯急。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娶耍。三九已至,卻和暖如春饼酿,著一層夾襖步出監(jiān)牢的瞬間榕酒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工故俐, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留想鹰,地道東北人。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓药版,卻偏偏與公主長得像辑舷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子槽片,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容