推薦一個超爽的前端工具HBuilder

開發學習網站：www.runoob.com 菜鳥教程

uniapp官網學習地址：uniapp.dcloud.io/

使用HBuilder UniApp跨平臺開源框架開發的H5和有app項目

感受效果還不錯 之後跨平臺是一個趨勢哦

能夠學習一下 語法是vue的語法開發還有一些小程序的語法結合起來的

有不少個開源項目，能夠下載學習！一套代碼可編譯到8個平臺

我學習後開發的瞭解一下

H5項目 只能在手機打開 pc排版會亂

https://www.gomyorder.cn

支付寶小程序

在支付寶中搜索【淘淘省錢兄】瞭解

App項目下載地址 app目前只能下載安卓的 ios的沒有證書看不了 東西是同樣的

www.gomyorder.cn/app

微信小程序

我作的是淘寶的東西全部微信不讓上，那就也看不了，不過核心功能仍是同樣的 ，不一樣平臺有特殊的處理方式哦

微信公衆號

【go省錢兄】瞭解

瞭解完能夠搞事情了哦

什麼是HBuilder？

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder自己主體是由Java編寫，它基於Eclipse，因此順其天然地兼容了Eclipse的插件。快，是HBuilder的最大優點，經過完整的語法提示和代碼輸入法、代碼塊等，大幅提高HTML、js、css的開發效率。

如何安裝 HBuilder？

HBuilder下載地址：在HBuilder官網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激活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，分別輸出匿名函數和閉包。

靈活的快捷鍵使得編程過程手不離鍵盤

效果以下圖

​

• 新建html基本模板後,當前光標處於title標籤內,此時咱們給HTML設置title:hellohbuilder,完成後使用Ctrl+回車在當前的下一行插入空行,並將光標移動到下一行

• 咱們在此處使用sc代碼塊生成一個script塊來編寫js代碼(輸入sc,回車)以下圖

​

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

​

• 此時生成的方法的方法名是選中狀態,咱們只須要直接輸入新的方法名helloworld便可,以下圖

​

• 上圖中的綠色豎線，是代碼塊中指定的下一個編輯位置,敲擊回車光標會直接跳轉至豎線位置

• 此時按向下、向下,Ctrl+回車,輸入style回車,生成css代碼區域

• 定義一個Css類classA：輸入. c l a s s A { 回車,f o n t 回車 回車 回車

• 而後按alt+下,alt+下跳轉至下一個編輯區域

• 依次輸入< d i v 也可輸入<dv回車、<iv回車,語法助手能夠經過模糊匹配獲知想要生成的標籤)以下圖

​

• 如上圖所示,代碼助手左側包含數字，可使用這些數字選擇對應的條目,右側包含瀏覽器兼容性數據及示例

• 輸入i 回車 d 1,右箭頭,空格,c 回車 回車

• 鼠標在div標籤的class屬性classA上懸浮,按下Alt和左鍵,點擊後可跳轉至classA定義處

• Ctrl+回車

• div也能夠經過代碼塊生成如輸入divc回車回車回車,輸入helloworld以下圖

• 向下,回車

使用CSS選擇器語法來快速開發HTML和CSS(支持Emmet)

輸入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代碼以下圖

​

HBuilder集成了Emmet功能,能夠經過CSS選擇器語法來快速開發HTML和CSS,如想深刻了解Emmet請移步www.emmet.io/

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

JS中提示HTML、CSS

JS提示html的ID

​

JS提示html的tagname

​

JS提示css類名

​

JS經過ID、tagname、css類名不但能夠獲取HTML元素,還能夠精確分析出其元素類型,準確提示其屬性,如上圖能夠提示出list[0].type

JS中提示JSON

​

JS提示自定義系統方法

​

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

​

JS提示閉包對象

​

​

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

按下Alt,左鍵點擊引用的方法名、ID、CSS類、文件(連接、圖片),都可跳轉到引用的地方,跨文件的引用也能夠哦

跳轉到JS方法定義處 以下圖

​

跳轉到CSS類定義處 以下圖

​

跳轉到ID定義處 以下圖

​

跳轉到文件 以下圖

​