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