最近參加了互聯網公司舉辦的夏令營活動。在活動中，老師帶領我們學習了微信小程序的開發。學習過程中，老師的淳淳教誨讓我猶如發現了一塊新大陸。回到學校，思前想去，決定寫一篇小文，分享一下最近的學習心得。
學習之前，我特地在網上搜了一下微信小程序的定義：微信小程序(后文簡稱小程序）于2017年1月9日正式上線，它的英文名為Mini Program，相對于還需從手機應用商店下載并安裝的手機原生應用而言，它只需要用戶打開微信，掃二維碼或搜出來即可使用。同時，小程序依托于微信這個大平臺，用戶打開小程序的同時小程序就可以獲得用戶的信息，從而避免了注冊登錄這些相對繁瑣的功能。而用戶使用完之后，只需要關閉小程序就搞定，而不會像使用原生應用那樣：動不動就因為一件小事下載少則幾十兆多則上百兆的應用，而用完之后或直接刪除或閑置那里空占內存。所以，如果你喜歡一些簡單的應用，小程序可能是你不二的選擇。
而從一個前端開發者的角度出發，小程序的開發流程也很簡單。你只需用你的郵箱或電話注冊一個小程序開發賬號，再在微信服務平臺下載一個微信開發工具即可開始開發。但是，這里有一些需要注意，一個郵箱或電話只能注冊一個開發賬號，而一個開發賬號只能從小程序或者小游戲中選擇一個，當你選擇了一個就不能選擇另一個。所以，如果你既是小程序的開發者又是小游戲的開發者，你最好準備兩個開發賬號哦。
當你進行開發時，首先你需建立一個工程，在建立工程的時候，你需注意地是，是建立“普通快速啟動模板”還是“建立插件快速啟動模板”。這里，寫一般的小程序用“普通快速啟動模板”，而“插件快速啟動模板”當你寫小程序插件時就可以選擇。
而當你創建好工程進行開發的時，首先，你會發現這樣的目錄結構：
這里，app.js是小程序的入口文件，在這里你首先要用App()函數注冊一個小程序。App() 函數接受一個 object 參數，用來指定小程序的生命周期等。object參數我用官網的一張截圖說明：
大家需要注意地是onLauch屬性，onLauch屬性用來監聽小程序的初始化，這里寫小程序加載時需要使用到的程序，例如，當進入小程序時獲取用戶信息等等。
app.json文件用來對微信小程序進行全局配置，設置頁面路徑、設置默認頁面的窗口表現、設置網絡超時時間、設置底部 tab 的表現，設置是否開啟 debug模式等，詳細用法你可以參考小程序官方文檔。這里，我給一個配置實例：
app.wxss用來存放小程序的公共樣式表，例如，你想要你的小程序所有頁面的字體都有一樣的字體樣式、大小、顏色等，就可以在這里定義。
而project.config.json文件，你在工具上做的任何配置都會寫入到這個文件。當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置。而這些都是project.config.json文件的功勞。
utils用來存放整個小程序都要使用到了公共方法，例如，請求后臺接口的公共方法、時間日期的轉化方法等。
剩下的pages目錄是用來放小程序的每個頁面的，它分別由以.js、.wxml、.wxss、.json為后綴的文件組成（wxml、wxss你可以理解為html、css的別名）。這里，.js用來存放當前頁面的邏輯，.wxml用來存放當前頁面結構，.wxss用來存放當前頁面的樣式表，類似地，.json用來存放當前頁面的配置。舉個例子，你現在要寫一個音樂播放器的播放頁面，對于這個頁面你可以這樣定義，player.wxml，player.js，player.wxss，player.json。player.wxml可以將你想要實現的音樂播放器的頁面骨架搭建出來，而player.wxml則可以幫你實現你想要的播放器的樣式，play.js則可以讓你實現播放的控制功能，剩下地player.json可以讓你定義播放器頁面的一些獨立屬性，例如播放器頁面的頂部顏色、是否允許播放器頁面下拉刷新等。而如果你整個小程序的風格是藍色調的，那么你可以在 app.json 里邊聲明頂部顏色是藍色即可。在這里，有必要著重提一下.wxml，.wxss和.js這三個文件。首先，.wxml文件中并不是你寫html時需要的div、span、a等標簽。在html中，我們可以通過標簽千變萬化的組合再加上css和js的輔助來形成了我們網頁中想用的輪播圖、彈窗等組件，而小程序則在wxml幫我們封裝了這些組件。例如，輪播圖組件swiper，圖片組件image，存放文字信息的組件text等。而你只需要用的時侯利用好他們就ok了。此外，小程序還提供了地圖、視頻、音頻等等組件能力。有心的小伙伴可以再開發時候自己體會。
在.wxss中需要注意地是小程序新增了一個尺寸單位：rpx。在我們寫 CSS 樣式時，我們需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，進而我們需要采用一些技巧來換算一些像素單位。而WXSS在底層支持新的尺寸單位rpx。這樣，開發過程中，開發過程中單位換算的煩惱，我們只要交給小程序底層來換算即可。但由于小程序換算采用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
接下來，就要說到重頭戲.js了。在這里，你需要用Page() 函數注冊一個頁面。Page() 函數接受一個 object 參數，用來指定頁面的生命周期等。object參數我用一張官網截圖說明：
這里，大家需要注意地是data、onLoad這幾個屬性，data用來定義頁面的初始數據，這些數據可以通過“數據綁定”的方式綁定到.wxml頁面中，onLoad用來監聽頁面的初始化。這里，你可以執行一些需要在頁面顯示之前就需要執行的方法，例如，小程序與后臺接口交互的方法等等。順便一提，onHide是在當前頁面被隱藏時執行的。例如，你寫了一個表單，當你提交后你需要把表單上的數據傳到另一個頁面，而這時當你返回填寫另一份表單時，你會發現之前表單輸入的值仍然存在。這時，你就可以在onHide中執行當表單頁面被隱藏時清除表單值的方法。
接著，你可能會疑問。在原生js寫法中，可以用getElemengtById()獲取元素，jQuery可以用$()的方式獲取頁面，哪怎樣在小程序中獲取頁面元素呢？而當你有這個疑問你可能要搜搜前端近期的發展動向了。這里，我就以現在國內比較流行的vue框架與小程序做對照來說明吧。在vue框架中，一切前端操作都是以數據作為驅動的，你要著重關心地是如何從后臺提供的接口中獲取數據并把這些數據綁定到前端并恰當地顯示出來。在小程序中，采用了一個和vue類似地weex框架。在學習過程中，我發現它跟vue很類似，例如，vue中你可以用v-for來做列表循環渲染，而小程序中你可以用wx:for,vue中你可以用v-if、v-else和v-else-if來做條件渲染，而在小程序中你可以用wx:if、wx:else和wx:elif來做條件渲染。而數據綁定，小程序和vue都可以用“{{}}”這樣的模板語法的方式來動態綁定文本值。對于事件操作，小程序中可以用bing+xx或者catch+xx來進行綁定。例如，bindtap是一個當你點擊.wxml標簽時觸發的事件,在被綁定元素上，你需要這樣定義：bindtap=”play”，然后在對應的.js文件的Page()函數中定義play()方法就ok了。而vue中則是用v-on來進行事件綁定。
另外，在小程序你也可以用template來定義模塊，然后用一個個模塊來拼裝成一個個頁面。這個在避免前端代碼冗余時很有幫助。
最后，以上就是我對于這次小程序學習的總結。如果你想學習小程序，希望這篇文章能夠給你帶來幫助。當然，在你閱讀文章時發現有疏漏的地方也請你指出來哦。
