本文最先發表在 豌豆公主前端研發
本週在團隊內做了一次分享，主題就是關於小程式的，所以將內容整理成文章，以便大家共同探討。
一、什麼是小程式
定義
首先我們先來了解一下一度導致業界為之高潮的“小程式”究竟是個什麼鬼。
微信小程式是一種全新的連線使用者與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。
上面是微信官方對小程式的一個定義，再來看一下張小龍對小程式的定義：
從字面上看，小程式就是一個基於微信的應用，這種應用無需從應用市場下載安裝，通過掃碼或搜尋的方式便可直接使用，簡單來說就是：基於微信，無需安裝，觸手可及，用完即走。
既然是基於微信，觸手可及，在保證方便快捷體驗同時便會有一些限制，而這個限制就體現在“小”上面，我們來看一下“小”在哪裡：
限制
無法同時開啟超過5個視窗
在一個小程式中，使用者的頁面瀏覽層級最多為5級，超出後會報錯，所以對於電商應用來說，這是個需要重點關注的地方，以豌豆公主為例，我們商品詳情頁中含有品牌、視訊、推薦等模組，使用者的瀏覽路徑很容易便超過5級。
程式碼編譯後大小不超過2M
最初時的限制為1M，這就導致我們在寫碼是需要儘量注意命名，同時圖片等資源不要放在本地，以便控制程式碼包的大小。
DOM節點不超過16000個
這個限制對於一個輕量的應用來說還好，並不太容易觸碰。
二、如何上手
前面我們對小程式有了一個基本的瞭解，接下來看一下，如何快速上手。
因為小程式是基於微信的，所以整套開發、上傳、稽核、釋出流程都有著嚴格的限制，很像iOS平臺的應用開發流程。首先必須到微信的小程式後臺去申請賬號，流程和申請公眾號相似，申請通過會拿到一個APPID，然後需要下載微信開發者工具，通過開發者工具，可以進行開發、除錯、編譯、上傳等各環節的操作。下載後輸入APPID，可以快速建立一個專案：
基本的程式碼結構如下：
json配置
我們可以看到在專案的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json.其中app.json 是對當前小程式的全域性配置，包括了小程式的所有頁面路徑、底部 tab 等。而page目錄下的json檔案是對獨立頁面屬性的配置。
WXML模板
我們平時的前端開發工作中，接觸到較多的是HTML，而在小程式裡，充當頁面模板角色的便是WXML，與HTML不同的是，WXML是基於基礎元件和事件系統構建頁面的標籤語言，微信提供了一些基礎的元件如view、text、button等，同時我們可以在元件上進行事件繫結，如bindtap等。
WXSS
參考WXML，WXSS具有CSS的大部分特性，但同時對CSS進行了擴充和修改，最大的一點不同便是，小程式中的尺寸專用單位——rpx，可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。
JS互動邏輯
在小程式中，處理頁面事件及業務邏輯的程式碼都寫在js中，同時我們還可以呼叫微信封裝的豐富的API。
三、執行機制
在前面的介紹中，我們發現小程式的程式碼結構與我們平時前端開發的技術棧（HTML+CSS+JavaScript）十分相似，編碼規範基本符合Web規範，本質上也是在Web體系下構建的，那麼，我們是否可以理解小程式就是HTML5呢？
答案肯定是否定的，我們來分析下為什麼是否定的：首先小程式是執行在微信App中的，而非Browser或者Node環境中，不存在window物件，無法操作DOM，更無法直接訪問系統API（可以間接通過微信封裝的API訪問）。其次，上面程式碼結構中我們也可以看出WXML，WXSS與HTML和CSS還是有著很大的差別的。所以，小程式與HTML5是兩個不同的概念。
執行環境
我們前面說到小程式執行在微信App中，這一點沒有錯，但不夠全面，因為忽略了很重要的一端——微信開發者工具。相信很對同學都知道，微信開發者工具是基於NWjs開發的（Mac系統使用者可以通過此路徑訪問到原始碼：/Applications/wechatwebdevtools.app/Contents/Resources ）這裡說一點題外話，這個NW.js是個什麼鬼呢？NW.js 是基於 Chromium 和 Node.js 執行的， 以前也叫nodeWebkit，可以通過前端開發技術進行桌面應用的開發，與此相似的還有一個叫做Electron的框架，像我們熟悉的VSCode、Atom便是基於Electron開發的，相比於NW，Electron在社群活躍度、文件維護等多方面都是有較大優勢的，此前也在網上有看到大家猜測微信為何沒有Electron而選用NW，有人猜測是因為程式碼安全考慮，有人猜測是因為NW相容WindowsXP系統，每個理由似乎都有些道理，但我諮詢過微信官方人員後，對方表示“乃們都想太多了，採用NW.js最根本的原因是它對除錯工具的支援更完備”。
小程式在開發者工具裡是通過nwjs+react實現的，node提供本地API支援，webkit提供web環境，這裡不做贅述，我們重點研究一下小程式在真機環境中的執行。
在真機中的實現和ReactNative有點相似，但不同的是RN是呼叫系統原生元件渲染，而小程式依然是在Webview裡進行渲染的，絕大部分元件還是會被轉成HTML程式碼進行渲染的，而JS分別在JSCore（iOS）和騰訊瀏覽器的X5核心（Android）執行我們先來看一下它的架構：
從上圖可以看出，小程式的前端架構主要分為兩部分：View檢視層和App Service邏輯層。顧名思義，View層是進行UI渲染的，將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。AppService層用來邏輯處理、資料請求、介面呼叫，它們在兩個執行緒裡執行，檢視層和邏輯層通過系統層的JSBridage進行通訊，邏輯層把資料變化通知到檢視層，觸發檢視層頁面更新，檢視層把觸發的事件通知到邏輯層進行業務處理。View層和邏輯層是通過事件的publish和subscribe機制實現通訊的，這一點感興趣的同學可以看一下WeixinJSBridge物件的封裝。
小程式在最後都會打包成這樣一個結構：
最上面的WAService.js ，提供邏輯層基礎的API能力，WAWebview.js ，提供檢視層基礎的API能力，WAConsole.js 控制檯，app-config.js 是小程式完整的配置，包含我們通過app.json裡的所有配置，app-service.js 我們自己的JS程式碼，全部打包到這個檔案，page-frame.html 小程式檢視的模板檔案，所有的頁面都使用此載入渲染，且所有的WXML都拆解為JS實現打包到這裡，我們通過開發版微信對小程式進行除錯可以看到這樣的一個情況：
小程式的頁面最終還是一個html檔案，並沒有什麼不一樣的，聯想到前面提到的近似原生的操作體驗，無非是多了一個頁面快取能力，本質上依然是Webview渲染的網頁。看到這裡，有些同學不免有些失望，說好的原生元件渲染呢？不要急，我們在文件中還看到了這樣一段話
map、canvas、video、textarea 是由客戶端建立的原生元件，原生元件的層級是最高的，所以頁面中的其他元件無論設定 z-index 為多少，都無法蓋在原生元件上。 原生元件暫時還無法放在 scroll-view 上，也無法對原生元件設定 css 動畫。
這就不難理解了，常規的view、text等元件最終被轉成html的標籤進行渲染，但是裡面還是提供很多系統的原生元件進行渲染的，證據在這裡：
上面截圖中的頁面包含了個video元件，而這個元件正是呼叫系統原生元件渲染的，我們在除錯程式碼中無法找到這個節點，因為沒有進一步檢視這一部分是如何實現的，簡單猜想一下是，在Webview上面還會有一個層，從圖中可以看出，上滑時視訊會蓋住fix在頂部的導航，這一層便是用來渲染系統原生元件的，兩層疊加在一起，便是我們看到的樣子了，這一部分，有興趣的同學可以再深入一步進行分析研究。
四、當前存在的問題
接觸一段時間小程式開發後，還是會發現他的一些不盡如人意的地方，比如，不支援cookie，基於現有的服務端介面開發的話，必須需要自己去模擬一套cookie的實現，我們這邊是通過localstorage進行封裝的；限於包的大小，WXSS無法使用本地的資源。
五、新能力
新元件
前段時間新增一個酷炫的元件，這一點改進可以說是十分大的，因為此前的小程式僅限於自己程式內頁面的跳轉，無法訪問h5頁面，而新增的元件只需在後臺配置好信任的域名，便可以輕鬆實現跳轉了，腦補一下，以後是不是隻需要把小程式做一個殼子，內嵌入原有的移動端站點，便可以迅速將服務擴充到小程式端了。
通知
常規的h5移動站點一個硬傷便是無法對使用者進行觸達，小程式這邊的一個優勢便是微信中的模板訊息功能，使用者在小程式內觸發支付和表單提交操作後，可允許開發者向使用者在7天內推送有限條數的模板訊息，這一點在召回上有很大的意義。
除了上面兩點，小程式還支援客服、資料統計等輔助功能。
六、總結
歷經兩個多月斷斷續續的開發，豌豆公主的小程式已經發布上線，感興趣的同學可以體驗一下
小程式自面世以來，先是萬眾期待，後面表現不盡如人意，經歷了一段漫長的尷尬期；8月份開始，一些小規模的電商應用從小程式端獲取到了可觀的流量，同時引起了資本市場的一些關注，可以說發展的道路是曲折的。然而作為技術，作為前端，我覺得小程式的健康發展對整個行業的生態是有很大好處的，給行業以更多可能，給開發者以更多回報（畢竟是基於前端技術棧的），這還不夠嗎？
以上只是鄙人的一些愚見，還請眾大俠指點，一定虛心接受，微訊號（xysz1991）