本周在團隊內做了一次分享，主題就是關于小程序的，所以將內容整理成文章，以便大家共同探討。

一、什么是小程序

定義

首先我們先來了解一下一度導致業(yè)界為之高潮的“小程序”究竟是個什么鬼。

微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

上面是微信官方對小程序的一個定義，再來看一下張小龍對小程序的定義：

從字面上看，小程序就是一個基于微信的應用，這種應用無需從應用市場下載安裝，通過掃碼或搜索的方式便可直接使用，簡單來說就是：基于微信，無需安裝，觸手可及，用完即走。
既然是基于微信，觸手可及，在保證方便快捷體驗同時便會有一些限制，而這個限制就體現(xiàn)在“小”上面，我們來看一下“小”在哪里：

限制

無法同時打開超過5個窗口

在一個小程序中，用戶的頁面瀏覽層級最多為5級，超出后會報錯，所以對于電商應用來說，這是個需要重點關注的地方，以豌豆公主為例，我們商品詳情頁中含有品牌、視頻、推薦等模塊，用戶的瀏覽路徑很容易便超過5級。

代碼編譯后大小不超過2M

最初時的限制為1M，這就導致我們在寫碼是需要盡量注意命名，同時圖片等資源不要放在本地，以便控制代碼包的大小。

DOM節(jié)點不超過16000個

這個限制對于一個輕量的應用來說還好，并不太容易觸碰。

二、如何上手

前面我們對小程序有了一個基本的了解，接下來看一下，如何快速上手。

因為小程序是基于微信的，所以整套開發(fā)、上傳、審核、發(fā)布流程都有著嚴格的限制，很像iOS平臺的應用開發(fā)流程。首先必須到微信的小程序后臺去申請賬號，流程和申請公眾號相似，申請通過會拿到一個APPID，然后需要下載微信開發(fā)者工具，通過開發(fā)者工具，可以進行開發(fā)、調試、編譯、上傳等各環(huán)節(jié)的操作。下載后輸入APPID，可以快速創(chuàng)建一個項目：

基本的代碼結構如下：

json配置

我們可以看到在項目的根目錄有一個 app.json 和 project.config.json，此外在 pages/logs 目錄下還有一個 logs.json.其中app.json 是對當前小程序的全局配置，包括了小程序的所有頁面路徑、底部 tab 等。而page目錄下的json文件是對獨立頁面屬性的配置。

WXML模板

我們平時的前端開發(fā)工作中，接觸到較多的是HTML，而在小程序里，充當頁面模板角色的便是WXML，與HTML不同的是，WXML是基于基礎組件和事件系統(tǒng)構建頁面的標簽語言，微信提供了一些基礎的組件如view、text、button等，同時我們可以在組件上進行事件綁定，如bindtap等。

WXSS

參考WXML，WXSS具有CSS的大部分特性，但同時對CSS進行了擴充和修改，最大的一點不同便是，小程序中的尺寸專用單位——rpx，可以根據屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

JS交互邏輯

在小程序中，處理頁面事件及業(yè)務邏輯的代碼都寫在js中，同時我們還可以調用微信封裝的豐富的API。

三、運行機制

在前面的介紹中，我們發(fā)現(xiàn)小程序的代碼結構與我們平時前端開發(fā)的技術棧（HTML+CSS+JavaScript）十分相似，編碼規(guī)范基本符合Web規(guī)范，本質上也是在Web體系下構建的，那么，我們是否可以理解小程序就是HTML5呢？

答案肯定是否定的，我們來分析下為什么是否定的：首先小程序是運行在微信App中的，而非Browser或者Node環(huán)境中，不存在window對象，無法操作DOM，更無法直接訪問系統(tǒng)API（可以間接通過微信封裝的API訪問）。其次，上面代碼結構中我們也可以看出WXML，WXSS與HTML和CSS還是有著很大的差別的。所以，小程序與HTML5是兩個不同的概念。

運行環(huán)境

我們前面說到小程序運行在微信App中，這一點沒有錯，但不夠全面，因為忽略了很重要的一端——微信開發(fā)者工具。相信很對同學都知道，微信開發(fā)者工具是基于NWjs開發(fā)的（Mac系統(tǒng)用戶可以通過此路徑訪問到源碼：/Applications/wechatwebdevtools.app/Contents/Resources ）這里說一點題外話，這個NW.js是個什么鬼呢？NW.js 是基于 Chromium 和 Node.js 運行的， 以前也叫nodeWebkit，可以通過前端開發(fā)技術進行桌面應用的開發(fā)，與此相似的還有一個叫做Electron的框架，像我們熟悉的VSCode、Atom便是基于Electron開發(fā)的，相比于NW，Electron在社區(qū)活躍度、文檔維護等多方面都是有較大優(yōu)勢的，此前也在網上有看到大家猜測微信為何沒有Electron而選用NW，有人猜測是因為代碼安全考慮，有人猜測是因為NW兼容WindowsXP系統(tǒng)，每個理由似乎都有些道理，但我咨詢過微信官方人員后，對方表示“乃們都想太多了，采用NW.js最根本的原因是它對調試工具的支持更完備”。

小程序在開發(fā)者工具里是通過nwjs+react實現(xiàn)的，node提供本地API支持，webkit提供web環(huán)境，這里不做贅述，我們重點研究一下小程序在真機環(huán)境中的運行。

在真機中的實現(xiàn)和ReactNative有點相似，但不同的是RN是調用系統(tǒng)原生組件渲染，而小程序依然是在Webview里進行渲染的，絕大部分組件還是會被轉成HTML代碼進行渲染的，而JS分別在JSCore（iOS）和騰訊瀏覽器的X5內核（Android）運行我們先來看一下它的架構：

從上圖可以看出，小程序的前端架構主要分為兩部分：View視圖層和App Service邏輯層。顧名思義，View層是進行UI渲染的，將邏輯層的數(shù)據反應成視圖，同時將視圖層的事件發(fā)送給邏輯層。AppService層用來邏輯處理、數(shù)據請求、接口調用，它們在兩個線程里運行，視圖層和邏輯層通過系統(tǒng)層的JSBridage進行通信，邏輯層把數(shù)據變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層把觸發(fā)的事件通知到邏輯層進行業(yè)務處理。View層和邏輯層是通過事件的publish和subscribe機制實現(xiàn)通信的，這一點感興趣的同學可以看一下WeixinJSBridge對象的封裝。

小程序在最后都會打包成這樣一個結構：

最上面的WAService.js ，提供邏輯層基礎的API能力，WAWebview.js ，提供視圖層基礎的API能力，WAConsole.js 控制臺，app-config.js 是小程序完整的配置，包含我們通過app.json里的所有配置，app-service.js 我們自己的JS代碼，全部打包到這個文件，page-frame.html 小程序視圖的模板文件，所有的頁面都使用此加載渲染，且所有的WXML都拆解為JS實現(xiàn)打包到這里，我們通過開發(fā)版微信對小程序進行調試可以看到這樣的一個情況：

小程序的頁面最終還是一個html文件，并沒有什么不一樣的，聯(lián)想到前面提到的近似原生的操作體驗，無非是多了一個頁面緩存能力，本質上依然是Webview渲染的網頁?？吹竭@里，有些同學不免有些失望，說好的原生組件渲染呢？不要急，我們在文檔中還看到了這樣一段話

map、canvas、video、textarea 是由客戶端創(chuàng)建的原生組件，原生組件的層級是最高的，所以頁面中的其他組件無論設置 z-index 為多少，都無法蓋在原生組件上。 原生組件暫時還無法放在 scroll-view 上，也無法對原生組件設置 css 動畫。

這就不難理解了，常規(guī)的view、text等組件最終被轉成html的標簽進行渲染，但是里面還是提供很多系統(tǒng)的原生組件進行渲染的，證據在這里：

上面截圖中的頁面包含了個video組件，而這個組件正是調用系統(tǒng)原生組件渲染的，我們在調試代碼中無法找到這個節(jié)點，因為沒有進一步查看這一部分是如何實現(xiàn)的，簡單猜想一下是，在Webview上面還會有一個層，從圖中可以看出，上滑時視頻會蓋住fix在頂部的導航，這一層便是用來渲染系統(tǒng)原生組件的，兩層疊加在一起，便是我們看到的樣子了，這一部分，有興趣的同學可以再深入一步進行分析研究。

四、當前存在的問題

接觸一段時間小程序開發(fā)后，還是會發(fā)現(xiàn)他的一些不盡如人意的地方，比如，不支持cookie，基于現(xiàn)有的服務端接口開發(fā)的話，必須需要自己去模擬一套cookie的實現(xiàn)，我們這邊是通過localstorage進行封裝的；限于包的大小，WXSS無法使用本地的資源。

五、新能力

新組件

前段時間新增一個酷炫的組件，這一點改進可以說是十分大的，因為此前的小程序僅限于自己程序內頁面的跳轉，無法訪問h5頁面，而新增的組件只需在后臺配置好信任的域名，便可以輕松實現(xiàn)跳轉了，腦補一下，以后是不是只需要把小程序做一個殼子，內嵌入原有的移動端站點，便可以迅速將服務拓展到小程序端了。

通知

常規(guī)的h5移動站點一個硬傷便是無法對用戶進行觸達，小程序這邊的一個優(yōu)勢便是微信中的模板消息功能，用戶在小程序內觸發(fā)支付和表單提交操作后，可允許開發(fā)者向用戶在7天內推送有限條數(shù)的模板消息，這一點在召回上有很大的意義。
除了上面兩點，小程序還支持客服、數(shù)據統(tǒng)計等輔助功能。

六、總結

歷經兩個多月斷斷續(xù)續(xù)的開發(fā)，豌豆公主的小程序已經發(fā)布上線，感興趣的同學可以體驗一下

小程序自面世以來，先是萬眾期待，后面表現(xiàn)不盡如人意，經歷了一段漫長的尷尬期；8月份開始，一些小規(guī)模的電商應用從小程序端獲取到了可觀的流量，同時引起了資本市場的一些關注，可以說發(fā)展的道路是曲折的。然而作為技術，作為前端，我覺得小程序的健康發(fā)展對整個行業(yè)的生態(tài)是有很大好處的，給行業(yè)以更多可能，給開發(fā)者以更多回報（畢竟是基于前端技術棧的），這還不夠嗎？

以上只是鄙人的一些愚見，還請眾大俠指點，一定虛心接受，微信號（xysz1991）