初識(shí)微信小程序開(kāi)發(fā)框架 WePy

MD by Jimbowhy and you can visit my articles on http://www.itdecent.cn/u/92a796ff3db5

1. 官方文檔
2. 【微信小程序wepy框架資源匯總](https://segmentfault.com/a/1190000013214768)

基于組件化的小程框架，據(jù)說(shuō)完美解決組件隔離，組件嵌套，組件通信等問(wèn)題，集合了樣式編譯器：Less/Sass/Styus，模板編譯器：wx-ml/Pug，代碼編譯器：Babel/Typescript，可以看作一個(gè)模板解析引擎，將項(xiàng)目 src 目錄中的 wpy 拆解為小程序代碼發(fā)布在 dist 目錄。 寫(xiě)代碼只需要在src的wpy文件中，一個(gè) wpy 可以包含小程序的四種文件內(nèi)容，目錄結(jié)構(gòu)就簡(jiǎn)化了 wepy 編譯項(xiàng)目時(shí)會(huì)對(duì) wpy 進(jìn)行拆解編譯。通過(guò) polyfill 讓小程序完美支持 Promise，解決回調(diào)煩惱，異步代碼不再需要嵌套N層了。ES2015支持， 可使用 Generator Fu-nction / Class / Async Function 等特性，大大提升開(kāi)發(fā)效率。項(xiàng)目依賴管理通過(guò) Node 自帶的 NPM 實(shí)現(xiàn)，因此先要確保安裝 Node 和 npm，然后安裝 WePY CLI 并建立 demo 工程：

npm install -g wepy-cli
wepy init standard my-project   

WePy 使用:

init [options] <template-name> [project-name]  generate a new project from a template
build [options]                                build your project
list [options]                                 list available official templates
upgrade [options]                              upgrade to the latest version

Options:

-c --clone  use git clone
--offline   use cached template
-h, --help  output usage information    

Example:

    # create a new project with an official template
    $ wepy init standard my-project

    # create a new project straight from a github template
    $ wepy init username/repo my-project

Usage: build [options] build your project

  Options:

    -f, --file <file>      待編譯wpy文件
    -s, --source <source>  源碼目錄
    -t, --target <target>  生成代碼目錄
    -o, --output <type>    編譯類型：web，weapp。默認(rèn)為weapp
    -p, --platform <type>  編譯平臺(tái)：browser, wechat，qq。默認(rèn)為browser
    -w, --watch            監(jiān)聽(tīng)文件改動(dòng)
    --no-cache             對(duì)于引用到的文件，即使無(wú)改動(dòng)也會(huì)再次編譯
    -h, --help             output usage information

Usage: upgrade [options]  upgrade to the latest version

  Options:

    --cli   upgrade wepy-cli
    --wepy  upgrade wepy
    -h, --help  output usage information

建立工程后，進(jìn)入工程目錄，編譯工程生成小程序代碼文件：

wepy new myproject
# 1.7.0之后的版本使用 wepy init standard myproject 初始化項(xiàng)目，使用 wepy list 查看項(xiàng)目模板
切換至項(xiàng)目目錄
cd myproject
安裝依賴
npm  install
開(kāi)啟實(shí)時(shí)編譯
wepy build --watch

watch and auto compiles

如果缺少依賴項(xiàng)，則會(huì)提示錯(cuò)誤：

[Error] ReferenceError: Unknown plugin "transform-class-properties" specified in "base"

安裝手動(dòng)安裝依賴插件 http://babeljs.io/docs/plugins/：

npm install --save-dev babel-plugin-transform-class-properties
npm install --save wepy-com-toast

WePY項(xiàng)目的目錄結(jié)構(gòu)
├── dist                   小程序運(yùn)行代碼目錄（該目錄由WePY的build指令自動(dòng)編譯生成，請(qǐng)不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫(xiě)的目錄（該目錄為使用WePY后的開(kāi)發(fā)目錄）
|   ├── components         WePY組件目錄（組件不屬于完整頁(yè)面，僅供完整頁(yè)面或其他組件引用）
|   |   ├── com_a.wpy      可復(fù)用的WePY組件a
|   |   └── com_b.wpy      可復(fù)用的WePY組件b
|   ├── pages              WePY頁(yè)面目錄（屬于完整頁(yè)面）
|   |   ├── index.wpy      index頁(yè)面（經(jīng)build后，會(huì)在dist目錄下的pages目錄生成小程序頁(yè)面文件）
|   |   └── other.wpy      other頁(yè)面（經(jīng)build后，會(huì)在dist目錄下的pages目錄生成小程序頁(yè)面文件）
|   └── app.wpy            小程序配置項(xiàng)（經(jīng)build后，會(huì)在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項(xiàng)目的package配置