HBuilder 詳細使用方法 -------------參考 ：http://www.runoob.com/w3cnote/hbuilder-intro.html

 HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder自己主體是由Java編寫，它基於Eclipse，因此順其天然地兼容了Eclipse的插件。

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

HBuilderX提供了更友好方式：智能雙擊和Ctrl+=擴大選區。

智能雙擊

下面是智能雙擊選中tag和包圍父tag的示例

1. 雙擊div的首或尾能夠選中這個tag。固然雙擊if、雙擊縮進符、雙擊括號引號內側...不少位置均可以經過智能雙擊選中。具體見HBuilder的選擇菜單。
2. 按Ctrl+]包圍，就能夠在這個選區首尾加父標籤，同時閃爍光標。當前在js裏按下Ctrl+]不會包圍tag，而是包圍if、for等函數庫。

3. 輸入div便可在首尾添加包圍標籤

擴大選區Ctrl+=

=是+的默認鍵位置，因此Ctrl+=其實就是Ctrl鍵和+號一塊兒按下。

在HBuilderX裏能夠智能的判斷選區範圍，持續擴大選區，無鼠標快速選中你須要的選區。

反包圍

上面講到包圍，也天然有反包圍。
1. 雙擊tag p開頭，選中該tag。

2. 按反包圍Ctrl+Shift+]，可去掉tag p並自動處理子節點的縮進。

這裏多提一句HBuilderX的快捷鍵理念，就是符號化，而不是字母化。
不少工具的快捷鍵都是控制鍵+功能英文單詞中的一個字母，這個是極難記憶的。
符號化讓快捷鍵的記憶變簡單，好比Ctrl+]是包圍。
而反操做或加強操做通常是加Shift，好比Ctrl+Shift+]是反包圍。

選中相同語法詞

1. 下圖中，使用普通的選擇相同詞，會把全部div都選中。但使用Ctrl+Shift+e（mac是Command+Shift+d），會智能識別語法，剔除不相干的詞。
2. 下圖按下Ctrl+Shift+e同時選中tag首尾的div，而不會選中子節點的div。
3. 而後就能夠方便的將原div更名爲p

選擇一個括號時，也可使用選中相同語法詞，來選中對應的另外一個括號

交換選區內容

當須要交互2個選區的內容時，選中a、剪切、點b前面、粘貼、選中b、找到以前a的位置點擊、粘貼...這麼長的操做過低效。
來看HBuilderX的Ctrl+Shift+x交互選區，也就是Ctrl+x的加強版。
1. 雙擊第1個style屬性後的引號內側，可選中引號內容。
2. 按下Ctrl後繼續雙擊第2個style屬性後的引號內側，可選中2個引號內的選區。
3. 按下Ctrl+Shift+x，交換style屬性的內容。

若是不選擇內容，光標放置到2行，可直接交換這2行的內容，以下圖

撤銷最後一個多選區或多光標

選區選多了或選錯了，不用擔憂要重頭選，Ctrl+Shift+z不是撤銷編輯內容，而是撤銷最後一個選區。
1. 雙擊選中class
2. 按Ctrl+e選中相同詞
3. 按Ctrl+Shift+z，再也不選中最後一個詞。

批量合併行

下圖示例，是把css合併爲一行時的快捷操做
1. 雙擊{內側選中class
2. 按Ctrl+雙擊選中另外一個class
3. 按反格式化Ctrl+Shift+k，能夠把每一個css的區塊代碼都合併爲一行
Ctrl+k是格式化代碼，那麼Ctrl+Shift+k就是合併爲一行。

同時註釋if段首尾

if塊的調整很常見，除了包圍、反包圍外，經常使用操做還有同時註釋掉if段首尾。
1. 雙擊if選中if代碼塊
2. 按Ctrl+\在選區首尾加光標，變成多光標模式
3. 按Ctrl+/註釋掉選區首尾行


幫助開發者成爲極客，一直是HBuilder的理念。HBuilderX更上一層樓。

使用：

1、準備工做：

 1.新建項目：

    依次點擊文件——>新建——>選擇Web項目（快捷鍵：Ctrl+N,W）

 

 2.建立HTML頁面：

    在項目資源管理器中選擇剛纔新建的項目，依次點擊文件——>新建——>選擇HTML文件，並選擇空白文件模板，如圖：

 

2、實時查看編程效果

    win系統按下Ctrl+P進入邊改邊看模式，若是當前打開的是HTML文件，每次保存均會自動刷新以顯示當前頁面效果。若是爲JA、CSS文件，如與當前瀏覽器視圖打開的頁面有引用關係，也會刷新。

 

3、代碼塊大量減小重複代碼工做量

    在打開的getstart.html輸入h，以下圖，

    而後按下8，自動生成HTML的基本代碼以下：

 

4、快捷鍵

    輸入sc，自動出現script，回車便可，很是方便。

 

5、強大的JS解析引擎大大加快JS開發速度

 1.提示HTML、CSS、JSON

 2.提示自定義系統方法

 

 3.提示閉包

 

6、跳轉到class、id、js方法定義處

 

 

首先去官網把 HBuilder 下載下來，http://www.dcloud.io/ ，是個解壓包，都不須要安裝，放到你指定的位置就行，有Windows版和Mac版，二者版本操做都差很少，只是一個是調試Android的，一個是調試IOS的，基本上調試一個版本就能夠了，由於最後發佈出去的App都同樣，不多有不同的狀況，我在開發中遇到了一個不同的狀況就是Android對Url不區分大小寫，而IOS就區分，致使IOS引用的文件不加載，因爲此工具開發出來的是徹底靜態的Html文件，只有javascript代碼，因此須要後臺開發作支撐，我這裏選用了MVC做爲數據後臺，差點忘了，須要調試IOS你還須要一臺Mac電腦，O(∩_∩)O~

打開HBuilder 

 

返回頂部

個人第一個App

首先你能夠建立一個例子來完整的試試效果，沒必要着急寫後臺代碼，HBuilder 提供了2個例子，一個是登陸，一個是MUI介紹，MUI是DCloud 開發的前端框架，你也可使用其餘的框架，咱們來建立一個MUI的例子，

點擊 文件-新建-移動App，在彈出框中輸入項目名稱，選擇下面的 Hello mui 實例

 

這個時候你就能夠把手機插上電腦，見證奇蹟的時刻，點擊 運行-手機運行，

你會發現什麼都沒有， W(￣_￣)W，別急，Android手機須要用手機助手安裝驅動，這個簡單，可是iPhone就須要安裝插件和下載iTunes了，你會發現iPhone很難伺候呀，呵呵，確實iPhone更難的還在後面呢，Windows下你能夠把App植入到iPhone，可是網頁代碼不能調試，須要Mac版的才能夠哦

 

點擊 工具-插件安裝 ，選擇IOS鏈接插件，點擊安裝，再安裝iTunes

再次點擊手機運行，發現手機出現啦，又一次見證奇蹟的時刻到了，點擊你要調試的手機

 

而後會在你桌面出現一個 HBuilder 的App，Android的用戶能夠直接打開，可是iPhone的用戶先點擊App，會提出一行提示，按照提示操做一下就能夠進入了

哇，我開發的第一個App，O(∩_∩)O~

 

返回頂部

配置源代碼管理

 　　咱們公司使用的TFS源代碼管理，HBuilder 支持TFS和SVN，我這裏只介紹TFS的配置，其餘的你們能夠本身研究

點擊 工具-插件安裝，在彈出框中咱們能夠看到有SVN的插件，可是這裏我須要TFS，點擊 瀏覽Eclipse插件市場，搞Java的人對Eclipse應該很熟悉吧

 

 在市場中搜索TFS，找到第一個就是的哦，點擊Install，而後等待下載，後面就是下一步下一步就能夠了

 

重啓 HBuilder 後發現找不到 TFS配置的話，請點擊 視圖-顯示視圖-其餘...

 

找到團隊資源管理器，點擊肯定，下面的操做就和在VS中配置同樣了

 

鏈接公司的TFS服務器

 

在你本身項目上右鍵-版本管理-共享項目...，在彈出框選擇本身的項目目錄就能夠啦

 

 最後就能夠看到咱們熟悉的菜單啦