小程式的架構及實現機制，通道服務及會話管理 小程式架構及實現機制 小程式並不是 H5 應用，而是更偏向於傳統的 CS 架構，它是基於數據驅動的模式，一切皆組件（視圖組件）。所以建議在開發小程式時不要以web app的開發思維去思考。小程式開發語言是獨立的一整套開發語言體系，既與Html+CSS+Ja ...
小程式的架構及實現機制，通道服務及會話管理
小程式架構及實現機制
小程式並不是 H5 應用，而是更偏向於傳統的 CS 架構，它是基於數據驅動的模式，一切皆組件（視圖組件）。所以建議在開發小程式時不要以web app的開發思維去思考。小程式開發語言是獨立的一整套開發語言體系，既與Html+CSS+JavaScript一脈相承，而又有所區別，同時提供了各種自有的組件和 API。
-
框架基本都是建立在window、document對象上，但小程式是沒有window、document，或者說沒有瀏覽器BOM這個宿主環境。你可以理解為小程式的宿主環境是類似node的宿主環境，而不是瀏覽器客戶端。所以決定了無法使用Dom庫，如JQuery。
-
而又並非使用URL訪問，而是通過通道服務進行通訊和會話管理，所以它不支持Cookie存儲，同時訪問不存在跨域問題。
-
不相容Html標記,而遵循XML語法，而提供自身封裝類似的組件與API來實現頁面展現。
-
模塊化，形式上支持CommonJs，載入引用更像ES6。小程式形式支持CommonJS，通過require載入，跟node、seajs類似。但是通過require載入的是引用的賦值，而不是CommonJS中的值的緩存。
從框架組件設計來看，框架本身採用面向狀態的編程方式，組件部分類似redux的設計（實際不是redux實現的）。組件的View在action操作後，只能通過action的業務處理進行更新View。而框架是單向數據綁定，無法自動更新。對於這一類View組件自帶action的，建議進行必要再封裝。封裝可以考慮aop的方式動態的註冊&卸載。
對於業務頁面的開發，可以將頁面視為一個頁面組件。在這個頁面組件，完成了以下工作：
-
負責初始化組件state（微信）
-
負責組合子view組件形成頁面效果（開發者）
-
確定js 與view 匹配的數據（開發者）
-
負責註冊業務邏輯對象提供的業務邏輯方法（開發者）
-
負責管理業務邏輯對象（開發者）
頁面wxml與頁面js的通信如下（簡化了微信框架的工作）
官方開發文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107
知識儲備
-
基礎:HTML+JS+CSS
-
進階：React、Vue
-
語法：Mustache、XML
-
規範：CommonJS
微信小程式的架構
一個小程式頁麵包含4個文件：
1.WXML：頁面結構 用於創建頁面對象，以及處理頁面生命周期控制和數據處理
2.JS：頁面邏輯 設置當前頁面工作時的window的配置
3.WXSS：頁面樣式 用於定義頁面中元素結構，遵循XML語法，不是HTML語法，增加了flex佈局
4.JSON：頁面配置 用於定義頁面樣式的，語法遵循CSS語法，擴展了CSS基本用法和長度單位
小程式的實現機制
小程式的開發是基於微信提供的一套應用框架進行開發的。微信通過封裝微信客戶端提供的文件系統、網路通信、任務管理、數據安全等基礎功能，對上層提供了一套完整的Javascript Api，使得開發者能夠非常方便的使用到微信客戶端提供的各種基礎功能，快速構建一個應用。框架設計如下：
框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，併在視圖層與邏輯層之間通過單向數據綁定進行數據傳輸，使開發者更加聚焦於數據與邏輯上。
通道服務與會話管理的實現
通道服務是基於WebSocket完成的，而會話管理需要完成微信要求的鑒權流程。微信的請求介面 wx.request 並不支持 cookie 傳遞，所以會話層不能使用傳統的 Session 方式。
會話服務和通道服務與服務模塊之間的關係
小程式與業務伺服器之間通信
通道服務是基於WebSocket實現的具體流程如下：
小程式與業務伺服器之間通信流程
建立 WebSocket 連接的過程
會話管理的實現流程與鑒權流程如下：
會話的建立流程
會話的驗證流程
設計架構圖
參考引用資料：小程式官方，騰訊雲，騰訊Bugly，微信小程式club的作者【風瀟雨落】
下一篇，小程式開發基本框架及其限制與優化
歡迎關註公眾號（hongji8410）和加入QQ群一起交流（522342554）
