#長(zhǎng)按上方二維碼，參與OSC年度盛典#

微信小程序內(nèi)測(cè)已經(jīng)有一段時(shí)間了，出于好奇和學(xué)習(xí)，寫了幾個(gè)小demo，雖然在MINA框架上沒有遇到太多坑，但是官方提供的開發(fā)工具實(shí)在讓人不滿意。

●API提示不全，需要逐個(gè)檢查API，寫代碼很慢

●缺少很多必備的快捷鍵，比如選擇全部關(guān)鍵詞、快速?gòu)?fù)制一行等等。

●無(wú)法選擇顏色主題？不喜歡白色風(fēng)格怎么辦？

● 不要插件，不要插件，不要插件。因?yàn)檫@很重要，我要說(shuō)三遍。

不得不嘗試各種 IDE，下面說(shuō)說(shuō)我對(duì) IDE 的需求或者說(shuō)想法：

● 輕量級(jí)：我不喜歡那些龐大的工具，即使出現(xiàn)類似的工具，我也不會(huì)用，因?yàn)?0%的功能都不會(huì)用到。

● 可自定義的代碼顏色：代碼著色是必備功能，最好支持顏色模板。

● 準(zhǔn)確的代碼提示：這個(gè)很重要，大家都懂的

● 可調(diào)試：可以使用IDE進(jìn)行調(diào)試或運(yùn)行

● 實(shí)時(shí)預(yù)覽界面：由于應(yīng)用程序開發(fā)不同于網(wǎng)頁(yè)，實(shí)時(shí)預(yù)覽必須在程序運(yùn)行時(shí)加載動(dòng)態(tài)數(shù)據(jù)到界面中，對(duì)此我并不抱太大希望。

針對(duì)以上需求，筆者嘗試了目前市面上支持小程序開發(fā)的工具，費(fèi)盡心思總結(jié)如下，供大家參考。

微信小程序官方開發(fā)工具

注意，我在這個(gè)小標(biāo)題中沒有使用“IDE”這個(gè)詞。因?yàn)樵谖业难劾?，它真的是一個(gè)工具，而不是一個(gè) IDE。官方工具中的代碼編輯功能只是工具中嵌入的代碼編輯功能，不足以支持開發(fā)。

優(yōu)勢(shì)

因?yàn)槭枪俜焦ぞ?，如果它的代碼編輯功能不是太弱的話，它比起其他第三方工具有著不可比擬的天然優(yōu)勢(shì)。

●官方工具，可調(diào)試、預(yù)覽

●具備基本代碼編輯、智能提示、調(diào)試等功能

●項(xiàng)目管理、創(chuàng)建、移動(dòng)預(yù)覽、代碼提交審查

●官方維護(hù)更新

缺點(diǎn)

缺點(diǎn)也很明顯，總體來(lái)說(shuō)，它更像是一個(gè)工具，而不是一個(gè) IDE，代碼編輯功能太差，寫代碼很別扭，這也是我放棄它的最重要原因。

●API提示不全，需要逐個(gè)檢查API，寫代碼很慢

●缺少很多必備的快捷鍵，比如選擇全部關(guān)鍵詞、快速?gòu)?fù)制一行等等。

●無(wú)法選擇顏色主題？不喜歡白色風(fēng)格怎么辦？

●禁止插件，禁止插件，禁止插件。重要的事情說(shuō)三遍

總結(jié)

目前來(lái)說(shuō)，創(chuàng)建、調(diào)試、查看、預(yù)覽、上傳小程序都需要微信網(wǎng)頁(yè)開發(fā)工具，所以這個(gè)工具必不可少，但是代碼編輯功能太差，建議使用其他第三方代碼編輯工具。

文本 3

說(shuō)完了官方的工具，再來(lái)說(shuō)說(shuō)我日常工作中使用最多的工具text3，它的定位是代碼編輯器而非IDE，試用之后發(fā)現(xiàn)它的代碼提示只能說(shuō)是一般。

優(yōu)勢(shì)

● 打開文件速度更快，用戶界面簡(jiǎn)潔優(yōu)雅

● 舒適、高效的代碼編輯體驗(yàn)

● 擁有大量插件，基本都能找到對(duì)應(yīng)的插件，滿足不同的需求

● 第三方開發(fā)者開發(fā)小程序插件，實(shí)現(xiàn)代碼著色、代碼提示

缺點(diǎn)

● 無(wú)需調(diào)試，無(wú)需預(yù)覽

● 因?yàn)槭堑谌介_發(fā)者編寫的插件，所以代碼提示不是很全面

總結(jié)

除了本身的代碼編輯優(yōu)勢(shì)之外，對(duì)于小程序開發(fā)并無(wú)實(shí)質(zhì)性的幫助，Text方案最終被作者放棄。

我不得不抱怨一下這個(gè) Text 插件。我花了很長(zhǎng)時(shí)間才讓它運(yùn)行起來(lái)。真是令人沮喪。

Vim + WEPT

編輯之神vim一直是我炫耀的利器，vim的優(yōu)點(diǎn)我就不多說(shuō)了，免得Emacs的人來(lái)罵我。

網(wǎng)上有人開發(fā)了相應(yīng)的插件，叫Wxapp.vim。我簡(jiǎn)單用了一下這個(gè)插件，里面包含了文件檢測(cè)、智能補(bǔ)全、文檔跳轉(zhuǎn)、語(yǔ)法高亮、縮進(jìn)、代碼片段、單詞列表、語(yǔ)法檢查等功能?？傮w來(lái)說(shuō)還不錯(cuò)，但是有一個(gè)比較嚴(yán)重的問(wèn)題。我做服務(wù)端開發(fā)的時(shí)候基本都是用Vim編程，用一些其他的插件和工具直接在終端里跑調(diào)試。但是用了很久的微信小程序之后不得不放棄，因?yàn)橐l繁在Vim和微信小程序官方工具之間來(lái)回切換，讓我煩躁至極。按照我一貫的作風(fēng)，用Vim應(yīng)該把鼠標(biāo)扔掉了。

但我最終找到了一種補(bǔ)救措施，我將在下面描述。

優(yōu)勢(shì)

●完善的代碼高亮、代碼提示等功能。

● 有小程序開發(fā)插件Wxapp.vim可以使用，如上文所述

缺點(diǎn)

●無(wú)法調(diào)試預(yù)覽

● 另一個(gè)問(wèn)題是許多人無(wú)法掌握 Vim，因?yàn)樗膶W(xué)習(xí)曲線很高。

●UI和使用方式不符合大多數(shù)人的習(xí)慣

總結(jié)

'WEPT' 解決了我上面提到的 Vim 的痛點(diǎn)。

WEPT 是微信小程序的實(shí)時(shí)開發(fā)環(huán)境，它的目標(biāo)是為小程序開發(fā)提供一個(gè)高效、穩(wěn)定、友好、無(wú)限制的運(yùn)行環(huán)境。換句話說(shuō)，它是一個(gè)可以實(shí)時(shí)預(yù)覽和調(diào)試的實(shí)時(shí)運(yùn)行環(huán)境，同時(shí)可以借助瀏覽器進(jìn)行調(diào)試。與 Vim 搭配使用，完美解決了代碼編輯、調(diào)試、預(yù)覽的問(wèn)題。

這款產(chǎn)品不是IDE，筆者就不分析它的優(yōu)缺點(diǎn)了，總體來(lái)說(shuō)，WEPT+VIM+是一個(gè)不錯(cuò)的解決方案sublime text新建模板，推薦給大家。

網(wǎng)上有個(gè)插件可以提供代碼提示，但是不能用來(lái)調(diào)試和預(yù)覽，而且是個(gè)重度工具，所以我沒用，喜歡重度感覺的可以試試這個(gè)工具。

優(yōu)勢(shì)

●有插件可以實(shí)現(xiàn)代碼高亮，代碼提示等功能

● 非常成熟且功能豐富

●多種快捷鍵

缺點(diǎn)

●無(wú)法調(diào)試預(yù)覽

●功能過(guò)多，較為臃腫

總結(jié)

總結(jié)一下sublime text新建模板，像上面提到的這幾種，代碼編輯功能強(qiáng)大但是開發(fā)小程序需要插件支持，體積臃腫。

白鷺翼

Wing 是我見過(guò)的第一個(gè)有公司支持的 IDE，功能還是比較成熟的，下載試用了一下，目前除了上面說(shuō)的 Vim 方案，對(duì)比下來(lái)這個(gè)應(yīng)該是最好的 IDE 工具了。

優(yōu)勢(shì)

●支持代碼提示和代碼高亮

●實(shí)時(shí)預(yù)覽及調(diào)試、切換不同分辨率預(yù)覽

●居然還支持項(xiàng)目創(chuàng)建？！

●支持新的頁(yè)面模板文件

●每?jī)芍芨乱淮?/p>

缺點(diǎn)

●實(shí)時(shí)界面預(yù)覽為靜態(tài)渲染，無(wú)法預(yù)覽界面中的動(dòng)態(tài)數(shù)據(jù)，只能在調(diào)試時(shí)預(yù)覽。

● 無(wú)法進(jìn)行可視化拖放來(lái)生成界面（我是不是太貪心了？）

總結(jié)

Wing 是唯一支持實(shí)時(shí)預(yù)覽的 IDE，就連微信官網(wǎng)都沒有實(shí)時(shí)預(yù)覽，需要編譯后才能預(yù)覽。對(duì)于我這種懶惰的作者來(lái)說(shuō)，寫界面時(shí)能有實(shí)時(shí)預(yù)覽，簡(jiǎn)直太爽了！Wing 不僅能做到這些，還能創(chuàng)建項(xiàng)目，新建頁(yè)面模板。運(yùn)行項(xiàng)目后發(fā)現(xiàn)，這個(gè)預(yù)覽界面跟微信官方開發(fā)工具很像，建議先用一下。

總結(jié)

我列了一個(gè)表格，你可以根據(jù)自己的心情來(lái)選擇。

如有侵權(quán)請(qǐng)聯(lián)系刪除！