微享商盟系統開發底層框架搭建原理
微享商盟主要基於微信小程序框架開發，小程序采用HTML,CSS和JS等搭建的一套框架，微信官方給它們取了一個很牛逼的名字：WXML,WXSS，但本質上還是在整個WEB體系之下構建的。
WXML，個人猜測在取這個名字的是微信的Xml，說到底就是xml的一個子集。WXML采用微信自定義的少量標簽WXSS，大家可以理解為就是自定義的CSS。實現邏輯部分的JS還是通用的ES規範，並且runtime還是Webview（IOS WKWEBVIEW, ANDROID X5）。
小程序
小程序目錄結構
微享商盟系統開發，微享商盟小程序開發 134.java.2220.php.2839..net 框架結構搭建歡迎交流！
一個完整的小程序主要由以下幾部分組成：
一個入口文件：app.js
一個全局樣式：app.wxss
一個全局配置：app.json
頁面：pages下，每個頁面再按文件夾劃分，每個頁面4個文件
視圖：wxml，wxss
邏輯：js，json（頁面配置，不是必須）
註：pages裏面還可以再根據模塊劃分子目錄，孫子目錄，只需要在app.json裏註冊時填寫路徑就行。
小程序打包
開發完成後，我們就可以通過這裏可視化的按鈕，點擊直接打包上傳發布，審核通過後用戶就可以搜索到了。
那麽打包怎麽實現的呢？
這就涉及到這個編輯器的實現原理和方式了，它本身也是基於WEB技術體系實現的，nwjs+react，nwjs是什麽：簡單是說就是node+webkit，node提供給我們本地api能力，而webkit提供給我們web能力，兩者結合就能讓我們使用JS+HTML實現本地應用程序。
既然有nodejs，那上面的打包選項裏的功能就好實現了。
ES6轉ES5：引入babel-core的node包
CSS補全：引入postcss和autoprefixer的node包（postcss和autoprefixer的原理看這裏）
代碼壓縮：引入uglifyjs的node包
註：在android上使用的x5內核，對ES6的支持不好，要兼容的話，要麽使用ES5的語法或者引入babel-polyfill兼容庫。
打包後的目錄結構
小程序打包後的結構如下：
所有的小程序基本都最後都被打成上面的結構
1、WAService.js 框架JS庫，提供邏輯層基礎的API能力
2、WAWebview.js 框架JS庫，提供視圖層基礎的API能力
3、WAConsole.js 框架JS庫，控制臺
4、app-config.js 小程序完整的配置，包含我們通過app.json裏的所有配置，綜合了默認配置型
5、app-service.js 我們自己的JS代碼，全部打包到這個文件
6、page-frame.html 小程序視圖的模板文件，所有的頁面都使用此加載渲染，且所有的WXML都拆解為JS實現打包到這裏
7、pages 所有的頁面，這個不是我們之前的wxml文件了，主要是處理WXSS轉換，使用js插入到header區域。
小程序架構
微信小程序的框架包含兩部分View視圖層、App Service邏輯層，View層用來渲染頁面結構，AppService層用來邏輯處理、數據請求、接口調用，它們在兩個進程（兩個Webview）裏運行。
視圖層和邏輯層通過系統層的JSBridage進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。
小程序架構圖：
小程序啟動時會從CDN下載小程序的完整包，一般是數字命名的,如：_-2082693788_4.wxapkg
小程序技術實現
小程序的UI視圖和邏輯處理是用多個webview實現的，邏輯處理的JS代碼全部加載到一個Webview裏面，稱之為AppService，整個小程序只有一個，並且整個生命周期常駐內存，而所有的視圖（wxml和wxss）都是單獨的Webview來承載，稱之為AppView。所以一個小程序打開至少就會有2個webview進程，正式因為每個視圖都是一個獨立的webview進程，考慮到性能消耗，小程序不允許打開超過5個層級的頁面，當然同是也是為了體驗更好。
AppService
可以理解AppService即一個簡單的頁面，主要功能是負責邏輯處理部分的執行，底層提供一個WAService.js的文件來提供各種api接口，主要是以下幾個部分：
消息通信封裝為WeixinJSBridge（開發環境為window.postMessage, IOS下為WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage，android下用WeixinJSCore.invokeHandler）
1、日誌組件Reporter封裝
2、wx對象下面的api方法
3、全局的App,Page,getApp,getCurrentPages等全局方法
4、還有就是對AMD模塊規範的實現
然後整個頁面就是加載一堆JS文件，包括小程序配置config，上面的WAService.js（調試模式下有asdebug.js），剩下就是我們自己寫的全部的js文件，一次性都加載。
微享商盟系統開發底層框架搭建原理