hbuilder(HBuilder的基本使用方法)

如何安裝HBuilder?

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

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

使用HBuilder新建項目

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

　　請在A處填寫新建項目的名稱,B處填寫(或選擇)項目保存路徑(更改此路徑HBuilder會記錄,下次默認使用更改后的路徑),C處可選擇使用的模板(可點擊自定義模板,參照打開目錄中的readme.txt自定義模板)

使用HBuilder創建HTML頁面

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

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

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

　　HBuilder代碼塊大量減少重復代碼工作量

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

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

什么是代碼塊?

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

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

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

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

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

　　代碼塊激活字符原則4:如果原始語法超過4個字符,針對常用語法,則第一個單詞的激活符使用縮寫。比如inputbutton,縮寫為inbutton,同理intext是輸入框。

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

到此,相信大家對“HBuilder的基本使用方法”有了更深的了解,不妨來實際操作一番吧!這里是本站網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!