該框架是騰訊內(nèi)部基于小程序的開(kāi)發(fā)框架，設(shè)計(jì)思路基本參考VUE，開(kāi)發(fā)模式和編碼風(fēng) 格上80%以上接近VUE

優(yōu)勢(shì)

組件化開(kāi)發(fā)

小程序雖然有標(biāo)簽可以實(shí)現(xiàn)組件復(fù)用，但僅限于模板片段層面的復(fù)用，業(yè)務(wù)代碼與交互事件 仍需在頁(yè)面處理。無(wú)法實(shí)現(xiàn)組件化的松耦合與復(fù)用的效果。

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包，導(dǎo)致無(wú)法直接使用大量?jī)?yōu)秀的開(kāi)源內(nèi)容，wepy在編譯過(guò)程當(dāng)中，會(huì)遞歸 遍歷代碼中的require然后將對(duì)應(yīng)依賴(lài)文件從node_modules當(dāng)中拷貝出來(lái)，并且修改require為相對(duì)路徑， 從而實(shí)現(xiàn)對(duì)外部NPM包的支持

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

小程序官方目錄結(jié)構(gòu)要求app必須有三個(gè)文件app.json，app.js，app.wxss，頁(yè)面有4個(gè)文件 index.json，index.js，index.wxml，index.wxss。而且文 件必須同名。 所以使用wepy開(kāi)發(fā)前后開(kāi)發(fā)目錄對(duì)比如下：

官方DEMO：

project├── pages| ├── index| | ├── index.json index 頁(yè)面配置| | ├── index.js index 頁(yè)面邏輯| | ├── index.wxml index 頁(yè)面結(jié)構(gòu)| | └── index.wxss index 頁(yè)面樣式表| └── log|  ├── log.json log 頁(yè)面配置|  ├── log.wxml log 頁(yè)面邏輯|  ├── log.js  log 頁(yè)面結(jié)構(gòu)|  └── log.wxss log 頁(yè)面樣式表├── app.js    小程序邏輯├── app.json   小程序公共設(shè)置└── app.wxss   小程序公共樣式表

使用wepy框架后目錄結(jié)構(gòu)：

project└── src ├── pages | ├── index.wpy index 頁(yè)面配置、結(jié)構(gòu)、樣式、邏輯 | └── log.wpy  log 頁(yè)面配置、結(jié)構(gòu)、樣式、邏輯 └──app.wpy   小程序配置項(xiàng)（全局樣式配置、聲明鉤子等）

如何開(kāi)發(fā)

快速起步

安裝

npm install wepy-cli -g 

小程序框架wepy命令行工具

創(chuàng)建項(xiàng)目

wepy new myproject