【WePY小程序框架實戰一】-建立項目

最近兩個小程序項目使用了微信本身出的框架wepy開發，開發完的感覺就是比原生小程序順溜不少。我就從安裝到一些重點和整個項目把wepy使用整理下

全局安裝WePY命令行工具

npm install wepy-cli -g

建立項目

wepy init standard mywepy

選擇->回車

? Project name mywepy
? AppId wx30b76facba36e27b
? Project description test
? Author leinov <1425795233@qq.com>
? Use ESLint to lint your code? No
? Use Redux in your project? Yes
? Use web transform feature in your project? Yes

進入項目目錄

cd mywepy

安裝依賴包

npm install

實時編譯

wepy build --watch

項目結構

├── dist                   小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫的目錄（該目錄爲使用WePY後的開發目錄）
|   ├── components         WePY組件目錄（組件不屬於完整頁面，僅供完整頁面或其餘組件引用）
|   |   ├── com_a.wpy      可複用的WePY組件a
|   |   └── com_b.wpy      可複用的WePY組件b
|   ├── pages              WePY頁面目錄（屬於完整頁面）
|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁面（經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項目的package配置

添加項目

一些配置

• es6: 對應關閉ES6轉ES5選項，關閉。 重要：未關閉會運行報錯。

• postcss: 對應關閉上傳代碼時樣式自動補全選項，關閉。 重要：某些狀況下漏掉此項也會運行報錯。

• minified: 對應關閉代碼壓縮上傳選項，關閉。重要：開啓後，會致使真機computed, props.sync 等等屬性失效。（注：壓縮功能可以使用WePY提供的build指令代替，詳見後文相關介紹以及Demo項目根目錄中的wepy.config.js和package.json文件。）

• urlCheck: 對應不檢查安全域名選項，開啓。 若是已配置好安全域名則建議關閉。