[TOC] * * * * * # Hbuilder的使用技巧  ### 下載安裝 下載地址：[Hbuilder](http://www.dcloud.io/) ### 準備工作 第一步 新建一個web項目 為什么需要新建項目? HBuilder會為項目建立索引，工程間文件的鏈接引用關系都在管理中。 這樣在跨文件引用提示、轉到定義、重構、移動圖片路徑等很多操作中HBuilder都能智能處理。 如果單獨打開文件，功能就弱了很多，當然也比普通文本編輯器多。 在實際的工作中，通常每個項目我們都需要建立相應的目錄結構。如寫一個新聞網站，目錄結構至少是這樣的：  依次點擊文件→新建→選擇Web項目(按下Ctrl+N,W可以觸發快速新建(MacOS請使用Command+N,然后左鍵點擊Web項目)) <br/><br/><br/> **第二步 新建一個HTML文件**  如上圖，請在A處填寫新建項目的名稱，B處填寫(或選擇)項目保存路徑(更改此路徑HBuilder會記錄，下次默認使用更改后的路徑)，C處可選擇使用的模板(可點擊自定義模板,參照打開目錄中的readme.txt自定義模板) 創建HTML頁面 在項目資源管理器中選擇剛才新建的項目,依次點擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發快速新建(MacOS請使用Command+N,然后左鍵點擊HTML文件)),并選擇空白文件模板,如下圖  完成準備工作 新建HTML后準備工作已經完成，此時的項目資源管理器如下圖  同時getstart.html應已打開 * * * * * ### 使用邊改邊看試試查看編程效果 win系統按下Ctrl+P(MacOS為Command+P)進入邊改邊看模式,在此模式下,如果當前打開的是HTML文件，每次保存均會自動刷新以顯示當前頁面效果(若為JS、CSS文件，如與當前瀏覽器視圖打開的頁面有引用關系，也會刷新) ### 代碼塊大量減少重復代碼工作量 在打開的getstart.html中輸入H,如下圖  然后按下8,自動生成HTML的基本代碼如下圖  **什么是代碼塊?** 代碼塊是常用的代碼組合，比如在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，分別輸出匿名函數和閉包。 ### 靈活的快捷鍵使得編程過程手不離鍵盤 **代碼輸入法：一個數字，少敲10下鍵盤。**  按下候選列表前的數字，自動把該候選項輸入到編輯區，你將不用把所有字都敲一遍了。當然除了數字選擇，跳字輸入也是支持的。 codeassist **代碼塊：一個代碼塊，少敲20下鍵盤。**  圖標為codeblock的候選項為代碼塊。 代碼塊是常用的代碼組合，比如在js中輸入$，回車，則可以自動輸入document.getElementById(id)。 再舉例，在HTML中輸入i，回車，可以得到input button標簽。 codeblock_input 查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應的代碼塊進行查看和編輯。也可以在激活代碼塊的代碼助手中，點擊詳細信息右下角的修改圖標進行修改和查看。 代碼塊激活字符原則1:連續單詞的首字母。比如：dg激活document.getElementById("");vari激活var i=0;dn激活display: none; 代碼塊激活字符原則2:整段HTML一般使用tag的名稱。比如script、style，通常，敲最多4個字母即可匹配到需要的代碼塊，不需要完整錄入，如sc回車、st回車，即可完成script、style標簽的輸入。 代碼塊激活字符原則3:同一個tag，有多個代碼塊輸出，則在最后加后綴。比如meta輸出<meta name="" content=""/>但metau則輸出<meta charset="UTF-8"/>，metag同理。 代碼塊激活字符原則4:如果原始語法超過4個字符，針對常用語法，則第一個單詞的激活符使用縮寫。比如input button，縮寫為inbutton，同理intext是輸入框。 代碼塊激活字符原則5:js的關鍵字代碼塊，是在關鍵字最后加一個重復字母。比如if直接敲會提示if關鍵字，但iff回車，則出現if代碼塊。類似的有forr、withh等。由于funtion字母較長，為加快輸入速度，取fun縮寫，比如funn，輸出function代碼塊，而funa和func，分別輸出匿名函數和閉包。 **全時提示** HBuilder不僅僅提示全面的語法，非語法的各種候選輸入也都能提示。包括圖片、鏈接、顏色、字體、腳本、樣式、URI、ID、class、自定義JS對象、方法。 舉例，在img src=后激活代碼助手，可以看到本工程所有圖片列表；輸入 sc 可以看到本工程所有js列表；在js的document.getElementById(id)中提示本工程已經定義的ID列表；在css的color:后可以列出本工程所有使用過的顏色。 **Emmet支持** HBuilder內嵌了emmet（即zencoding）插件。輸入div#id1，按下tab，可以自動生成 <div id="id1"></div>。Emmet的詳細語法請查閱其官方網站emmet.io。 **框架語法支持** HBuilder內嵌了jquery、bootstrap、angular、mui等常用框架的語法提示庫，并且這些框架語法一樣可以享受到HBuilder的全時提示機制，提示圖片、顏色、id、class... 如果要使用框架語法，需要在工具菜單/項目的右鍵菜單中，點擊引入框架語法提示的子項，為該項目選擇框架語法提示。提示效果如下：     ### 常用快捷鍵       * * * * * [更多技巧](http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/95)