1. weapp-boilerplate 微信小程序骨架
特點(diǎn)
開發(fā)階段與生產(chǎn)階段分離包各。
自動化生成新頁面所需文件并添加到配置中起愈。
以Standard Code Style校驗(yàn)全部的js和json文件宙攻。
開發(fā)階段json配置文件可以有注釋唾那，方便備注埠帕。
代碼中集成部分文檔內(nèi)容，減少查文檔的時(shí)間话侄。
開發(fā)階段可以使用less完成樣式編碼，原因你懂得~ （如果你了解這些学赛，當(dāng)然可以支持sass等其他預(yù)處理樣式）年堆。
借助babel自動進(jìn)行ES2015特性轉(zhuǎn)換同规，放心使用新特性疾牲。
開發(fā)階段用xml文件后綴取代wxml后綴，避免在開發(fā)工具中配置代碼高亮狡蝶。
Source Map
Travis CI
創(chuàng)建步驟
將項(xiàng)目克隆到本地
定位到任意目錄
$ cd path/to/root克隆倉庫到指定的文件夾
$ git clone https://github.com/zce/weapp-boilerplate.git [project-name] --depth 1進(jìn)入指定的文件夾
$ cd [project-name]
安裝項(xiàng)目NPM依賴
$ npm install
使用
開發(fā)階段
啟動監(jiān)視
$ npm run watch
通過微信Web開放者工具打開項(xiàng)目根目錄下dist文件夾绢掰，預(yù)覽~
可以通過任意開發(fā)工具完成src下的編碼痒蓬，gulp會監(jiān)視項(xiàng)目根目錄下src文件夾，當(dāng)文件變化自動編譯
創(chuàng)建新頁面
執(zhí)行如下命令
啟動生成器
$ npm run generate
完成每一個問題
自動生成...
生產(chǎn)階段
執(zhí)行如下命令
啟動編譯
$ npm run build
生產(chǎn)階段的代碼會經(jīng)過壓縮處理滴劲，最終輸出到dist下攻晒。
同樣可以通過微信Web開放者工具測試
2. labrador 微信小程序組件化開發(fā)框架
特點(diǎn)
- 使用Labrador框架可以使微信開發(fā)者工具支持加載海量NPM包
- 支持ES6/7標(biāo)準(zhǔn)代碼，使用async/await能夠有效避免回調(diào)地獄
- 組件重用班挖，對微信小程序框架進(jìn)行了二次封裝鲁捏，實(shí)現(xiàn)了組件重用和嵌套
- 可集成Redux，使用Redux數(shù)據(jù)流控制萧芙，讓項(xiàng)目邏輯清晰可維護(hù)
- 自動持久化數(shù)據(jù)给梅，支持redux-persist自動將運(yùn)行數(shù)據(jù)保存
- 自動化測試，非常容易編寫單元測試腳本双揪，不經(jīng)任何額外配置即可自動化測試
- Flow.js強(qiáng)類型檢查动羽，編寫更加安全穩(wěn)定的代碼
- 使用Editor Config及ESLint標(biāo)準(zhǔn)化代碼風(fēng)格，方便團(tuán)隊(duì)協(xié)作
- 強(qiáng)力壓縮代碼渔期，盡可能減小程序體積运吓，讓你在1M的限制內(nèi)做更多的事
安裝腳手架
首先您的系統(tǒng)中安裝Node.js和npm v3 下載Node.js，然后運(yùn)行下面的命令將全局安裝Labrador命令行工具擎场。
npm install -g labrador-cli
初始化項(xiàng)目
abrador create demo # 新建項(xiàng)目
cd demo # 跳轉(zhuǎn)到項(xiàng)目目錄
項(xiàng)目目錄結(jié)構(gòu)
demo # 項(xiàng)目根目錄
├── .labrador # Labrador項(xiàng)目配置文件
├── .babelrc # babel配置文件
├── .editorconfig # Editor Config
├── .eslintignore # ESLint 忽略配置
├── .eslintrc # ESLint 語法檢查配置
├── .build/ # Labrador編譯臨時(shí)目錄
├── package.json
├── dist/ # 目標(biāo)目錄
├── node_modules/
└── src/ # 源碼目錄
├── app.js
├── app.json
├── app.less
├── components/ # 通用組件目錄
├── pages/ # 頁面目錄
└── utils/
注意 dist目錄中的所有文件是由labrador命令編譯生成羽德，請勿直接修改
配置開發(fā)工具
項(xiàng)目初始化后使用WebStorm或Sublime等你習(xí)慣的IDE打開項(xiàng)目根目錄。然后打開 微信web開發(fā)者工具 新建項(xiàng)目迅办，本地開發(fā)目錄選擇 dist 目標(biāo)目錄宅静。
開發(fā)流程
在WebStorm或Sublime等IDE中編輯 src 目錄下的源碼，然后在項(xiàng)目根目錄中運(yùn)行l(wèi)abrador build 命令構(gòu)建項(xiàng)目站欺，然后在 微信web開發(fā)者工具 的調(diào)試界面中點(diǎn)擊左側(cè)菜單的 重啟 按鈕即可查看效果姨夹。
我們在開發(fā)中纤垂， 微信web開發(fā)者工具 僅僅用來做調(diào)試和預(yù)覽，不要在 微信web開發(fā)者工具 的編輯界面修改代碼磷账。
微信web開發(fā)者工具 會偶爾出錯峭沦，表現(xiàn)為點(diǎn)擊 重啟 按鈕沒有反應(yīng)，調(diào)試控制臺輸出大量的無法require文件的錯誤逃糟，編輯 界面中代碼文件不顯示吼鱼。這是因?yàn)?labrador build 命令會更新整個 dist 目錄，而 微信web開發(fā)者工具 在監(jiān)測代碼改變時(shí)會出現(xiàn)異常绰咽，遇到這種情況只需要關(guān)掉 微信web開發(fā)者工具 再啟動即可菇肃。
我們還可以使用 labrador watch 命令來監(jiān)控 src 目錄下的代碼，當(dāng)發(fā)生改變后自動構(gòu)建取募，不用每一次編輯代碼后手動運(yùn)行 labrador build 琐谤。
所以最佳的姿勢是：
- 在項(xiàng)目中運(yùn)行 labrador watch
- 在WebStorm中編碼，保存
- 切換到 微信web開發(fā)者工具 中調(diào)試玩敏、預(yù)覽
- 再回到WebStorm中編碼
- ...
labrador 命令
labrador create <name> 創(chuàng)建項(xiàng)目
注意此命令會初始化當(dāng)前的目錄為項(xiàng)目目錄斗忌。
labrador build [options] 構(gòu)建當(dāng)前項(xiàng)目
3. wepy 小程序組件化開發(fā)框架
介紹
WePY資源匯總：awesome-wepy
WePY 是一款讓小程序支持組件化開發(fā)的框架，通過預(yù)編譯的手段讓開發(fā)者可以選擇自己喜歡的開發(fā)風(fēng)格去開發(fā)小程序旺聚≈簦框架的細(xì)節(jié)優(yōu)化，Promise翻屈，Async Functions的引入都是為了能讓開發(fā)小程序項(xiàng)目變得更加簡單陈哑，高效。
同時(shí)WePY也是一款成長中的框架伸眶，大量吸收借鑒了一些優(yōu)化前端工具以及框架的設(shè)計(jì)理念和思想惊窖。如果WePY有不足地方，或者你有更好的想法厘贼，歡迎提交ISSUE或者PR界酒。
特性：
- 類Vue開發(fā)風(fēng)格
- 支持自定義組件開發(fā)
- 支持引入NPM包
- 支持Promise
- 支持ES2015+特性，如Async Functions
- 支持多種編譯器嘴秸，Less/Sass/Styus毁欣、Babel/Typescript、Pug
- 支持多種插件處理岳掐，文件壓縮凭疮，圖片壓縮，內(nèi)容替換等
- 支持 Sourcemap串述，ESLint等
- 小程序細(xì)節(jié)優(yōu)化执解，如請求列隊(duì)，事件優(yōu)化等
安裝使用
安裝（更新） wepy 命令行工具:
npm install wepy-cli -g
生成開發(fā)示例)生成開發(fā)示例:
wepy new myproject
開發(fā)實(shí)時(shí)編譯:
wepy build --watch
開發(fā)者工具使用
- 使用微信開發(fā)者工具-->新建項(xiàng)目纲酗，本地開發(fā)選擇dist目錄衰腌。
- 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉ES6轉(zhuǎn)ES5新蟆。重要：漏掉此項(xiàng)會運(yùn)行報(bào)錯。
- 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉上傳代碼時(shí)樣式自動補(bǔ)全 重要：某些情況下漏掉此項(xiàng)會也會運(yùn)行報(bào)錯右蕊。
- 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉代碼壓縮上傳 重要：開啟后琼稻，會導(dǎo)致真機(jī)computed, props.sync 等等屬性失效。
- 項(xiàng)目根目錄運(yùn)行wepy build --watch饶囚，開啟實(shí)時(shí)編譯帕翻。
