從小程序誕生伊始，就有很多人開始研習(xí)小程序的機(jī)理和特點(diǎn)，從源代碼的角度、從整體架構(gòu)的角度，有很多不錯(cuò)的文章會(huì)令人受益。

但理論是一回事，真正理解小程序，還是需要一定的實(shí)踐，才能進(jìn)一步去理解小程序背后的一些想法，它和現(xiàn)有平臺(tái)的一些異同，以及如何去適應(yīng)它，做出更有趣的小程序。

小程序的編程模式

最近，我們?cè)谧觥篙p芒小程序+」和其它輕芒產(chǎn)品的小程序應(yīng)用過程中，對(duì)小程序有了進(jìn)一步的理解，進(jìn)而有了本文。

去理解一個(gè)開發(fā)平臺(tái)的特性，一個(gè)不錯(cuò)的角度就是從"編程模式"入手，就是看在這個(gè)平臺(tái)上去開發(fā)，需要如何書寫和組織自己的代碼，進(jìn)而搞清楚三個(gè)問題：

• 數(shù)據(jù)如何獲取
• 界面如何呈現(xiàn)
• 交互如何傳導(dǎo)

換而言之，就是從 MVC（Model-View-Controller）的視角去拆解這個(gè)平臺(tái)的特性，從而理解在這個(gè)平臺(tái)上開發(fā)有何特點(diǎn)。

數(shù)據(jù)如何獲取？

程序的本質(zhì)，可以說就是數(shù)據(jù)的呈現(xiàn)和加工。所以，看一個(gè)客戶端開發(fā)平臺(tái)的基本能力，首先，就要看能把哪些數(shù)據(jù)放在上面處理，有哪些局限性，如果缺少了必要的數(shù)據(jù)獲取方式，那對(duì)于開發(fā)者而言，巧婦也難為無米之炊。

從這點(diǎn)看，小程序是提供的數(shù)據(jù)獲取方式算是非常豐富了，大概涵蓋：

通過 Https 請(qǐng)求去服務(wù)端獲取數(shù)據(jù)。支持 Http 是最基本的，小程序?qū)?Http 有限制，除了要求通信協(xié)議是 Https，出現(xiàn)的域名必須提前預(yù)設(shè)之外，還將應(yīng)用層協(xié)議限定到了 Json 格式下，這一點(diǎn)，可能比任何一個(gè)已有客戶端平臺(tái)更為嚴(yán)苛。站在小程序的平臺(tái)角度來看，通過這樣的協(xié)議規(guī)定，對(duì)應(yīng)用中流動(dòng)的數(shù)據(jù)有了更強(qiáng)的管控能力；而對(duì)于開發(fā)者而言，則需要花些時(shí)間去調(diào)整自己的服務(wù)協(xié)議以便適應(yīng)小程序的要求。

可以在本地文件系統(tǒng)上存取數(shù)據(jù)。小程序提供了算是豐富的 APIs 供開發(fā)者在手機(jī)系統(tǒng)上存取文件。開發(fā)者可以本地文件來做緩存、做狀態(tài)記憶，等等，為開發(fā)提供了不錯(cuò)的便利。

可以讀寫設(shè)備中的一部分信息。小程序開放了一些 APIs，幫助開發(fā)者獲得設(shè)備上的一些基本信息，比如：手機(jī)型號(hào)、屏幕尺寸，網(wǎng)絡(luò)狀態(tài)，等等。比較有價(jià)值的，是可以選擇獲取手機(jī)上的圖片等多媒體文件，這給做一些圖像相關(guān)的應(yīng)用提供了可能性；以及它還提供了不少設(shè)備上羅盤、重力感應(yīng)器、地理位置等相關(guān)的信息，對(duì)開發(fā)者理解用戶所處的環(huán)境有很大幫助。

從上面的介紹不難看出，小程序中的數(shù)據(jù)獲取方式，和一般的瀏覽器提供的相仿（也就是和做 Html5 應(yīng)用能獲取的信息），比原生的客戶端更局限一些，但對(duì)于絕大多數(shù)的應(yīng)用而言，是足夠用了。

除此之外， 小程序提供了微信生態(tài)中的一些數(shù)據(jù)，比如賬號(hào)信息。這對(duì)于微信龐大的生態(tài)而言，只是非常小的一部分?jǐn)?shù)據(jù)，但確是開發(fā)小程序應(yīng)用中最值得利用的一部分?jǐn)?shù)據(jù)。

舉個(gè)例子，在其它平臺(tái)上，如果需要獲取到微信的賬號(hào)信息，需要通過一次用戶授權(quán)。如果用戶暫時(shí)不想提供，則會(huì)使得程序出于 “未登錄” 狀態(tài)，給整個(gè)服務(wù)的展開帶來困難。而在小程序中，只要用戶點(diǎn)開小程序，就意味著完成了授權(quán)，開發(fā)者可以直接讀取到小程序的賬號(hào)信息，并可以同步到自己的服務(wù)端作為該用戶的身份標(biāo)識(shí)，從而實(shí)現(xiàn) “始終登錄” 的狀態(tài)，使得后續(xù)服務(wù)可以更好的提供。

一份可行的示例如下：

// 先調(diào)用登錄接口，獲得請(qǐng)求碼 
 
wx.login({ 
 
success: function (res) { 
 
// 獲取到請(qǐng)求碼，繼續(xù)請(qǐng)求用戶的基本信息 
 
var code = res.code 
 
wx.getUserInfo({ 
 
success: function (res) { 
 
// 獲取到了加密的用戶信息，去服務(wù)端解密并存儲(chǔ) 
 
var userData = res.encryptedData 
 
var iv = res.iv 
 
wx.request({ 
 
url: 'https://my_account/...', 
 
data: { 
 
code: code, 
 
user_data: userData, 
 
iv: iv 
 
}, 
 
success: function(res) { 
 
// 在服務(wù)器上，解析并生成自己的賬號(hào)驗(yàn)證信息 
 
var user = res.data.user 
 
var token = res.data.token 
 
// 并且還可以存在本地存儲(chǔ)上，供下次打開使用 
 
wx.setStorage({ 
 
key: 'my_token', 
 
data: token 
 
}) 
 
} 
 
}) 
 
} 
 
}) 
 
} 
 
}); 

界面如何呈現(xiàn)？

小程序剛發(fā)布的時(shí)候，一片人開始驚呼 Html5 的時(shí)代就要到來了，因?yàn)樾〕绦蛟诮缑鎸樱褂昧?**Html/CSS/Javascript** 這套 Html5 的技術(shù)棧。但很快，隨著聰明的程序員們對(duì)小程序的理解進(jìn)一步加深，就發(fā)現(xiàn)小程序所說的 Html/CSS/Javascript 和 Html5 中的完全不是一回事，其差異，基本等同于 Java 和 Javscript 間的差距。

在小程序中，和 Html 對(duì)應(yīng)的是 **WXML** ，它保留下來的只有 Html 的概念，而傳統(tǒng)的 `<div>` `<a>` 標(biāo)簽都完全被拋棄了。和 Facebook 的 React 類似，小程序引入了自己的 Html 標(biāo)簽，它和 `<article>` `<section>` 這樣的語(yǔ)義標(biāo)簽不同，小程序中的標(biāo)簽，更像是傳統(tǒng)客戶端開發(fā)中的 **組件** （或者叫控件），每個(gè)組件都有自己背后的職能和使用方式。比如：如果需要展示圖片，就只能用 `<image>` 標(biāo)簽，其它標(biāo)簽都無法承載，而如果需要提供可選的文本，則只能使用 `<text>` 標(biāo)簽，等等。這樣的方式帶來***的問題是傳統(tǒng)的 Html 頁(yè)面都無法在小程序中呈現(xiàn)（而小程序正好，沒提供類似 Web View 的客戶端控件）。

比如，大量的內(nèi)容網(wǎng)站，其文章內(nèi)容都是存儲(chǔ)為一個(gè) Html 片段的，這樣就無法直接呈現(xiàn)在小程序中。如果需要展示，一個(gè)思路是構(gòu)建一個(gè)中間服務(wù)，將 Html 轉(zhuǎn)譯成一種更簡(jiǎn)單利于渲染的中間格式數(shù)據(jù)，然后，在小程序端把中間格式的數(shù)據(jù)轉(zhuǎn)換成小程序的標(biāo)簽進(jìn)行呈現(xiàn)。我們?cè)谧?[輕芒生活](http://s.qingmang.mobi/10c) 的時(shí)候，正好設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)轉(zhuǎn)義服務(wù)，將任意一個(gè) Html 頁(yè)面轉(zhuǎn)換成中間格式（內(nèi)部名是 RAML），解決了內(nèi)容性 Html 頁(yè)在小程序上的呈現(xiàn)問題。

（在小程序中呈現(xiàn) Html 內(nèi)容頁(yè)）

和 Html 相比，小程序的 **WXSS** 算是比較完整的保留了 CSS 的特征，這一點(diǎn)還蠻出乎意料的。WXSS 在語(yǔ)義上***的不同，一是在于它支持了相對(duì)尺寸單位 `rpx` ，每 750rpx 等價(jià)于當(dāng)前設(shè)備的屏幕寬度。這個(gè)相對(duì)尺寸單位的引入，把那種繁復(fù)的屏幕尺寸適配變得簡(jiǎn)單了不少。而和 CSS 的另一個(gè)不同，是它更像傳統(tǒng)控件樣式用法，不支持 CSS3 那么多的選擇器，使用中，更多的是一個(gè)控件一個(gè) class 這樣來使用。

小程序中雖然支持 ES6 標(biāo)準(zhǔn)的 Javascript，但窗口級(jí)的 Javascript 在小程序中完全被廢棄掉了，開發(fā)者無法用 Javascript 去調(diào)用 window、document 對(duì)象來修改界面元素完成邏輯。小程序中的 Javascript 其實(shí)直接對(duì)應(yīng) node.js 的用法，用來完成后臺(tái)業(yè)務(wù)邏輯，而不是直接控制交互。小程序的這個(gè)設(shè)計(jì)，使其可以用到 virtual dom 的方式來渲染界面，讓界面數(shù)據(jù)更新時(shí)的性能優(yōu)化成為可能，但付出的代價(jià)就是少了窗口級(jí) Javscript 的那層膠水的黏合，使得很多功能的開發(fā)變得極其呆板和繁復(fù)。

交互如何傳導(dǎo)？

所謂交互的傳導(dǎo)，是當(dāng)用戶和界面發(fā)生交互式，平臺(tái)框架通過何種方式告訴業(yè)務(wù)層，并將處理后的變化呈現(xiàn)回交互界面上。如果把 WXSS + WXML 繪制的頁(yè)面看成 “前端”，把 Javascript 撰寫的業(yè)務(wù)邏輯看成 “后端”，你會(huì)發(fā)現(xiàn)，小程序的前后端交互特別像 Web 1.0 的模式，前端把交互行為封裝成 **事件（event）** 發(fā)送到后端，后端處理完成后，通過 **setData** 方法將數(shù)據(jù)回傳到前端。

（小程序的交互傳導(dǎo)）

小程序提供的 Events，基礎(chǔ)的有類似單擊、長(zhǎng)按、觸摸、滑動(dòng)，等等，對(duì)于視頻播放器等控件，還有監(jiān)聽播放、暫停等等。這些事件涵蓋算是比較基礎(chǔ)的，沒有更高級(jí)的手勢(shì)、多點(diǎn)觸控等相關(guān)事件，但也還是足夠讓開發(fā)者具體了解用戶的輸入，進(jìn)而做出響應(yīng)。

而小程序給界面相應(yīng)的唯一方式，是通過 Page 中的 setData API 對(duì)界面上的數(shù)據(jù)進(jìn)行更新， **小程序會(huì)比較兩次調(diào)用期間數(shù)據(jù)的變化** ，來決策需要更新哪部分的交互界面。

舉個(gè)實(shí)際的例子，假設(shè)開發(fā)者需要做一個(gè)滑動(dòng)切換頁(yè)面的效果，在小程序中該如何實(shí)現(xiàn)？首先，是將變量數(shù)據(jù)引入渲染頁(yè)面：

<view class="page" id="current-page"

style="left:{{distance}}rpx;"

bindtouchstart="movePage" bindtouchcancel="movePage"

bindtouchmove="movePage" bindtouchend="movePage">

</view>

可以看到， `distance` 是一個(gè)模版參數(shù)，它初始值為 0，表示移動(dòng)的距離。通過 **bindtouchstart** 等函數(shù)綁定上 Javascript 的方法，將事件回傳。

movePage: function(event) { 
 
var status = { 
 
needUpdate: false, 
 
distance: 0 
 
} 
 
// 處理各種事件，計(jì)算是否需要刷新，和移動(dòng)方向 
 
if ("touchstart" === event.type) { 
 
// 開始計(jì)算移動(dòng) 
 
... 
 
} else if ("touchend" === event.type) { 
 
// 判定移動(dòng)的距離是否足夠. 
 
... 
 
} else if ("touchcancel" === event.type) { 
 
// 被打斷就算了. 
 
... 
 
} else if ("touchmove" === event.type) { 
 
// 計(jì)算移動(dòng)距離 
 
... 
 
} 
 
// 根據(jù)移動(dòng)的距離，來更新界面 
 
if (status.needUpdate) { 
 
this.setData({ 
 
distance: status.distance 
 
}) 
 
} 
 
} 

而在 Javascript 一端，則捕獲事件、計(jì)算偏移量，然后將新的偏移量送到前端界面。

從這里可以看到，小程序的交互模式，是典型的單向模式，前端回傳事件，數(shù)據(jù)單向的推到前端，而不是通過類似 “變量” “狀態(tài)” 這樣的方式來告知。這樣的模式下，開發(fā)者對(duì)界面變化的控制往往不可能太精準(zhǔn)，整個(gè)核心，都依賴小程序?qū)纱螖?shù)據(jù)變化的 diff 計(jì)算，這個(gè)會(huì)最終影響整個(gè)交互的性能。

小程序開發(fā)模式的特點(diǎn)

至此，我們可以來總結(jié)一下小程序開發(fā)的一些特點(diǎn)了。整體來看，小程序是借了 Html5 的技術(shù)棧，行了傳統(tǒng)客戶端開發(fā)的模式，這一點(diǎn)和 React 等平臺(tái)會(huì)比較相近，可以視為 HTMLl5 的一個(gè)新分支。

從設(shè)計(jì)思路看，小程序做了大量的 “限制”，***的限制，是開發(fā)者其實(shí)是無法通過 Javascript 這樣的編程語(yǔ)言，直接對(duì)界面進(jìn)行控制，而是通過數(shù)據(jù)驅(qū)動(dòng)來間接實(shí)現(xiàn)。這對(duì)于缺少開發(fā)經(jīng)驗(yàn)的人而言，是有益的事情，因?yàn)檫@降低了理解的門檻，但對(duì)于復(fù)雜的應(yīng)用而言，這個(gè)模式開發(fā)起來比較呆板，往往是一個(gè)變化多處修改，增加了理解代碼的成本。

開發(fā)小程序的坑

開發(fā)小程序的日子，也是一個(gè)踩坑的歷程。簡(jiǎn)單總結(jié)，小程序中的坑大概來自這幾個(gè)方面：

和 Web 的兼容性。小程序引入了 Html/CSS 做為技術(shù)棧，并在其基礎(chǔ)上進(jìn)行了定制。很多開發(fā)中的問題都來自于 “定制”，因?yàn)槟悴⒉恢滥牟糠志捅欢ㄖ屏耍牟糠质潜焕^承了。比如，你用了一個(gè) CSS 語(yǔ)法，發(fā)現(xiàn)并不生效，或者效果和瀏覽器中的不一樣，于是，你只能換一個(gè)寫法，結(jié)果很有可能，又會(huì)繼續(xù)發(fā)現(xiàn)，這個(gè)新的寫法可能效果也不對(duì)，于是你只能繼續(xù)嘗試，如此反復(fù)，可能會(huì)消耗大量的時(shí)間。

開發(fā)環(huán)境不穩(wěn)定。小程序的開發(fā)，是基于微信自制的一個(gè) IDE，但當(dāng)下，IDE 的穩(wěn)定性、易用性都非常之差，時(shí)常出現(xiàn) Bug，你以為是你的程序?qū)戝e(cuò)了，但其實(shí)，是 IDE 的 Bug，重啟一下 IDE，一切都引刃而解了。于是，當(dāng)你日后開發(fā)小程序時(shí)出現(xiàn)某種異樣，先重啟 IDE，再看問題還在不在，也許是種更節(jié)省時(shí)間的方式。

缺少真機(jī)調(diào)試環(huán)境。小程序的運(yùn)行時(shí)其實(shí)就是微信，微信幾乎沒提供任何真機(jī)上調(diào)試工具給你（也不能說完全沒有，有一個(gè)只能在真機(jī)上瞪著眼睛看的日志框）。你在模擬器中調(diào)試好的程序，可能在真機(jī)上運(yùn)行起來并不如預(yù)期。比如，我們碰到過真機(jī)上白屏、位置錯(cuò)亂、動(dòng)畫效果不對(duì)，以及 Android 上至今還不能運(yùn)行，等等問題。這對(duì)于稍微復(fù)雜的程序而言，頗為夢(mèng)魘，想做一些細(xì)粒度的調(diào)整和優(yōu)化，基本只能靠猜。

閉源且缺少學(xué)習(xí)資料。小程序整體上是閉源狀態(tài)（雖然模擬器和 IDE 部分可以通過反編譯來看），且缺少足夠的學(xué)習(xí)資料，如果一旦碰到控件如何使用、為什么這么用不對(duì)，之類的問題，就只能靠不停的試來解決，也需要耗費(fèi)大量時(shí)間。

***介紹下「輕芒小程序+」。「輕芒小程序+」是由輕芒團(tuán)隊(duì)提出的小程序解決方案，它將替內(nèi)容創(chuàng)業(yè)者免費(fèi)搭建屬于自己的微信小程序，其創(chuàng)建的小程序在內(nèi)容發(fā)布之外，還將具有評(píng)論、筆記、付費(fèi)閱讀等特色功能。輕芒小程序+ 不打算創(chuàng)建一個(gè)新的內(nèi)容平臺(tái)，而是將內(nèi)容創(chuàng)業(yè)者現(xiàn)有的自媒體賬號(hào)轉(zhuǎn)化成微信小程序。內(nèi)容創(chuàng)業(yè)者只要照常更新自媒體，這些內(nèi)容就能自動(dòng)更新到小程序。

簡(jiǎn)而言之，做為一個(gè)新的開發(fā)平臺(tái)，微信小程序從本身的穩(wěn)定性，以及配套的工具鏈上都不算完善，這對(duì)于早期開發(fā)者而言，需要耗費(fèi)額外精力去嘗試和探索，但這也許就是一個(gè)新平臺(tái)的價(jià)值和代價(jià)吧。