微信小程序(MiniProgram)是一種運(yùn)行在微信內(nèi)部,程序大小一般不超過2MiB(最高不超過8MiB)。正是因?yàn)檫@種特性,微信小程序也被稱為是一種不需要下載安裝即可使用的應(yīng)用。那么作為開發(fā)者,我們又怎樣開發(fā)出這種簡單輕巧的小程序呢?
一、準(zhǔn)備工具
這里就簡說進(jìn)入微信小程序開發(fā)工具下載界面,根據(jù)自己的操作系統(tǒng),建議選擇下載穩(wěn)定版。
二、創(chuàng)建項(xiàng)目
打開開發(fā)程序之后先掃碼登錄,之后在左側(cè)欄目選擇小程序并點(diǎn)擊右側(cè)帶有加號的白色方框。
項(xiàng)目名稱和目錄可以隨意修改。因?yàn)槲覀兡壳安恍枰獙ppID進(jìn)行發(fā)布,所以AppID選擇使用測試號。其它缺省設(shè)置不必修改,直接點(diǎn)擊右下角“創(chuàng)建”即可。
三、程序開發(fā)
項(xiàng)目創(chuàng)建成功之后,分三部分:工具欄、模擬器和編輯器。
四、代碼構(gòu)架
pages文件夾下存放的文件夾是頁面,也就是每一個頁面在pages文件夾中都是一個文件夾,而頁面名稱就是這個文件夾的名稱。如上圖,pages下有2個文件夾分別名為index和logs,這就表明這個小程序有兩個頁面。
每一個頁面文件夾下都有4個和文件夾同名的不同類型文件,他們分別是:
json后綴的JSON配置文件、wxml后綴的WXML模板文件、wxss后綴的WXSS樣式文件、js后綴的JS腳本邏輯文件
接下來我們分別看看這4種文件的作用:
JSON配置:JSON是一種數(shù)據(jù)格式,并不是編程語言,他的作用就像我們手機(jī)電腦中的設(shè)置一樣,把我們手中的東西變?yōu)槲覀兿胍臉幼印?br />
以app.json為例,app.json文件用來對微信小程序進(jìn)行全局配置,他聲明了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時時間、底部tab等。每一個小程序頁面也可以使用同名.json文件來對本頁面的窗口表現(xiàn)進(jìn)行配置,頁面中配置項(xiàng)會覆蓋app.json中相同的配置項(xiàng)。
WXML模板:WXML與HTML相像,HTML是用來描述網(wǎng)頁的結(jié)構(gòu),所以在微信小程序中,WXML充當(dāng)?shù)木褪穷愃艸TML的角色。WXML能夠在屏幕上顯示它本身所呈現(xiàn)的內(nèi)容,但是在WXML寫了一個按鈕,我們希望用戶在點(diǎn)擊他的時候他能正確交互,這時就需要用到JS邏輯交互。
JS邏輯交互:就像上面所說,一個服務(wù)僅僅只有界面展示是不夠的,還需要和用戶做交互:響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等。在小程序里邊,我們就通過編寫JS腳本文件來處理用戶的操作。另外,我們頁面中需要用到的變量和函數(shù)方法也需要在JS文件中定義。有了它,再配合WXML,就能夠?qū)懗鰜硪粋€有模有樣的程序了。
WXSS樣式:WXSS具有CSS大部分的特性,但小程序在WXSS也做了一些擴(kuò)充和修改。通俗點(diǎn)講WXSS的作用就是定義WXML中我們所顯示在屏幕上的那些按鈕圖片文字的高度寬度大小顏色等性質(zhì)。和前邊app.json,page.json的概念相同,wxss也提供了全局的樣式和局部樣式。你可以寫一個app.wxss作為全局樣式,會作用于當(dāng)前小程序的所有頁面,局部頁面樣式page.wxss僅對當(dāng)前頁面生效。
說完了4種主要文件,我們會發(fā)現(xiàn)在根目錄下存在一個名為app.js的文件。其實(shí)和前邊app.json,page.json的概念相同,app.js定義了全局樣式,同樣也會作用于當(dāng)前小程序的所有頁面,局部頁面樣式page.js僅對當(dāng)前頁面生效。
通常大家在使用一個工具的時候,都會針對各自喜好做一些個性化配置,例如界面顏色、編譯配置等等,當(dāng)你換了另外一臺電腦重新安裝工具的時候,你還要重新配置。
考慮到這點(diǎn),小程序開發(fā)者工具在每個項(xiàng)目的根目錄都會生成一個project.config.json,你在工具上做的任何配置都會寫入到這個文件,當(dāng)你重新安裝工具或者換電腦工作時,你只要載入同一個項(xiàng)目的代碼包,開發(fā)者工具就自動會幫你恢復(fù)到當(dāng)時你開發(fā)項(xiàng)目時的個性化配置,其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項(xiàng)。
sitemap配置:根目錄下sitemap.json聲明了小程序及其頁面是否允許被微信索引,文件內(nèi)容為一個JSON對象,如果沒有sitemap.json,則默認(rèn)為所有頁面都允許被索引。這個文件目前我們用不到,就先擱置不用考慮這個文件。
最后就是utils文件夾以及其中的util.js文件,和sitemap配置一樣,我們也先擱置不考慮這個文件。