#2016年 OSC 北京源創會年終盛典#
本文整理自 OSC 廣州源創會上葉倍宏老師帶來的《微信小程序現場live 教學》，主要帶大家實現一個完整的小程序應用，了解小程序如何提煉了前端開發的最佳實踐。
嘉賓介紹：葉倍宏，加拿大 UBC 計算機本科。 畢業后在加拿大支付公司 任職。 回國多次創業，先在深圳小象網任合伙人 CTO，之后在大理遠程自由職業。2016 在廣州創立思客教學，專注于前端培訓。
一、小程序的價值觀
張小龍是以小程序的價值觀為出發點解釋產品開發的思路的，他認為應用號的形態大致為：“一種新的公眾號形態，這種形態下面用戶關注了一個公眾號，就像安裝了一個 APP 一樣。他要找這個公眾號的時候就像找一個 APP，在平時這個號不會向用戶發東西的，所以 APP 就會很安靜的存在那里，等用戶需要的時候找到它就好了，這樣的話我們可以嘗試做到讓更多的 APP 有一種更輕量的形態，但是又更好使用的一種形態來存在，這是我們在探討的一種新的公眾號形態，叫應用號。”
開發者應該從應用號的價值觀出發去思考產品的可能性。比如商城就太復雜而且不符合“用完即走”的價值觀微信小程序調鏈接地圖，而比較成功的案例有摩拜單車、冷氣機的應用、微信支付等一些輕量級的應用。通過在微信里設計一個界面（頁面）或添加一個按鈕就可以去滿足用戶需求。
二、MINA 框架概述
小程序融合了很多前端開發界的概念，但是并沒有采用任何一個框架，包括流行的REACT、VUE，還有。它不是三者中的任意一個，而是拼湊出一個新的框架。這個過程類似于：
三、現代化前端技巧
小程序引入了一些很重要的現代化前端開發的概念，包括：
● DOM：開發者寫 iOS 和原生的 h5 應用的時候，很多時候是手動地去操作 UI，用戶按按鈕之后改變頁面。當應用很復雜的時候在改變的過程可能就會產生錯誤， DOM 每次要去改變一個界面的時候，重新把界面做一次再進行修改，避免出錯。
●MVVM：分離邏輯和數據。
●組件化：功能、風格模塊化，每個風格封裝在組件里就不會泄露。
四、MINA 是不是 HTML 5
微信小程序一出來，大家都在猜測是基于什么技術，是 H5 還是原生。它的框架看起來既像 H5，又像原生。小程序寫的是 H5 代碼，但是它又不遵從 H5 的標準寫法。它很多方面借用了 Web 技術，但很多細節又不一樣。
1.MINA是 HTML 5
●支持大多數 CSS 屬性：最新的布局、傳統的文件流布局、百分比單位、CSS 動畫、
●幾乎所有的組件都是 HTML5 實現
●可以選擇ES6自動轉成ES5
2.MINA不是HTML5
●非標準標簽（組件）：我們知道寫瀏覽器用的都是標準的主鍵，但是在 MINA 里面，小程序自成一個體系，雖然后臺還是一樣用瀏覽器的主鍵去實現的，但是在前面寫 HTML 的時候加上它自己的一套標準。
●非標準CSS：rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。規定屏幕寬為。如在 上，屏幕寬度為375px，共有750個物理像素，則 = 375px = 750物理像素，1rpx = 0.
●非標準事件系統：當按下一個按鈕的時候分配一個事件，這個事件也是非標準的，但是跟非標準很像。包括冒泡階段和捕捉階段。
●非標準 JS API：支持微信的接口，但是沒有任何標準 JS接口。
●不能操作 或者 DOM：雖然是在瀏覽器里面運行，但是不能操作瀏覽器本身，不能操作原生文件本身，只能用 DOM 去改變頁面。
●有些組件有奇怪的默認高寬(,image)：通常在 Web 瀏覽器里面，主鍵是按圖片內容的高度，基本上所有組件默認高寬都是0，小程序的image是按照-image來實現的，所以所有圖像會得到一個初始寬高320 240，而且無法通過auto重置，只可以通過具體的值來重寫。
●：因為小程序自成一個體系，JS 的包、CSS 框架都不能用，全部都要重新開始。
●1M打包上線：能夠更快地下載。
五、完整的小程序應用演示
前端開發者可以快速開發小程序，因為概念基本相同，如風格、 是一樣的。但具體接口不同，不能直接套用，一些事件的處理小程序有自己的標準。比如點擊一個按鈕，代碼需要去審核、發布請求等。
微信小程序整體是基于MINA框架，官方提供了很多已經封裝好的組件和API 供開發者調用，不僅包括一些常用的滾動視圖，按鈕，圖片組件，還提供了地圖（map）和畫布（）組件，這讓未來小程序內嵌一些小游戲以及簡單的地圖應用成為可能。
MINA 組件
基本：view,text
表單：,input,radio,
媒體：image,video,audio,
模態：-sheet,modal,toast,
容器：,
導航：,
當然更值得注意的是微信所提供的API，主要有一些網絡，媒體，數據類的API，具體可以參照：，關于API，微信官方文檔是這么介紹的“可以方便的調起微信提供的能力”， 也許微信會提供何種能力將是小程序發展的關鍵所在。
那么如何寫一個微信小程序呢？下面以一個同性交友平臺為例進行演示：
項目源碼地址：
開發的首要前提是需要微信登錄，并且確保已經拿到了內側或者公測的資格。
微信開發者工具下載地址：
打開以后你會看到這樣的界面：
選擇小程序進入后就可以添加項目了：
左側為菜單欄，中間是編譯后的預覽界面，可以實時更新，右側是項目目錄。
微信小程序以頁面為主導將樣式，UI，邏輯分別放到這不同的三個文件中，這樣開發微信小程序就變成了實現設計一個個小的頁面，而每個頁面又變成分別去實現各個組件的樣式，布局，邏輯，這種方式一定程度上減小了代碼的耦合程度。
微信小程序通過wxss,js, wxml文件來分別實現每個頁面的樣式，邏輯，視圖（UI），每個頁面都包括或缺省包括以上三個部分微信小程序調鏈接地圖，其還有三個類似的全局文件，當某個頁面缺省時，會默認使用全局的樣式，不過建議全局文件只實現統一的風格和邏輯。
三個部分詳細介紹如下：
1.樣式
開發者需要將微信小程序的頁面樣式實現在一個個.wxss文件當中，一個頁面對應一個樣式文件，若空缺將使用app.wxss（全局樣式）定義的默認樣式中的屬性。這里建議每個頁面實現一個樣式，app.wxss中只實現共有的風格。wxss 支持絕大多數css 所支持的樣式，還有一些特有的特性，你可以把它當作css 來寫。安卓開發的同學可以將他認為是定義了每個控件的的style.xml。例如：
.- {
: #;
color: #FFF;
font-size: 10px;
: 3px;
}
則是定義了一個叫- 的字體樣式，并指定了其背景顏色，字體顏色，字體大小以及字體到邊框的間距。
2.邏輯
邏輯代碼主要實現在一個.js格式的文件中，其中定義一些自己的業務邏輯，還可以接收UI傳遞過來的一些事件（參數）并進行處理，從而實現一些用戶交互。比如：
(e) {
.log("input", e.);
this.({
: e..value
});
},
就是獲取用戶輸入并且把用戶輸入的內容賦值給變量，之后只需要在UI相應控件上把其 事件鏈接到這個函數即可。
微信小程序還支持將一些通用邏輯抽象出來定義成函數，放在單獨的js 文件中，只需寫好一個函數，再使用. 將其暴露給其他js 文件即可。其他js 文件使用前調用(path)函數便可以通過類似于Java 靜態函數（長得像）的方法直接調用了。
(name) {
.log('Hello '+ name + '!')
}
. = {
:
}
= ('.js')
Page({
: () {
.('MINA')
}
})
3.UI
UI 主要實現在一個以.wxml 中的文件中，其實現方式與xml，html 類似，主要定義了頁面的控件類型，指定控件交互事件調用的邏輯，控件的風格類型。微信官方目前提供了一些基礎的控件給開發者使用。使用 語法綁定數據，支持條件渲染，列表渲染，類似邏輯代碼的模塊化，也支持定義UI 模版以及引用，具體可以參考官方文檔。
value="{{}}"
=""
=""
=""
=""
/>
如上則是設置了一個輸入框，其用戶輸入事件由js 代碼中的函數處理，也指定了,, 的處理事件，而其顯示的值由變量決定。
代碼完成后就可以點擊項目選項，在界面上點擊預覽，就會彈出可以用注冊過的微信號真機預覽的二維碼，開發者可以在真機上進行測試。
項目源碼地址：