工欲善其事，必先利其器。作為一名web前端開(kāi)發(fā)者，我們要想工作得心應(yīng)手，勢(shì)必離不開(kāi)順手的工具。Hbuilder作為web編輯器的新秀就是這樣一個(gè)利器。下面來(lái)一探究竟。

HBuilder是DCloud推出的一款支持HTML5的免費(fèi)WEB開(kāi)發(fā)IDE。

HBuilder的編寫(xiě)用到了Java、C、Web和Ruby。它基于Eclipse，所以順其自然地兼容的Eclipse的plugin。

HBuilder本身主體是由Java編寫(xiě)，
所以你的機(jī)器里需要有java運(yùn)行的環(huán)境。

對(duì)于非java的開(kāi)發(fā)者來(lái)說(shuō)，需要安裝一下JDK。
JDK下載地址：
http://www.oracle.com/technetwork/java/javase/downloads/index.html

HBuilder下載地址：
http://www.dcloud.io

點(diǎn)擊圖中Download按鈕下載，下載后免安裝直接點(diǎn)擊即可使用。

打開(kāi)HBuilder之后，它會(huì)要求你注冊(cè)一個(gè)用戶(hù)，然后才可以使用。
第一次使用必須注冊(cè)用戶(hù)，登錄才可以，這是它的硬性要求。按照官方的說(shuō)法，HBuilder不單單希望只是一個(gè)工具，而是把工具和社區(qū)聯(lián)系起來(lái)，所以才要求用戶(hù)注冊(cè)。

假設(shè)一切順利，啟動(dòng)HBuilder后，大家會(huì)看到如下的界面：

打開(kāi)自帶的HelloBuilder工程。里面有一個(gè)lesson1.txt文檔。里面有所有的操作方法說(shuō)明。
我建議大略看一遍即可。在實(shí)踐中邊用邊查就行，熟能生巧。

接下來(lái)，我們開(kāi)始激動(dòng)人心的第一步：建立一個(gè)移動(dòng)APP應(yīng)用。如下，點(diǎn)擊“新建移動(dòng)APP”：

接下來(lái)就會(huì)彈出一個(gè)選擇模板的對(duì)話(huà)框：

這里一定要注意：默認(rèn)的模板選項(xiàng)是“空模板”。不包含任何的HBuilder提供的畫(huà)面組件 – 這其實(shí)沒(méi)有意義的。所以，這里一定要選擇“mui項(xiàng)目”。它包含了 mui (默認(rèn)提供的畫(huà)面組件，也就是CSS 和 Javascript)。
建立的工程類(lèi)似如下：

其中index.html 是入口文件。 css 是樣式表目錄，fonts 是字體目錄， js 是 javascript目錄，這三個(gè)目錄是 mui 自帶的。manifest.json 是配置文件，也就是你的APP的配置文件，例如入口文件的指定，圖標(biāo)的指定。
具體的設(shè)置以后再說(shuō)，我們要馬上在手機(jī)上啟動(dòng)我們的APP！

HBuilder有強(qiáng)大的聯(lián)機(jī)調(diào)試功能。我只用過(guò) android 來(lái)調(diào)試，當(dāng)然 iphone 也可以。
把你的手機(jī)和電腦連接上，然后點(diǎn)擊這個(gè)圖標(biāo)：

如果連接順利，那么上面會(huì)顯示手機(jī)的名稱(chēng)。然后再點(diǎn)擊綠色的運(yùn)行圖標(biāo)就可以了。接下來(lái)你就可以看到手機(jī)上運(yùn)行了你的APP。當(dāng)然，因?yàn)槭裁匆矝](méi)有，畫(huà)面是一片空白。到此為止，我們已經(jīng)可以在手機(jī)上運(yùn)行APP了，走出了第一步。

總結(jié)

優(yōu)點(diǎn)：
1，HBuilder內(nèi)置了HTML5及瀏覽器擴(kuò)展前綴語(yǔ)法庫(kù)，你用它寫(xiě)web程序的時(shí)候，它會(huì)給你自動(dòng)提示或者補(bǔ)全。
2，懶人設(shè)計(jì)有其特色的代碼輸入法創(chuàng)新、代碼塊創(chuàng)新、emmet的集成、快捷鍵語(yǔ)法設(shè)計(jì)、無(wú)鼠標(biāo)操作，通過(guò)一系列智能聯(lián)想方便我們快速編碼。
3.邊看邊改模式（個(gè)人非常喜歡）
開(kāi)啟這個(gè)模式后，調(diào)試UI的時(shí)候，我就不用在編輯器和瀏覽器之間來(lái)回切了，太方便了。

缺點(diǎn)：

1，控制臺(tái)居然不能用 ——！，不得不吐槽一下。既然做了邊看邊改模式，但是控制臺(tái)扯了后腿，反而很棒的功能變得雞肋了。
2，快捷鍵不夠完善，而且不能像webStorm那樣有多套快捷鍵方案提供選擇，多有不便，還得手動(dòng)去一個(gè)個(gè)改，麻煩。
總之，瑕不掩瑜，尤其是國(guó)產(chǎn)IDE, 做到這個(gè)程度，難能可貴，實(shí)際開(kāi)發(fā)，個(gè)人建議和webStrom配合使用。
HBuilder有關(guān)網(wǎng)址如下：
官網(wǎng)：http://dcloud.io/。
HBuilder幫助文檔: ：http://ask.dcloud.net.cn/docs