淺析微信小程序技術架構（原創）

週末萬里虎抽空體驗了下微信小程序的DEMO，對小程序的開發有了一個基礎的瞭解與認識，今天就來和你們分享一下我對小程序的見解。

從官方DEMO來看，小程序在技術架構上很是清晰易懂。JS負責業務邏輯的實現，而表現層則WXML和WXSS來共同實現，前者其實就是一種微信定義的模板語言，然後者相似CSS。因此對於擅長前端開發，或者WEB開發的廣大開發者而已，小程序的開發可謂下降了很多門檻。

從上面的微信小程序架構圖上能夠清晰的看出，小程序藉助的是JSBridge實現了對底層API接口的調用，因此在小程序裏面開發，開發者不用太多去考慮IOS，安卓的實現差別的問題，安心在上層的視圖層和邏輯層進行開發便可。

當咱們在啓動小程序的時候，你會發現首次啓動的時候，會有點延遲的想象，這裏實際上是小程序正在從CDN和WEB服務器上下載資源致使的延遲。我我的感受這個是目前小程序體驗上的一點小缺憾，有延遲加載的感受。

關於小程序的生命週期，能夠分爲兩個部分來理解：應用生命週期（左側藍色部分）和頁面生命週期（右側綠色部分）。其中應用的生命週期是這樣一個流程：一、用戶首次打開小程序，觸發 onLaunch（全局只觸發一次）。二、小程序初始化完成後，觸發onShow方法，監聽小程序顯示。三、小程序從前臺進入後臺，觸發 onHide方法。四、小程序從後臺進入前臺顯示，觸發 onShow方法。五、小程序後臺運行必定時間，或系統資源佔用太高，會被銷燬。 頁面生命週期是這樣的一個流程：一、小程序註冊完成後，加載頁面，觸發onLoad方法。二、頁面載入後觸發onShow方法，顯示頁面。三、首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。四、當小程序後臺運行或跳轉到其餘頁面時，觸發onHide方法。五、當小程序有後臺進入到前臺運行或從新進入頁面時，觸發onShow方法。六、當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。同時，應用生命週期會影響到頁面生命週期。

綜上來看，小程序的技術架構上的清晰明瞭，相比沉重的原生APP開發而已要好理解的多。而近期小程序官方逐步的釋放小程序的一些入口，因而可知小程序也將慢慢的獲得微信官方更大的流量支持。萬里虎我的仍是很是看好小程序的將來，簡單、高效、方便、快捷的用戶體驗，這些都符合一個好程序的特質。小程序也許會在不久的未來成爲下一個金礦，吸引更多開發者涌入。

---

 

如下來自網友：

1. 框架程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。一個框架程序主體部分由三個文件組成，必須放在項目的根目錄。

 

文件	做用
app.js	小程序(全局)邏輯
app.json	小程序(全局)公共設置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等
app.wxss	小程序公共(全局)樣式表

 

3. 一個框架頁面由四個文件組成：

文件類型	做用
js	頁面邏輯
wxml	頁面結構，框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。
wxss	是一套樣式語言，用於描述 WXML 的組件樣式。用來決定 WXML 的組件應該怎麼顯示。
json	頁面配置

按照『約定優於配置』的原則，一個框架頁面至少包含js、wxml、wxss三個文件類型，文件名要同樣，例如首頁index.js、index.wxml、index.wxss,而且要放在同一文件夾下。頁面註冊時，文件名不須要寫文件後綴，由於框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。