wepy小程序組件化開發(fā)框架

wepy 是一個小程序組件化開發(fā)框架。

組件

小程序支持js模塊化，但彼此獨立，業(yè)務(wù)代碼與交互事件仍需在頁面處理。無法實現(xiàn)組件化的松耦合與復(fù)用的效果。 例如模板A中綁定一個bindtap="myclick"，模板B中同樣綁定一樣bindtap="myclick"，那么就會影響同一個頁面事件。對于數(shù)據(jù)同樣如此。因此只有通過改變變量或者事件方法，或者給其加不同前綴才能實現(xiàn)綁定不同事件或者不同數(shù)據(jù)。當(dāng)頁面復(fù)雜之后就十分不利于開發(fā)維護(hù)。 因此wepy讓小程序支持組件化開發(fā)，組件的所有業(yè)務(wù)與功能在組件本身實現(xiàn)，組件與組件之間彼此隔離，上述例子在wepy的組件化開發(fā)過程中，A組件只會影響到A綁定的myclick，B也如此。

wepy編譯組件的過程如下：

組件引用

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

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

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

項目目錄結(jié)構(gòu)

├── dist                   微信開發(fā)者工具指定的目錄
├── node_modules           
├── src                    代碼編寫的目錄
|   ├── components         組件文件夾（非完整頁面）
|   |   ├── com_a.wpy      可復(fù)用組件 a
|   |   └── com_b.wpy      可復(fù)用組件 b
|   ├── pages              頁面文件夾（完整頁面）
|   |   ├── index.wpy      頁面 index
|   |   └── page.wpy       頁面 page
|   └── app.wpy            小程序配置項（全局樣式配置、聲明鉤子等）
└── package.json           package 配置

主要解決問題

1. 開發(fā)模式轉(zhuǎn)換

2. 支持組件化開發(fā)

3. 支持加載外部 NPM 包

4. 單文件模式，使得目錄結(jié)構(gòu)更加清晰

5. 默認(rèn)使用 babel 編譯，支持 ES6/7 的一些新特性

6. 針對原生 API 進(jìn)行優(yōu)化