微信小程序初體驗

本文最早發表在 豌豆公主前端研發
本週在團隊內作了一次分享，主題就是關於小程序的，因此將內容整理成文章，以便你們共同探討。

1、什麼是小程序

定義

首先咱們先來了解一下一度致使業界爲之高潮的「小程序」到底是個什麼鬼。

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

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

張小龍定義

從字面上看，小程序就是一個基於微信的應用，這種應用無需從應用市場下載安裝，經過掃碼或搜索的方式即可直接使用，簡單來講就是：基於微信，無需安裝，觸手可及，用完即走。
既然是基於微信，觸手可及，在保證方便快捷體驗同時便會有一些限制，而這個限制就體如今「小」上面，咱們來看一下「小」在哪裏：

限制

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

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

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

最初時的限制爲1M，這就致使咱們在寫碼是須要儘可能注意命名，同時圖片等資源不要放在本地，以便控制代碼包的大小。

DOM節點不超過16000個

這個限制對於一個輕量的應用來講還好，並不太容易觸碰。

2、如何上手

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

由於小程序是基於微信的，因此整套開發、上傳、審覈、發佈流程都有着嚴格的限制，很像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。

3、運行機制

在前面的介紹中，咱們發現小程序的代碼結構與咱們平時前端開發的技術棧（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在頂部的導航，這一層即是用來渲染系統原生組件的，兩層疊加在一塊兒，即是咱們看到的樣子了，這一部分，有興趣的同窗能夠再深刻一步進行分析研究。

4、當前存在的問題

接觸一段時間小程序開發後，仍是會發現他的一些不盡如人意的地方，好比，不支持cookie，基於現有的服務端接口開發的話，必須須要本身去模擬一套cookie的實現，咱們這邊是經過localstorage進行封裝的；限於包的大小，WXSS沒法使用本地的資源。

5、新能力

新組件

前段時間新增一個酷炫的組件，這一點改進能夠說是十分大的，由於此前的小程序僅限於本身程序內頁面的跳轉，沒法訪問h5頁面，而新增的組件只需在後臺配置好信任的域名，即可以輕鬆實現跳轉了，腦補一下，之後是否是隻須要把小程序作一個殼子，內嵌入原有的移動端站點，即可以迅速將服務拓展到小程序端了。

通知

常規的h5移動站點一個硬傷即是沒法對用戶進行觸達，小程序這邊的一個優點即是微信中的模板消息功能，用戶在小程序內觸發支付和表單提交操做後，可容許開發者向用戶在7天內推送有限條數的模板消息，這一點在召回上有很大的意義。
除了上面兩點，小程序還支持客服、數據統計等輔助功能。

6、總結

歷經兩個多月斷斷續續的開發，豌豆公主的小程序已經發布上線，感興趣的同窗能夠體驗一下

截圖

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

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