微信小程序的開發框架體(ti) 驗起來，還不錯——自帶了UI框架。但是問題是它的IDE，表現起來相當的糟糕——其實主要是因為(wei) ，我當時買(mai) WebStorm License買(mai) 了好多年。所以，我覺得他的IDE真不如我這個(ge) 付費好用。

而且，作為(wei) 一個(ge) 擁護自由和開源的“GitHub 中國區首席Markdown程序員”。微信在微信小程序引導著Web開向封閉，我們(men) 再也不能愉快地分享我們(men) 的代碼了。

如果我們(men) 放任下去，未來的Web世界令人堪憂。

好了，廢話說完了，本文隻是一個(ge) Demo的介紹。文章太長不想看，可以直接看Demo哈哈：

GitHub: https://github.com/phodal/weapp-webdemo 
預覽：https://weapp.phodal.com/

真實世界下的MINA三基本元素

微信小程序的背後運行的是一個(ge) 名為(wei) MINA框架。在之前的幾篇文章裏，我們(men) 介紹得差不多了。現在讓我們(men) 來作介紹pipeline：

Transform WXML和WXSS

當我們(men) 修改完WXML、WXSS的時候，我們(men) 需要重新編譯項目才能在瀏覽器上看到效果。這時候後台就會(hui) 執行一些transform動作： 

WCC來轉換WXML為(wei) 一個(ge) genrateFun，執行這個(ge) 方法將會(hui) 得到一個(ge) Virtual Dom

WXSS就會(hui) 轉換WXSS為(wei) CSS——這一點有待商榷。

WCC和WXSS，可以從(cong) vendor目錄下獲取到，在“微信Web開發者工具”下敲入help，你就會(hui) 得到下麵的東(dong) 東(dong) ：

運行openVendor()，你就會(hui) 得到上麵的WCSS、WXSS、WAService.js、WAWebview.js四個(ge) 文件了。

Transform js文件

對於(yu) JS文件來說，則是一個(ge) 拚裝的過程，如下是我們(men) 的app.js文件：

它在轉換後會(hui) 變成：

我假裝你已經知道這是什麽(me) 了，反正我也不想、也不會(hui) 解釋了~~。同理於(yu) ：

至於(yu) 它是如何replace或者apend到HTML中，我就不作解釋了。

MINA如何運行？

為(wei) 了運行一個(ge) Page，我們(men) 需要有一個(ge) Virtual Dom，即用WCC轉換後的函數，如：

然後在我們(men) 的HTML中加一個(ge) script，如

就會(hui) 湊發這個(ge) 事件了。我簡單的拆分了WXWebview.js得到了幾個(ge) 功能組件：

• define.js，這裏就是定義AMD模塊化的地方
• exparser.js，用於轉換WXML標簽到HTML標簽
• exparser-behvaior.js，定義不同標簽的一些行為
• mobiles.js，應該是一個事件庫，好像我並不關心。
• page.js，核心代碼，即Page、App的定義所在。
• report.js，你所說的一切都能夠用作為你的呈堂證供。
• virtual_dom.js，一個virtual dom實現結合wcc使用，裏麵應該還有component.css，也可能是叫weui
• wa-wx.js，定義微信各種API以及WebView和Native的地方，和下麵的WX有衝突。
• wx.js，同上，但是略有不同。
• wxJSBridge.js，Weixin JS Bridge

於(yu) 是，我就用上麵的組件來定義(yi) 不同的位置好了。當我們(men) 觸發自定義(yi) 的generateFuncReady事件時，將由virtual_dom.js來接管這次Render：

因此，這裏就是負責DOM初始化的地方了，這裏得到的Dom結果是這樣的：

而我們(men) 寫(xie) 的WXML是這樣的：

很明顯view會(hui) 被轉換為(wei) wx-view，text會(hui) 被轉換為(wei) wx-text等等，以此類推。這個(ge) 轉換是在virtual dom.js中調用的，調用的方法就是exparser。

遺憾的是我現在困在 data 初始化上麵了~~，這裏麵有兩(liang) 套不同的事件係統，有一些困擾。其中有一個(ge) 是：WeixinJSBridge、還有一個(ge) 是app engine中的事件係統，兩(liang) 個(ge) 好像不能互調。

使用WebStorm開發

在瀏覽器上運行之前，我們(men) 需要簡單的mock一些方法，如： 

• window.webkit.messageHandlers.invokeHandler.postMessage
• window.webkit.messageHandlers.publishHandler.postMessage
• WeixinJSCore.publishHandler
• WeixinJSCore..invokeHandler

然後把 config.json中的一些內(nei) 容變成__wxConfig，如： 

如這裏我們(men) 的appname是哈哈哈哈哈哈哈——我家在福建。

然後在我們(men) 的HTML中引入各個(ge) JS文件，啦啦。

我們(men) 還需要一個(ge) 自動化的glup腳本來watch wxml和wxss的修改，然後編譯，如：

說了這麽(me) 多，你還不如去看代碼好了：

GitHub: https://github.com/phodal/weapp-webdemo 
預覽：https://weapp.phodal.com/