
【軟件介紹】
HBuilder是DCloud(數(shù)字天堂)推出的一款支持HTML5的Web開發(fā)IDE。強(qiáng)大的代碼助手幫你快速完成開發(fā)。HBuilder的編寫用到了Java、C、WebRuby。HBuilder本身主體是由Java編寫,它基于Eclipse,所以順其自然地兼容了Eclipse的插件。
【軟件特點(diǎn)】
編碼比其他工具快5倍夠不夠?對極客而言,追求快,沒有止境!代碼輸入法:按下數(shù)字快速選擇候選項(xiàng)
可編程代碼塊:一個代碼塊,少敲50個按鍵
內(nèi)置emmet:tab一下生成一串代碼
無死角提示:除了語法,還能提示ID、Class、圖片、鏈接、字體…
跳轉(zhuǎn)助手、選擇助手,不用鼠標(biāo),手不離鍵盤
多種語言支持:php、jsp、ruby、python、nodejs等web語言,less、coffee等編譯型語言均支持
邊改邊看:一邊寫代碼,一邊看效果
強(qiáng)悍的轉(zhuǎn)到定義和一鍵搜索
這里還有最全的語法庫、最全的語法瀏覽器兼容庫

【使用教程】
HBuilder使用教程使用HBuilder新建項(xiàng)目
依次點(diǎn)擊文件→新建→選擇Web項(xiàng)目(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請使用Command+N,然后左鍵點(diǎn)擊Web項(xiàng)目))


如上圖,請?jiān)贏處填寫新建項(xiàng)目的名稱,B處填寫(或選擇)項(xiàng)目保存路徑(更改此路徑HBuilder會記錄,下次默認(rèn)使用更改后的路徑),C處可選擇使用的模板(可點(diǎn)擊自定義模板,參照打開目錄中的readme.txt自定義模板)
使用HBuilder創(chuàng)建HTML頁面
在項(xiàng)目資源管理器中選擇剛才新建的項(xiàng)目,依次點(diǎn)擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請使用Command+N,然后左鍵點(diǎn)擊HTML文件)),并選擇空白文件模板,如下圖
i

使用HBuilder邊改邊看試試查看編程效果
win系統(tǒng)按下Ctrl+P(MacOS為Command+P)進(jìn)入邊改邊看模式,在此模式下,如果當(dāng)前打開的是HTML文件,每次保存均會自動刷新以顯示當(dāng)前頁面效果(若為JS、CSS文件,如與當(dāng)前瀏覽器視圖打開的頁面有引用關(guān)系,也會刷新)
HBuilder代碼塊大量減少重復(fù)代碼工作量
在打開的getstart.html中輸入H,如下圖

然后按下8,自動生成HTML的基本代碼如下圖

什么是代碼塊?
代碼塊是常用的代碼組合,比如在js中輸入$,回車,則可以自動輸入document.getElementById(id)。
查看、編輯代碼塊可以在工具-自定義代碼塊中,選擇相應(yīng)的代碼塊進(jìn)行查看和編輯。也可以在激活代碼塊的代碼助手中,點(diǎn)擊詳細(xì)信息右下角的修改圖標(biāo)進(jìn)行修改和查看。
代碼塊激活字符原則1:連續(xù)單詞的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;
代碼塊激活字符原則2:整段HTML一般使用tag的名稱。比如script、style,通常,敲最多4個字母即可匹配到需要的代碼塊,不需要完整錄入,如sc回車、st回車,即可完成script、style標(biāo)簽的輸入。
代碼塊激活字符原則3:同一個tag,有多個代碼塊輸出,則在最后加后綴。比如 meta 輸出 <meta name="" content=""/> 但 metau 則輸出 <meta charset="UTF-8"/>,metag同理。
代碼塊激活字符原則4:如果原始語法超過4個字符,針對常用語法,則第一個單詞的激活符使用縮寫。比如input button,縮寫為inbutton,同理intext是輸入框。
代碼塊激活字符原則5:js的關(guān)鍵字代碼塊,是在關(guān)鍵字最后加一個重復(fù)字母。比如if直接敲會提示if關(guān)鍵字,但iff回車,則出現(xiàn)if代碼塊。類似的有forr、withh等。由于funtion字母較長,為加快輸入速度,取fun縮寫,比如funn,輸出function代碼塊,而funa和func,分別輸出匿名函數(shù)和閉包。
靈活的快捷鍵使得編程過程手不離鍵盤
效果如下圖

新建html基本模板后,當(dāng)前光標(biāo)處于title標(biāo)簽內(nèi),此時我們給HTML設(shè)置title:hellohbuilder,完成后使用Ctrl+回車在當(dāng)前的下一行插入空行,并將光標(biāo)移動到下一行
我們在此處使用sc代碼塊生成一個script塊來編寫js代碼(輸入sc,回車)如下圖

使用funn代碼塊編寫一個JS方法helloworld(輸入funn,回車)如下圖

此時生成的方法的方法名是選中狀態(tài),我們只需要直接輸入新的方法名helloworld即可,如下圖

上圖中的綠色豎線,是代碼塊中指定的下一個編輯位置,敲擊回車光標(biāo)會直接跳轉(zhuǎn)至豎線位置
此時按向下、向下,Ctrl+回車,輸入style回車,生成css代碼區(qū)域
定義一個Css類classA:輸入. c l a s s A { 回車,f o n t 回車 回車 回車
然后按alt+下,alt+下跳轉(zhuǎn)至下一個編輯區(qū)域
依次輸入< d i v 也可輸入<dv回車、<iv回車,語法助手可以通過模糊匹配獲知想要生成的標(biāo)簽)如下圖

如上圖所示,代碼助手左側(cè)包含數(shù)字,可以使用這些數(shù)字選擇對應(yīng)的條目,右側(cè)包含瀏覽器兼容性數(shù)據(jù)及示例
輸入i 回車 d 1,右箭頭,空格,c 回車 回車
鼠標(biāo)在div標(biāo)簽的class屬性classA上懸浮,按下Alt和左鍵,點(diǎn)擊后可跳轉(zhuǎn)至classA定義處
Ctrl+回車
div也可以通過代碼塊生成如輸入divc回車回車回車,輸入helloworld
向下,回車
使用CSS選擇器語法來快速開發(fā)HTML和CSS(支持Emmet)
輸入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代碼如下圖

強(qiáng)大的JS解析引擎大大加快JS開發(fā)的速度
JS中提示HTML、CSS
JS提示html的ID

JS提示html的tagname

JS提示css類名

JS通過ID、tagname、css類名不但可以獲取HTML元素,還可以精確分析出其元素類型,準(zhǔn)確提示其屬性,如上圖可以提示出list[0].type
JS中提示JSON

JS提示自定義系統(tǒng)方法

JS提示對象引用及其屬性、方法

JS提示閉包對象


跳轉(zhuǎn)到class、id、js方法定義處
按下Alt,左鍵點(diǎn)擊引用的方法名、ID、CSS類、文件(鏈接、圖片),均可跳轉(zhuǎn)到引用的地方,跨文件的引用也可以哦
跳轉(zhuǎn)到JS方法定義處 如下圖

跳轉(zhuǎn)到CSS類定義處 如下圖

跳轉(zhuǎn)到ID定義處 如下圖

跳轉(zhuǎn)到文件 如下圖

【常見問題】
Q:什么叫滾動條信息點(diǎn)?A: 當(dāng)代碼中有重要的標(biāo)記出現(xiàn)時,會生成滾動條信息點(diǎn),在滾動條右側(cè)出現(xiàn)顏色各異的點(diǎn)。點(diǎn)擊這些點(diǎn)或使用跳轉(zhuǎn)到下一個信息點(diǎn)功能,可以快速到達(dá)這些代碼處。如下標(biāo)記會生成信息點(diǎn):書簽、任務(wù)、錯誤提示。
Q:怎么才能快速掌握HBuilder開發(fā)技巧?
A: 軟件自帶HelloHBuilder項(xiàng)目,該項(xiàng)目為教程項(xiàng)目(如果不小心刪除了不要擔(dān)心,可以在新建WEB項(xiàng)目時,使用HelloHBuilder模板新建出來),按照項(xiàng)目中的lesson1.txt中的快捷鍵敲一遍即可快速掌握HBuilder快速開發(fā)技巧。
Q:什么是HTML5+?
A: HTML5+規(guī)范是基于HTML5的擴(kuò)展規(guī)范,用于彌補(bǔ)HTML5和原生應(yīng)用功能之間的差距。HTML5+規(guī)范是一個開放的規(guī)范,在W3C中國的指導(dǎo)下,由HTML5中國產(chǎn)業(yè)聯(lián)盟運(yùn)作,所有規(guī)范都是面向開發(fā)者的,開發(fā)者提需求、開發(fā)者評審實(shí)現(xiàn)方案、開發(fā)者投票選定規(guī)范。
Q:hbuilder怎么修改svn的用戶名和密碼?
A:SVN的密碼保存在服務(wù)器上,一般能通過Web方式修改密碼(前提是服務(wù)器上安裝了SVNManager或者其它的PHP或者CGI程序)
如果SVN是和Apache一起使用的話,可以找到Apache目錄下的 conf\httpd.conf文件,里面的段中 AuthUserFile 指定的就是用戶密碼文件,是文本形式的,密碼用MD5加密。如果不是SVN,那就找SVN庫下的conf/passwd文件,是文本文件,密碼未加密。

Hbuilder的安裝及配置
首先設(shè)置自動編譯less。
1.打開預(yù)編譯器設(shè)置。

2選中l(wèi)ess點(diǎn)編輯

3按以下參數(shù)寫好。
觸發(fā)地址在hbuilder目錄下依次按級尋找lessc.cmd
命令參數(shù):%FileName% %FileBaseName%.css

4.確定即可,然后試驗(yàn)一下。如果報錯缺少node。需安裝nodejs。
5.安裝nodejs
6.重新啟動hbulider即可享受自動編譯less。

































