HBuilder的安裝及用法

一，簡介HBuilder

1.1，什麼是Hbuilder？

　　HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder自己主體是由Java編寫。

　　它基於Eclipse，因此順其天然地兼容了Eclipse的插件

　　從Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web編程的IDE已經更換了幾批。可是HBuilder能夠生存就是由於有自身的優點。

1.2，Hbuilder的優點是什麼？

      快，是HBuilder的最大優點，經過完整的語法提示和代碼輸入法、代碼塊等，大幅提高HTML、js、css的開發效率。　　　

　　在HBuilder裏預置了一個hello HBuilder的工程，用戶敲這幾十行代碼後會發現，
HBuilder比其餘開發工具至少快5倍。「最全的瀏覽器兼容性數據、開發手機App等很
多特色也都是HBuilder強於競品的地方」，王安表示。

　　以「快」爲核心的HBuilder，引入了「快捷鍵語法」的概念，巧妙地解決了困擾許多
開發者的快捷鍵過多而記不住的問題。開發者只須要記住幾條語法，就能夠快速實現
跳轉、轉義和其餘操做。好比alt+[是跳轉到括號，alt+’是跳轉到引號，alt+字母是
跳轉菜單項，而alt+左則是跳轉到上一次光標位置。而Ctrl則是各類操做，好比ctrl+d
就是刪除一行。shift則是轉義，好比shift+回車是<br/>，shift+空格是 。

　　另外，HBuilder的生態系統多是最豐富的Web IDE生態系統，由於它同時兼容
Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各類技術都有Eclipse插件。

　　HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder自己主體是由Java編寫，
它基於Eclipse，因此順其天然地兼容了Eclipse的插件。但由於Java效率過低，因此用C
寫了啓動器。HBuilder柔和的綠色界面設計須要動態調節屏幕亮度，它還支持手機數據線
真機聯調，而這些都是用C寫的。

　　HBuilder不少界面，好比用戶信息界面都是使用Web技術來作的，既漂亮，開發起來
又快。最後，代碼塊、快捷配置命令腳本，都是用Ruby開發的。

　　「這4種技術各有各的用途，咱們團隊內部也靈活運用，HBuilder的架構支持不一樣的技
術互相融合通訊。至於咱們的技術選型原則，首先知足用戶需求，而後咱們內部用什麼技
術能更快完成就會選什麼技術」，王安解釋道。

　　

1.3，目前Web開發領域格局

　　目前主流的前端開發工具備Sublime爲表明的文本編輯器，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道爲HTML5設計或作了特殊優化的，只有HBuilder、Webstorm和Brackets。

　　文本編輯器以輕快方便的特色得到了不少用戶的喜好，但商業項目的編寫缺乏IDE仍是會很低效。IDE相比文本編輯器最大的特色是擁有語法引擎，可以識別語言。

 

編碼比其餘工具快5倍夠不夠？對極客而言，追求快，沒有止境！

代碼輸入法：按下數字快速選擇候選項

可編程代碼塊：一個代碼塊，少敲50個按鍵

內置emmet：tab一下生成一串代碼

無死角提示：除了語法，還能提示ID、Class、圖片、連接、字體…

跳轉助手、選擇助手，不用鼠標，手不離鍵盤

多種語言支持：php、jsp、ruby、python、nodejs等web語言，less、coffee等編譯型語言均支持

邊改邊看：一邊寫代碼，一邊看效果

強悍的轉到定義和一鍵搜索

這裏還有最全的語法庫、最全的語法瀏覽器兼容庫

　　

 

 

二，Hbuilder IDE的下載與安裝

　　HBuilder下載地址：在HBuilder官網http://www.dcloud.io/點擊免費下載，下載最新版的HBuilder。

　　HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據本身的電腦選擇適合本身的版本。

2.1，查找Hbuilder官方網站

　　首先去這款前端開發編輯器的官方網站，以後進到官方網站中，以下界面

 2.2，瞭解Hbuilder

　　進入官網以後，找到「Hbuilder」的欄目，建議仔細看完這一頁面的內容以便於簡歷一個對Hbuilder的初步瞭解，看完後找到下載按鈕進行下載。

 

2.3，下載

　　點擊下載以後會有一個彈窗，若是是Windows系統則直接點擊紅色按鈕進行下載便可，若是是使用的蘋果本，那麼點擊左下的「MacOSX版本」，點擊完成以後便開始進行下載而後進入等待便可。

2.4，解壓下載的安裝包

　　文件下載完後才能以後獲得是一個壓縮包，而後咱們進行解壓會獲得一個文件夾，隨便說一句這個文件夾就是Hbuilder的文件包，Hbuilder不用安裝解壓完成便可使用。

2.5，找到執行文件

　　打開解壓後的文件夾，找到一個叫作「Hbuilder.exe」的可執行文件，這個可執行文件就是Hbuilder的啓動文件。

2.6，打開Hbuilder

　　雙擊這個文件就能夠打開Hbuilder這個開發編輯器了，由於咱們是直接解壓使用的因此找起來會很麻煩，你能夠將「Hbuilder.exe」這個執行文件發送到桌面快捷方式，這樣每次使用的時候直接在桌面就能夠打開。

三，Hbuilder IDE的使用

3.1，設置編譯器風格

　　Hbuilder打開以後，會出現一些很人性話的設置，還有一點就是Hbuilder的編輯器風格是黃色系，對眼睛比較好，不一樣於其餘的編輯器通常是以黑白爲主，這裏我通常使用標準模式。

3.2，新建web項目

　　視覺設置完成以後進入咱們的項目創建階段，點擊「新建WEB項目」，建立項目名稱，設置項目所在的位置肯定便可，完成以後會在左邊的項目欄管理器中出現。我這裏建立的名稱爲demo。

　　依次點擊文件→新建→選擇Web項目(按下Ctrl+N,W能夠觸發快速新建(MacOS請使用Command+N,而後左鍵點擊Web項目))

3.3，打開文件夾

　　打開項目demo的文件夾，咱們會看到裏面有首頁index.html，有JS文件夾，有CSS文件夾，還有圖片的文件夾，基本齊全。

 

3.4，編寫代碼

　　到了這一步以後，咱們即可以編寫咱們的代碼了

 

 

 四，HBuilder的用法

4.1，什麼是代碼塊？

代碼塊是經常使用的代碼組合，好比在js中輸入$，回車，則能夠自動輸入document.getElementById(id)。

查看、編輯代碼塊能夠在工具-自定義代碼塊中，選擇相應的代碼塊進行查看和編輯。也能夠在激活代碼塊的代碼助手中，點擊詳細信息右下角的修改圖標進行修改和查看。

• 代碼塊激活字符原則1:連續單詞的首字母。好比：dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

• 代碼塊激活字符原則2:整段HTML通常使用tag的名稱。好比script、style，一般，敲最多4個字母便可匹配到須要的代碼塊，不須要完整錄入，如sc回車、st回車，便可完成script、style標籤的輸入。

• 代碼塊激活字符原則3:同一個tag，有多個代碼塊輸出，則在最後加後綴。好比meta輸出但metau則輸出，metag同理。

• 代碼塊激活字符原則4:若是原始語法超過4個字符，針對經常使用語法，則第一個單詞的激活符使用縮寫。好比input button，縮寫爲inbutton，同理intext是輸入框。

• 代碼塊激活字符原則5:js的關鍵字代碼塊，是在關鍵字最後加一個重複字母。好比if直接敲會提示if關鍵字，但iff回車，則出現if代碼塊。相似的有forr、withh等。因爲funtion字母較長，爲加快輸入速度，取fun縮寫，好比funn，輸出function代碼塊，而funa和func，分別輸出匿名函數和閉包。