該框架是騰訊內部基于小程序的開發框架,設計思路基本參考VUE,開發模式和編碼風 格上80%以上接近VUE
優勢
組件化開發
小程序雖然有標簽可以實現組件復用,但僅限于模板片段層面的復用,業務代碼與交互事件 仍需在頁面處理。無法實現組件化的松耦合與復用的效果。
wepy組件示例
// index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel> <counter1 :num="myNum"></counter1> <counter2 :num.sync="syncNum"></counter2> <list :item="items"></list> </view> </template> <script> import wepy from 'wepy'; import List from '../components/list'; import Panel from '../components/panel'; import Counter from '../components/counter'; export default class Index extends wepy.page { config = { "navigationBarTitleText": "test" }; components = { panel: Panel, counter1: Counter, counter2: Counter, list: List }; data = { myNum: 50, syncNum: 100, items: [1, 2, 3, 4] } } </script>
支持加載外部NPM包
小程序較大的缺陷是不支持NPM包,導致無法直接使用大量優秀的開源內容,wepy在編譯過程當中,會遞歸 遍歷代碼中的require然后將對應依賴文件從node_modules當中拷貝出來,并且修改require為相對路徑, 從而實現對外部NPM包的支持
單文件模式,使得目錄結構更加清晰
小程序官方目錄結構要求app必須有三個文件app.json,app.js,app.wxss,頁面有4個文件 index.json,index.js,index.wxml,index.wxss。而且文 件必須同名。 所以使用wepy開發前后開發目錄對比如下:
官方DEMO:
project├── pages| ├── index| | ├── index.json index 頁面配置| | ├── index.js index 頁面邏輯| | ├── index.wxml index 頁面結構| | └── index.wxss index 頁面樣式表| └── log| ├── log.json log 頁面配置| ├── log.wxml log 頁面邏輯| ├── log.js log 頁面結構| └── log.wxss log 頁面樣式表├── app.js 小程序邏輯├── app.json 小程序公共設置└── app.wxss 小程序公共樣式表
使用wepy框架后目錄結構:
project└── src ├── pages | ├── index.wpy index 頁面配置、結構、樣式、邏輯 | └── log.wpy log 頁面配置、結構、樣式、邏輯 └──app.wpy 小程序配置項(全局樣式配置、聲明鉤子等)
如何開發
快速起步
安裝
npm install wepy-cli -g
創建項目
wepy new myproject
切換至項目目錄
cd myproject
實時編譯