小程序開發(fā)框架匯總

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 琐谤。

所以最佳的姿勢是:

  1. 在項(xiàng)目中運(yùn)行 labrador watch
  2. 在WebStorm中編碼,保存
  3. 切換到 微信web開發(fā)者工具 中調(diào)試玩敏、預(yù)覽
  4. 再回到WebStorm中編碼
  5. ...

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ā)者工具使用

  1. 使用微信開發(fā)者工具-->新建項(xiàng)目纲酗,本地開發(fā)選擇dist目錄衰腌。
  2. 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉ES6轉(zhuǎn)ES5新蟆。重要:漏掉此項(xiàng)會運(yùn)行報(bào)錯。
  3. 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉上傳代碼時(shí)樣式自動補(bǔ)全 重要:某些情況下漏掉此項(xiàng)會也會運(yùn)行報(bào)錯右蕊。
  4. 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉代碼壓縮上傳 重要:開啟后琼稻,會導(dǎo)致真機(jī)computed, props.sync 等等屬性失效。
  5. 項(xiàng)目根目錄運(yùn)行wepy build --watch饶囚,開啟實(shí)時(shí)編譯帕翻。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市萝风,隨后出現(xiàn)的幾起案子熊咽,更是在濱河造成了極大的恐慌,老刑警劉巖闹丐,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異被因,居然都是意外死亡卿拴,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進(jìn)店門梨与,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堕花,“玉大人,你說我怎么就攤上這事粥鞋≡低欤” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵呻粹,是天一觀的道長壕曼。 經(jīng)常有香客問我,道長等浊,這世上最難降的妖魔是什么腮郊? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮筹燕,結(jié)果婚禮上轧飞,老公的妹妹穿的比我還像新娘。我一直安慰自己撒踪,他們只是感情好过咬,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著制妄,像睡著了一般掸绞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上忍捡,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天集漾,我揣著相機(jī)與錄音切黔,去河邊找鬼。 笑死具篇,一個胖子當(dāng)著我的面吹牛纬霞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播驱显,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼诗芜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了埃疫?” 一聲冷哼從身側(cè)響起伏恐,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎栓霜,沒想到半個月后翠桦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡胳蛮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年销凑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仅炊。...
    茶點(diǎn)故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡斗幼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抚垄,到底是詐尸還是另有隱情蜕窿,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布呆馁,位于F島的核電站桐经,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏浙滤。R本人自食惡果不足惜次询,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瓷叫。 院中可真熱鬧屯吊,春花似錦、人聲如沸摹菠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽次氨。三九已至蔽介,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背虹蓄。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工犀呼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人薇组。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓外臂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親律胀。 傳聞我的和親對象是個殘疾皇子宋光,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容