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