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