一直以來開發(fā)小程序都是中規(guī)中矩的使用微信小程序開發(fā)工具胜榔，原生開發(fā)小程序鼠冕。最近偶然發(fā)現(xiàn)了一個騰訊出品的小程序開發(fā)框架WePY灾前，是對小程序做了進(jìn)一步的封裝悠抹，看起來亮點(diǎn)多多珠月。
優(yōu)勢
- 使用類似于目前最為火爆的前端框架Vue.js的開發(fā)風(fēng)格，前端開發(fā)者可以輕松掌握
- 支持使用第三方的NPM資源楔敌，可使用的組件更為豐富
- 支持最新的JS語法啤挎，支持ES6、ES7的若干新特性
- 單文件模式卵凑，不再像原生小程序那樣一個頁面需要四個文件
WePY的優(yōu)勢還在于相比其他類似的小程序開發(fā)框架庆聘，它的開源時間較早，有極其豐富的組件庫勺卢，也有很多的Demo可供參考伙判，比如微信小程序wepy框架開發(fā)資源匯總。
開始安裝
- 全局安裝WePY命令行工具wepy-cli黑忱，如果有權(quán)限問題請在前面加上sudo澳腹。
npm install wepy-cli -g
- 使用
wepy init創(chuàng)建WePY項目。
// 使用空模板創(chuàng)建
wepy init empyt myproject
// 使用基礎(chǔ)模板創(chuàng)建
wepy init standard myproject
// 使用其他GitHub上的demo
wepy init wepyjs/wepy-wechat-demo myproject
- 在項目目錄下安裝依賴
cd myproject
npm install
- 運(yùn)行項目
// 測試(該命令下會運(yùn)行 wepy build --watch)
npm run dev
// 正式(項目包會減小,該命令下會運(yùn)行 cross-env NODE_ENV=production wepy build --no-cache)
npm run build
執(zhí)行上面的命令后杨何，再項目根目錄會生成一個叫做dist的文件夾酱塔，用微信開發(fā)者工具打開這個目錄，里面就是典型的小程序架構(gòu)的項目了危虱。
編譯小程序項目前記得要把一些設(shè)置關(guān)掉羊娃，如關(guān)閉ES6轉(zhuǎn)ES5選項，關(guān)閉代碼樣式自動補(bǔ)全選項埃跷，關(guān)閉代碼壓縮上傳選項蕊玷，開啟不檢查域名選項。
IDE配置
在IDE方面我使用的口碑較好的WebStorm來進(jìn)行WePY開發(fā)弥雹。默認(rèn)情況下WebStorm是不識別WePY類型的文件的垃帅，為了使其實(shí)現(xiàn)對wpy文件的渲染，如下圖所示剪勿，打開WebStorm的偏好設(shè)置贸诚，在Vue.js的Template里面添加wpy后綴的識別。
另外也推薦使用VS Code去進(jìn)行WePY開發(fā)，VS Code是目前最流行的代碼編輯器之一酱固，有很豐富的插件擴(kuò)展械念，比如Vetur-wepy插件就直接對wpy文件進(jìn)行了正確的渲染，minapp插件對小程序的標(biāo)簽运悲、屬性進(jìn)行了正確的補(bǔ)全等等龄减。如果喜歡輕量級編輯器的朋友可以選擇這款只有幾十M的VS Code。
相關(guān)文件配置
-
package.json
-
scripts: WePY項目可執(zhí)行的npm scripts,默認(rèn)有dev, build, test三個命令班眯，可以通過
npm run dev/build/test來執(zhí)行希停。比如npm run dev默認(rèn)情況下就是執(zhí)行的wepy build --watch命令，npm run build就是執(zhí)行的cross-env NODE_ENV=production wepy build --no-cache命令署隘。建議把dev命令改為
cross-env NODE_ENV=development wepy build --watch宠能，這樣在使用npm run dev或者npm run build時，在wepy.config.js中可以通過process.env.NODE_ENV拿到不同的環(huán)境變量值定踱。 dependencies: 項目所依賴的模塊
devDependencies: 只下載使用某些模塊，而不下載這些模塊的測試和文檔框架
-
-
package-lock.json
所有node_modules里面的模塊的版本恃鞋、地址崖媚、依賴等相關(guān)信息。它和package.json的關(guān)系就類似于iOS項目里面podfile和podfile.lock文件的關(guān)系恤浪。
-
project.config.json
- setting: 對應(yīng)標(biāo)準(zhǔn)小程序項目里面的project.config.json文件里面的setting設(shè)置畅哑。es6為是否開啟es6轉(zhuǎn)es5，postcss為上傳代碼時是否自動代碼補(bǔ)全水由，minified為上傳代碼時是否代碼壓縮荠呐，urlCheck為是否檢查安全域名和TLS版本。
- miniprogramRoot: 編譯的微信小程序項目所在目錄砂客，默認(rèn)為"./dist"泥张。
-
wepy.config.js
