App開(kāi)發(fā)工具HBuilder設(shè)計(jì)理念及常用功能

來(lái)源：Dcloud 發(fā)布時(shí)間：2017-11-09瀏覽：19868次

App開(kāi)發(fā)工具HBuilder設(shè)計(jì)理念及常用功能

App開(kāi)發(fā)工具設(shè)計(jì)理念

HBuilder是一個(gè)極客工具，追求無(wú)鼠標(biāo)的極速操作。
不管是敲代碼的快捷設(shè)定，還是操作功能的快捷設(shè)定，都融入了效率第一的設(shè)計(jì)思想。
程序員究竟是coder，還是builder，我們堅(jiān)持后者。
不為敲字母而花費(fèi)時(shí)間，不為大小寫(xiě)拼錯(cuò)而調(diào)錯(cuò)半天，把精力花在思考上，想清楚后落筆如飛。
支撐這個(gè)理念，除了體驗(yàn)上的精細(xì)設(shè)計(jì)，還要求我們突破很多世界級(jí)技術(shù)難題，包括語(yǔ)法庫(kù)、語(yǔ)法結(jié)構(gòu)模型、AST語(yǔ)法分析引擎。
我們的語(yǔ)法引擎很強(qiáng)大也很吃硬件，這導(dǎo)致我們對(duì)HBuilder的啟動(dòng)和資源消耗略有遺憾，但我們追求提升電腦硬件來(lái)搭配HBuilder，而不是裁剪功能。
另一個(gè)需要強(qiáng)調(diào)的理念是H。
HBuilder顧名思義是為HTML設(shè)計(jì)的。
相對(duì)于java、.net、object-c這些主流編程語(yǔ)言，HTML開(kāi)發(fā)者以往總感覺(jué)低人一等。
但時(shí)代在變，前端代碼越來(lái)越復(fù)雜，前端工程師的身價(jià)也持續(xù)攀高，我們認(rèn)為HTML5需要一款配得上它的地位的高級(jí)IDE，而不再是刀耕火種時(shí)代的文本編輯器。
所以HBuilder主要用于開(kāi)發(fā)html、js、css，同時(shí)配合HTML的后端腳本語(yǔ)言如php、jsp也可以適用，還有前端的預(yù)編譯語(yǔ)言如less以及我們鐘愛(ài)的markdown都可以良好的編輯。
從2013年夏天發(fā)布至今，HBuilder已經(jīng)成為業(yè)內(nèi)主流的開(kāi)發(fā)工具，擁有幾十萬(wàn)開(kāi)發(fā)者。
歡迎你使用HBuilder，成為HBuilder。

以下為常用功能簡(jiǎn)介。

App開(kāi)發(fā)工具常用功能：代碼助手，飛一樣的編碼

代碼輸入法：一個(gè)數(shù)字，少敲10下鍵盤(pán)。

按下候選列表前的數(shù)字，自動(dòng)把該候選項(xiàng)輸入到編輯區(qū)，你將不用把所有字都敲一遍了。當(dāng)然除了數(shù)字選擇，跳字輸入也是支持的。

代碼塊：一個(gè)代碼塊，少敲20下鍵盤(pán)。

圖標(biāo)為的候選項(xiàng)為代碼塊。
代碼塊是常用的代碼組合，比如在js中輸入$，回車(chē)，則可以自動(dòng)輸入document.getElementById(id)。
再舉例，在HTML中輸入i，回車(chē)，可以得到input button標(biāo)簽。

查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應(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的名稱(chēng)。比如script、style，通常，敲最多4個(gè)字母即可匹配到需要的代碼塊，不需要完整錄入，如sc回車(chē)、st回車(chē)，即可完成script、style標(biāo)簽的輸入。

代碼塊激活字符原則3:同一個(gè)tag，有多個(gè)代碼塊輸出，則在最后加后綴。比如meta輸出<meta name="" content=""/>但metau則輸出<meta charset="UTF-8"/>，metag同理。

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

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

全時(shí)提示

HBuilder不僅僅提示全面的語(yǔ)法，非語(yǔ)法的各種候選輸入也都能提示。包括圖片、鏈接、顏色、字體、腳本、樣式、URI、ID、class、自定義JS對(duì)象、方法。

舉例，在img src=后激活代碼助手，可以看到本工程所有圖片列表；輸入<sc可以看到本工程所有js列表；在js的document.getElementById(id)中提示本工程已經(jīng)定義的ID列表；在css的color:后可以列出本工程所有使用過(guò)的顏色。

Emmet支持

HBuilder內(nèi)嵌了emmet（即zencoding）插件。輸入div#id1，按下tab，可以自動(dòng)生成 <div id="id1"></div>。Emmet的詳細(xì)語(yǔ)法請(qǐng)查閱其官方網(wǎng)站emmet.io。

框架語(yǔ)法支持

HBuilder內(nèi)嵌了jquery、bootstrap、angular、mui等常用框架的語(yǔ)法提示庫(kù)，并且這些框架語(yǔ)法一樣可以享受到HBuilder的全時(shí)提示機(jī)制，提示圖片、顏色、id、class...
如果要使用框架語(yǔ)法，需要在工具菜單/項(xiàng)目的右鍵菜單中，點(diǎn)擊引入框架語(yǔ)法提示的子項(xiàng)，為該項(xiàng)目選擇框架語(yǔ)法提示。提示效果如下：

JSDoc+

HBuilder擴(kuò)展了jsdoc，并改良用途用于酷酷的語(yǔ)法提示，讓動(dòng)態(tài)的js有了靜態(tài)的感覺(jué)。具體參考：http://ask.dcloud.net.cn/article/129

邊看邊改

想一邊寫(xiě)代碼，一邊看效果？按下Ctrl P進(jìn)入邊看邊改視圖。左邊保存右邊立即刷新。
調(diào)試的玩法還有很多，參考http://ask.dcloud.net.cn/article/483

綠柔保護(hù)你的眼睛

綠柔主題的特點(diǎn)是柔和、低對(duì)比度、強(qiáng)光可見(jiàn)、綠色感加強(qiáng)。對(duì)著這樣的界面寫(xiě)一天代碼，感受要比對(duì)著太亮或太暗的界面舒服很多。
綠柔是一個(gè)嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)過(guò)程，包含色彩心理學(xué)和色彩生理學(xué)的很多知識(shí)，而且在北京國(guó)奧心理醫(yī)院做過(guò)嚴(yán)謹(jǐn)?shù)尼t(yī)學(xué)測(cè)試，形成大量腦電波數(shù)據(jù)。
我們安排工程師在不同的配色主題下寫(xiě)代碼，檢測(cè)他們的腦疲勞程度，最終調(diào)校出了這套配色方案。
實(shí)驗(yàn)過(guò)程在官網(wǎng)下方也有介紹http://dcloud.io/
這是HBuilder發(fā)布會(huì)時(shí)設(shè)計(jì)師的演講實(shí)錄，表達(dá)了我們的設(shè)計(jì)理念：
          最近有部電影叫盲探，其中劉德華盯了4天嫌疑犯眼睛就瞎了，眼睛很重要但也很脆弱。
          我們現(xiàn)在的生活中到處是電子屏，電腦屏、手機(jī)屏、平板、電視，無(wú)論上班下班，我們都對(duì)著這些屏幕。這個(gè)時(shí)代保護(hù)眼睛更重要。一定不能程序員讓在寫(xiě)代碼時(shí)受更多罪。所以我們很重視配色方案。
          我們調(diào)研了所有主流配色方案。沒(méi)有滿意的。有的很漂亮，但長(zhǎng)時(shí)間看不舒服。所以我們決定自己調(diào)，但我們的設(shè)計(jì)目的不是為了好看，而是為了更健康。
          色彩方面有色彩生理學(xué)和色彩心理學(xué)。我們先來(lái)看色彩生理學(xué)，當(dāng)一個(gè)人眼睛長(zhǎng)期看暗色系事物時(shí)，大腦會(huì)分泌激素強(qiáng)迫眼睛增強(qiáng)視力，比如我們?cè)谝粋€(gè)黑屋子待一會(huì)就能看清東西，但回到陽(yáng)光下時(shí)又會(huì)暈眩，這叫做暗適應(yīng)。暗適應(yīng)會(huì)讓程序員很不舒服，所以我們不能選暗色系。
          再看色彩心理學(xué)，不同的色彩給人以不同的心理感受。紅色讓人感到刺激，綠色讓人感到舒適，因?yàn)槿藗儠?huì)聯(lián)想到不同的事物從而引發(fā)心理的變化。
          基于這些分析，調(diào)了上百次后，我們得出這樣的方案，我們叫它綠柔。它的特點(diǎn)是柔和，自然，低對(duì)比度，并且強(qiáng)化了綠色的感覺(jué)。我們把各種顏色中的RGB中G，就是綠的數(shù)值調(diào)的更高。
          我們做了樣本測(cè)試，結(jié)果不錯(cuò)，程序員們?cè)谑褂昧艘惶炀G柔界面后都表示比看一天其他軟件更舒服。
          最后衷心祝愿大家在滿是電子屏的世界中，活的更健康！_

最全語(yǔ)法庫(kù)和瀏覽器兼容數(shù)據(jù)

HBuilder的語(yǔ)法庫(kù)包括W3C的HTML、JAVAscript、CSS的正式標(biāo)準(zhǔn)和推薦標(biāo)準(zhǔn)...，ECMAScript中瀏覽器支持的部分，還有各大瀏覽器的擴(kuò)展語(yǔ)法，webkit、moz、ms，均實(shí)時(shí)更新到各瀏覽器的最新版本。
信息欄中的瀏覽器品牌圖標(biāo)，全亮表示無(wú)障礙支持該語(yǔ)法，全灰表示不支持，而半亮則表示該瀏覽器部分支持該語(yǔ)法。半亮?xí)r會(huì)下圖標(biāo)下方顯示出來(lái)詳細(xì)的支持情況，比如video標(biāo)簽，從IE9才開(kāi)始支持。

手機(jī)App開(kāi)發(fā)

HTML5一大用途就是App開(kāi)發(fā)。HBuilder良好的支持手機(jī)App開(kāi)發(fā)。
包括新建移動(dòng)App項(xiàng)目、run in device真機(jī)調(diào)試、本地及云端打包。
HBuilder開(kāi)發(fā)的HTML5+ App，比普通的web App功能更強(qiáng)、性能更高，具體參考文檔 5+ App章節(jié)。

更多挖寶

• 跳轉(zhuǎn)助手、選擇助手、轉(zhuǎn)義助手、快捷鍵助手，讓你手不離鍵盤(pán)。

• 更多精彩功能：語(yǔ)法校驗(yàn) | 轉(zhuǎn)到定義 | 重構(gòu) | 大綱 | 任務(wù)TODO | 版本歷史 | 內(nèi)置webserver | 預(yù)編譯less、sass等文件

• 還不滿足？下載插件增強(qiáng)更多功能，高手更可開(kāi)發(fā)插件，并共享插件造福所有開(kāi)發(fā)者。