打造微信小程序組件化開發框架

正文

作為第一批小程序內測用戶，我很有幸見證了小程序的成長，小程序上手十分簡單，容易理解。但同時，因為運行環境的原因導致小程序無法使用市面上的流行框架。小程序本身提供一此特性如：模塊化，模板，數據綁定等，能極大的方便了使用慣MVVM框架的用戶。

在幾個月的開發歷程里，我一直希望能有一套方案更大可能的讓小程序開發更貼近于當下開發習慣，因此才會有 wepy 。通過 wepy 開發的代碼經過編譯后，能生成一份完美運行在小程序端的代碼，而且 wepy 的目的就是讓小程序開發更貼近于傳統H5框架開發，讓小程序能像開發H5一樣支持引入NPM包，支持組件化開發以及支持JS新特性等等。

小程序框架wepy文檔

成品DEMO展示

一個是使用 wepy new demo 命令生成的標準demo
一個是基于wepy開發的手機充值的完整demo。
一個是基于wepy開發的開源的仿微信的聊天界面

以上三個demo均在安卓機和IOS機上運行過通。

附上DEMO下載地址

https://github.com/wepyjs/wepy-wechat-demo

快速入門

代碼規范：

變量與方法使用盡量使用駝峰式命名，避免使用 $ 開頭。

以 $ 開頭的方法或者屬性為框架內建方法或者屬性，可以被使用，使用前請參考文中提供的API文檔。
入口，頁面，組件的命名后綴為 .wpy 。外鏈的文件可以是其它后綴。

請參考文中的wpy文件說明
使用ES6語法開發。

框架在ES6下開發，因此也需要使用ES6開發小程序，ES6中有大量的語法糖可以讓我們的代碼更加簡潔高效。
使用Promise

框架默認對小程序提供的API全都進行了 Promise 處理，甚至可以直接使用 async/await 等新特性進行開發。

項目創建與使用

安裝wepy

以下安裝都通過 npm 安裝

安裝 wepy 命令行工具
```
npm install wepy-cli -g
```
在開發目錄生成開發DEMO
```
wepy new myproject
```
開發實時編譯
```
wepy build --watch
```

項目目錄結構

開發使用說明

使用微信開發者工具新建項目，本地開發選擇 dist 目錄。
微信開發者工具 → 項目 → 關閉ES6轉ES5。
本地項目根目錄運行 wepy build --watch ，開啟實時編譯。

主要解決問題：

1. 開發模式轉換

在原有的小程序的開發模式下進行再次封裝，更貼近于現有MVVM框架開發模式。框架在開發過程中參考了一些現在框架的一些特性，并且融入其中，以下是使用wepy前后的代碼對比圖。

官方DEMO代碼：

基于wepy的實現：

2. 支持組件化開發。

參見文中章節：組件

示例代碼：

3. 支持加載外部NPM包。

在編譯過程當中，會遞歸遍歷代碼中的 require 然后將對應依賴文件從node_modules當中拷貝出來，并且修改 require 為相對路徑，從而實現對外部NPM包的支持。如下圖：

4. 單文件模式，使得目錄結構更加清晰。

官方目錄結構要求app必須有三個文件 app.json ， app.js ， app.wxss ，頁面有4個文件 index.json ， index.js ， index.wxml ， index.wxss 。而且文件必須同名。

所以使用wepy開發前后開發目錄對比如下：

官方DEMO：

使用wepy框架后目錄結構：

5. 默認使用babel編譯，支持ES6/7的一些新特性。

用戶可以通過修改 .wepyrc 配置文件，配置自己熟悉的babel環境進行開發。默認開啟使用了一些新的特性如 promise ， async/await 等等。

示例代碼：

6. 針對原生API進行優化。

對現在API進行promise處理，同時修復一些現有API的缺陷，比如：wx.request并發問題等。

原有代碼：

基于wepy實現代碼：

在同時并發10個request請求測試時：

不使用wepy:

使用wepy后：

進階說明

.wepyrc 配置文件說明

執行 wepy new demo 后，會生成類似配置文件。

wpyExt：缺省值為’.wpy’，IDE默認情況下不會對此文件類型高亮，此時可以修改所有文件為 .vue 后綴(因為與vue高亮規則一樣)，然后將此選項修改為 .vue ，就能解決部分IDE代碼高亮問題。

sass：sass編譯配置，參見( https://github.com/sass/node-sass )

less：less編譯配置，參見( http://lesscss.org/#using-less-usage-in-code )

babel：

babel編譯配置，參見(

http://babeljs.io/docs/usage/options/

)

wpy文件說明

wpy 文件的編譯過程過下：

一個 .wpy 文件分為三個部分：

樣式 <style></style> 對應原有 wxss 。
模板 <template></template> 對應原有 wxml 。
代碼 <script></script> 對應原有 js 。

其中入口文件 app.wpy 不需要 template ，所以編譯時會被忽略。這三個標簽都支持 type 和 src 屬性， type 決定了其代碼編譯過程， src 決定是否外聯代碼，存在 src 屬性且有效時，忽略內聯代碼，示例如下：

標簽對應 type

值如下表所示：

Script說明

程序入口app.wpy

入口 app.wpy 繼承自 wepy.app ，包含一個 config 屬性和其全局屬性、方法、事件。其中 config 屬性對應原有的 app.json ，編譯時會根據 config 生成 app.json 文件，如果需要修改 config 中的內容，請使用系統提供API。

頁面index.wpy

頁面入口繼承自 wepy.page ，主要屬性說明如下：

組件com.wpy

頁面入口繼承自 wepy.component ，屬性與頁面屬性一樣，除了不需要 config 以及頁面特有的一些小程序事件等等。

組件

在小程序中，可以利用 JS模塊化和wxml模板，對業務模塊進行劃分，實現如下效果：

但實際上不同的模塊代碼與事件交互都是在同一個頁面空間處理的，比如說 moduleA 和 moduleB 中同時存在一個 add 響應事件時，就需要在 html 和 js 中分別定義為 moduleA_add ， moduleB_add 。業務模塊復雜之后就不利于開發和維護。

在wepy中，利用組件化的特性可以解決此類問題，如下圖：

ComA 和 ComB 中間的數據與事件相互隔離，可以分別擁有自己的 add 事件。

組件引用

當頁面或者組件需要引入子組件時，需要在頁面或者 script 中的 components 給組件分配唯一id，并且在 template 中添加 <component> 標簽，如 index.wpy 。

頁面和組件都可以引入子組件，引入若干組件后，如下圖：

Index頁面引入A，B，C三個組件，同時組件A和B又有自己的子組件D，E，F，G，H。

組件通信與交互

wepy.component 基類提供三個方法 $broadcast ， $emit ， $invoke ，因此任一頁面或任一組件都可以調用上述三種方法實現通信與交互，如：

$this.$emit('some-event', 1, 2, 3, 4);

組件的事件監聽需要寫在 events 屬性下，如：

$broadcast

$broadcast 事件是由父組件發起，所有子組件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序為廣度優先搜索順序，如上圖，如果 Page_Index 發起一個 $broadcast 事件，那么接收到事件的先后順序為：A, B, C, D, E, F, G, H。如下圖：
$emit

$emit 與 $broadcast 正好相反，事件發起組件的父組件會依次接收到 $emit 事件，如上圖，如果E發起一個 $emit 事件，那么接收到事件的先后順序為：A, Page_Index。如下圖：
$invoke

$invoke 是一個組件對另一個組件的直接調用，通過傳入的組件路徑找到相應組件，然后再調用其方法。

如果想在 Page_Index 中調用組件A的某個方法：
```
this.$invoke('ComA', 'someMethod', 'someArgs');
```
如果想在組件A中調用組件G的某個方法：
```
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
```