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