五大微信小程序开发IDE深度评测
微信小程序已經(jīng)內(nèi)測有一段時間了，筆者本著好奇加學(xué)習(xí)的心態(tài)寫了幾個小demo，雖然在MINA框架上并沒有遇到太多的坑，但官方開發(fā)工具實在不敢恭維。
api提示不全，要一個個查api啊，寫代碼超級慢啊
很多必備的快捷鍵都沒有，比如全選關(guān)鍵字、快速復(fù)制一行等等
顏色主題不能選？不喜歡白色風(fēng)格怎么搞
沒有插件 沒有插件 沒有插件 重要的事情說三遍
無奈筆者走上了嘗試各種IDE的旅途，現(xiàn)在說一下筆者對于IDE的需求或者設(shè)想：
輕量級：我不喜歡那種類似Eclipse的龐然大物，即使出現(xiàn)類似工具我也不會去使用，因為其中90%的功能都不會被用到。
可定制化的代碼著色：代碼著色是必備功能，如果支持顏色模板最好
準(zhǔn)確的代碼提示：這個太重要了，大家懂得
可調(diào)試：IDE可以進(jìn)行調(diào)試或運(yùn)行
實時預(yù)覽界面：由于應(yīng)用開發(fā)與網(wǎng)頁不同，實時預(yù)覽必須在程序運(yùn)行時才會將動態(tài)數(shù)據(jù)加載到界面，這塊我不抱太大希望
針對上面幾個需求，筆者前后嘗試了目前市面上支持小程序開發(fā)的工具，嘔心瀝血總結(jié)如下，以供大家參考。
微信小程序官方開發(fā)工具
注意，這個小標(biāo)題我并沒有使用“IDE”字眼。因為在筆者眼中，它真的是個工具，而不是一個IDE。官方工具中的代碼編輯功能，就是將vscode的代碼編輯功能嵌入到工具中，不足以支撐開發(fā)。
優(yōu)點
因為是官方工具所以有這其它第三方工具有這不可比擬的天然優(yōu)勢，如果不是他代碼編輯功能太弱的話。
官方工具，可調(diào)試，可預(yù)覽
基本的代碼編輯、智能提示、調(diào)試等功能都有
項目管理、創(chuàng)建、手機(jī)預(yù)覽、代碼提交審核
官方維護(hù)更新
缺點
不好的地方也很明顯，總體而言是一款工具而不是IDE。糟糕的代碼編輯功能，寫起代碼非常別扭，這是我放棄它的最重要原因。
api提示不全，要一個個查api啊，寫代碼超級慢啊
很多必備的快捷鍵都沒有，比如全選關(guān)鍵字、快速復(fù)制一行等等
顏色主題不能選？不喜歡白色風(fēng)格怎么搞
沒有插件 沒有插件 沒有插件 重要的事情說三遍
總結(jié)
目前因為需要用到微信web開發(fā)工具進(jìn)行小程序的創(chuàng)建、調(diào)試、查看、預(yù)覽、上傳，所以這個工具必不可少。但是代碼編輯功能實在太差，推薦使用其它第三方代碼編輯工具代替。
Sublime Text 3
說完官方工具，聊一聊我日常工作最常用的工具 sublime text 3，它定位于代碼編輯器而不是IDE，試用了一下，在代碼提示方面只能算得上一般般。
優(yōu)點
打開文件速度倍兒快、UI簡潔大方
代碼編輯體驗舒適、高效
擁有大量插件，針對不同需求基本上能找到對應(yīng)插件來滿足
第三方開發(fā)者開發(fā)小程序插件用于代碼著色和代碼提示
缺點
沒有調(diào)試，沒有預(yù)覽
因為是第三方開發(fā)者編寫的插件，代碼提示也不是非常全面
總結(jié)
除了本身的代碼編輯優(yōu)勢，對于小程序開發(fā)并沒有什么實質(zhì)性幫助，最終Sublime Text方案也被筆者放棄。
不得不吐槽 Sublime Text的這個插件，搞了好久才把它run起來，郁悶。
注：插件下載鏈接在文末
Vim + WEPT
Vim這個編輯器之神一直是我的裝逼利器，關(guān)于vim的好我就不多說了，免得Emacs的人過來罵我。
網(wǎng)上有人已經(jīng)開發(fā)了對應(yīng)插件，叫做 Wxapp.vim 這個插件我簡單用了一下，包含文件檢測、智能補(bǔ)全、文檔跳轉(zhuǎn)、語法高亮、縮進(jìn)、代碼段、單詞列表、語法檢查等功能。總體來說還是不錯的，但存在一個嚴(yán)重問題。筆者在做服務(wù)器開發(fā)的時候，基本使用Vim編程，在配合一些其他的插件和工具直接在終端運(yùn)行調(diào)試。但微信小程序這個我用了半天不得不放棄，因為要經(jīng)常在Vim和微信小程序官方工具之間來回切換，似的筆者極為煩躁。按照筆者一慣作風(fēng)，使用Vim的時候就應(yīng)該把鼠標(biāo)扔掉。
但最終我還是發(fā)現(xiàn)了一個補(bǔ)救方案，下面會介紹一下。
優(yōu)點
代碼高亮，代碼提示等功能齊全。
有小程序開發(fā)插件Wxapp.vim可以使用，上文已經(jīng)提到
缺點
無法調(diào)試預(yù)覽
另外一個問題在于很多人搞不定Vim，這貨學(xué)習(xí)曲線優(yōu)點高
UI和使用方式不符合大多數(shù)人的習(xí)慣
總結(jié)
'WEPT'這個貨解決了我上面Vim說的痛點。
WEPT 是一個微信小程序?qū)崟r開發(fā)環(huán)境，它的目標(biāo)是為小程序開發(fā)提供高效、穩(wěn)定、友好、無限制的運(yùn)行環(huán)境。也就是說，它本身是一個實時運(yùn)行環(huán)境，可以做到實時預(yù)覽和調(diào)試。同時調(diào)試可以借助chrome瀏覽器完成。和前面Vim搭配完美解決了代碼編輯到調(diào)試再到預(yù)覽的問題。
這貨不算是IDE，筆者也不做優(yōu)點缺點分析了。總體來說，WEPT+VIM+Plugin 是個不錯的解決方案。推薦大家使用。
注：插件下載鏈接在文末
WebStorm
WebStorm網(wǎng)上有個插件，可以實現(xiàn)代碼提示，不能做調(diào)試和預(yù)覽，并且屬于重度工具，所以筆者沒有使用WebStorm。喜歡厚重感的童鞋可以嘗試一下這個工具。
優(yōu)點
有插件可以實現(xiàn)代碼高亮，代碼提示等功能
有非常成熟和非常豐富的功能
各種快捷鍵
缺點
無法調(diào)試預(yù)覽
功能比較多、比較臃腫
總結(jié)
總結(jié)來說，webstorm和上述幾個一樣，代碼編輯功能強(qiáng)大但是需要插件支持才可以開發(fā)小程序，而且體積臃腫。
注：插件下載鏈接在文末
Egret Wing
Wing這個東西算的上是筆者看到的第一個公司級別支持的IDE了，所以功能做的相當(dāng)成熟。下載嘗試了一下，就目前來說除了上面的Vim方案，這個應(yīng)該是目前對比后最佳的IDE工具了。
優(yōu)點
支持代碼提示，代碼高亮
實時預(yù)覽和調(diào)試和切換不同分辨率預(yù)覽
居然支持項目創(chuàng)建？！
支持新建page模板文件
雙周更新
缺點
實時界面預(yù)覽屬于靜態(tài)渲染，對于界面中的動態(tài)數(shù)據(jù)無法進(jìn)行預(yù)覽，只能在調(diào)試時進(jìn)行預(yù)覽。
無法進(jìn)行可視化拖拽生成界面（是我太貪心了么？）
總結(jié)
Wing是唯一一款支持實時預(yù)覽功能的IDE，包括微信官方都沒有實時預(yù)覽而是需要編譯后預(yù)覽，對于大懶人的筆者來說有實時預(yù)覽寫界面的時候不要太爽！wing不但可以而且還可以創(chuàng)建項目，新建page模板，運(yùn)行一下項目發(fā)現(xiàn)，這個預(yù)覽界面和微信官方開發(fā)工具非常相似。優(yōu)先推薦使用。
總結(jié)
整理個表，大家看自己心情選擇。
| 官方工具 | 微信小程序官方工具 | 支持 | 極其弱 | 支持 | 支持 | 下載軟件 |
| Egret Wing | 首款支持微信小程序開發(fā)的IDE。 | 支持 | 支持 | 支持 | 支持 | 下載軟件 |
| Sublime Text 3 | Sublime Text需要安裝插件。 | 支持 | 支持 | 不支持 | 不支持 | 插件 |
| Webstorm | WebStorm 重量級IDE | 支持 | 支持 | 不支持 | 不支持 | 插件 |
| vim + WEPT | 強(qiáng)大的組合工具 | 支持 | 支持 | 支持 | 支持 | Vim插件、WEPT |
總結(jié)
以上是生活随笔為你收集整理的五大微信小程序开发IDE深度评测的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python setup脚本编写
- 下一篇： Qt使用第三方库