HBuilder的基本使用方法

本篇內(nèi)容主要講解“HBuilder的基本使用方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“HBuilder的基本使用方法”吧!

如何安裝HBuilder？

　　HBuilder下載地址：在HBuilder官網(wǎng)http://www.dcloud.io/點(diǎn)擊免費(fèi)下載，下載最新版的HBuilder。

　　HBuilder目前有兩個(gè)版本，一個(gè)是windows版，一個(gè)是mac版。下載的時(shí)候根據(jù)自己的電腦選擇適合自己的版本。

使用HBuilder新建項(xiàng)目

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

　　請(qǐng)?jiān)贏處填寫新建項(xiàng)目的名稱，B處填寫(或選擇)項(xiàng)目保存路徑(更改此路徑HBuilder會(huì)記錄，下次默認(rèn)使用更改后的路徑)，C處可選擇使用的模板(可點(diǎn)擊自定義模板,參照打開目錄中的readme.txt自定義模板)

使用HBuilder創(chuàng)建HTML頁(yè)面

　　在項(xiàng)目資源管理器中選擇剛才新建的項(xiàng)目,依次點(diǎn)擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊HTML文件)),并選擇空白文件模板。

使用HBuilder邊改邊看試試查看編程效果

　　win系統(tǒng)按下Ctrl+P(MacOS為Command+P)進(jìn)入邊改邊看模式,在此模式下,如果當(dāng)前打開的是HTML文件，每次保存均會(huì)自動(dòng)刷新以顯示當(dāng)前頁(yè)面效果(若為JS、CSS文件，如與當(dāng)前瀏覽器視圖打開的頁(yè)面有引用關(guān)系，也會(huì)刷新)

　　HBuilder代碼塊大量減少重復(fù)代碼工作量

　　在打開的getstart.html中輸入H。

　　然后按下8,自動(dòng)生成HTML的基本代碼

什么是代碼塊?

　　代碼塊是常用的代碼組合，比如在js中輸入$，回車，則可以自動(dòng)輸入document.getElementById(id)。

　　查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應(yīng)的代碼塊進(jìn)行查看和編輯。也可以在激活代碼塊的代碼助手中，點(diǎn)擊詳細(xì)信息右下角的修改圖標(biāo)進(jìn)行修改和查看。

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

　　代碼塊激活字符原則2:整段HTML一般使用tag的名稱。比如script、style，通常，敲最多4個(gè)字母即可匹配到需要的代碼塊，不需要完整錄入，如sc回車、st回車，即可完成script、style標(biāo)簽的輸入。

　　代碼塊激活字符原則3:同一個(gè)tag，有多個(gè)代碼塊輸出，則在最后加后綴。比如meta輸出但metau則輸出，metag同理。

　　代碼塊激活字符原則4:如果原始語(yǔ)法超過(guò)4個(gè)字符，針對(duì)常用語(yǔ)法，則第一個(gè)單詞的激活符使用縮寫。比如inputbutton，縮寫為inbutton，同理intext是輸入框。

　　代碼塊激活字符原則5:js的關(guān)鍵字代碼塊，是在關(guān)鍵字最后加一個(gè)重復(fù)字母。比如if直接敲會(huì)提示if關(guān)鍵字，但iff回車，則出現(xiàn)if代碼塊。類似的有forr、withh等。由于funtion字母較長(zhǎng)，為加快輸入速度，取fun縮寫，比如funn，輸出function代碼塊，而funa和func，分別輸出匿名函數(shù)和閉包。

到此，相信大家對(duì)“HBuilder的基本使用方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！