wepy小程序組件化開發(fā)框架
wepy 是一個(gè)小程序組件化開發(fā)框架。
組件
小程序支持js模塊化，但彼此獨(dú)立，業(yè)務(wù)代碼與交互事件仍需在頁(yè)面處理。無法實(shí)現(xiàn)組件化的松耦合與復(fù)用的效果。 例如模板A中綁定一個(gè)bindtap="myclick"，模板B中同樣綁定一樣bindtap="myclick"，那么就會(huì)影響同一個(gè)頁(yè)面事件。對(duì)于數(shù)據(jù)同樣如此。因此只有通過改變變量或者事件方法，或者給其加不同前綴才能實(shí)現(xiàn)綁定不同事件或者不同數(shù)據(jù)。當(dāng)頁(yè)面復(fù)雜之后就十分不利于開發(fā)維護(hù)。 因此wepy讓小程序支持組件化開發(fā)，組件的所有業(yè)務(wù)與功能在組件本身實(shí)現(xiàn)，組件與組件之間彼此隔離，上述例子在wepy的組件化開發(fā)過程中，A組件只會(huì)影響到A綁定的myclick，B也如此。
wepy編譯組件的過程如下：
組件引用
當(dāng)頁(yè)面或者組件需要引入子組件時(shí)，需要在頁(yè)面或者script中的components給組件分配唯一id，并且在template中添加<component>標(biāo)簽，如index.wpy。
頁(yè)面和組件都可以引入子組件，引入若干組件后，如下圖：
Index頁(yè)面引入A，B，C三個(gè)組件，同時(shí)組件A和B又有自己的子組件D，E，F(xiàn)，G，H。
項(xiàng)目目錄結(jié)構(gòu)
├── dist 微信開發(fā)者工具指定的目錄 ├── node_modules ├── src 代碼編寫的目錄 | ├── components 組件文件夾（非完整頁(yè)面） | | ├── com_a.wpy 可復(fù)用組件 a | | └── com_b.wpy 可復(fù)用組件 b | ├── pages 頁(yè)面文件夾（完整頁(yè)面） | | ├── index.wpy 頁(yè)面 index | | └── page.wpy 頁(yè)面 page | └── app.wpy 小程序配置項(xiàng)（全局樣式配置、聲明鉤子等） └── package.json package 配置
主要解決問題
-
開發(fā)模式轉(zhuǎn)換
-
支持組件化開發(fā)
-
支持加載外部 NPM 包
-
單文件模式，使得目錄結(jié)構(gòu)更加清晰
-
默認(rèn)使用 babel 編譯，支持 ES6/7 的一些新特性
-
針對(duì)原生 API 進(jìn)行優(yōu)化