現(xiàn)在是移動(dòng)開(kāi)發(fā)的高潮時(shí)代，相信很多程序員都花時(shí)間去學(xué)習(xí)android，ios的開(kāi)發(fā)，或者利用其他原生開(kāi)發(fā)框架，今天小編要給大家推薦一個(gè)國(guó)產(chǎn)的超級(jí)神器 Hbuilder，相信這個(gè)神 器應(yīng)該有不少人知道，不知道的也沒(méi)有關(guān)系，今天知道也不晚。使用Hbuilder 可以一次編碼直接發(fā)布為 android,ios,Html5 web 的app,大家也都知道發(fā)到蘋果的APP商店中，是需要申請(qǐng)開(kāi)發(fā)者賬號(hào)，而且每年要交美金。然而通過(guò)Hbuilder我們可以發(fā)布為流應(yīng)用（類似于小程序，其他騰訊的小程序晚于Dcloud的流用），IOS用戶只需要下載一個(gè)叫”流應(yīng)用“的App，即可運(yùn)行我們自己生成的流應(yīng)用程序 。流應(yīng)用是一個(gè)內(nèi)核，一個(gè)運(yùn)行環(huán)境引擎。

現(xiàn)在讓我們揭開(kāi)他的蘆山真面目。

什么是HBuilder？

HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。快，是HBuilder的最大優(yōu)勢(shì)，通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開(kāi)發(fā)效率。

如何安裝 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)擊自定義模板,參照打開(kāi)目錄中的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)前打開(kāi)的是HTML文件，每次保存均會(huì)自動(dòng)刷新以顯示當(dāng)前頁(yè)面效果(若為JS、CSS文件，如與當(dāng)前瀏覽器視圖打開(kāi)的頁(yè)面有引用關(guān)系，也會(huì)刷新)

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

在打開(kāi)的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激活var i=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è)單詞的激活符使用縮寫。比如input button，縮寫為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ù)和閉包。

靈活的快捷鍵使得編程過(guò)程手不離鍵盤

效果如下圖

• 新建html基本模板后,當(dāng)前光標(biāo)處于title標(biāo)簽內(nèi),此時(shí)我們給HTML設(shè)置title:hellohbuilder,完成后使用Ctrl 回車在當(dāng)前的下一行插入空行,并將光標(biāo)移動(dòng)到下一行

• 我們?cè)诖颂幨褂胹c代碼塊生成一個(gè)script塊來(lái)編寫js代碼(輸入sc,回車)如下圖

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

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

• 上圖中的綠色豎線，是代碼塊中指定的下一個(gè)編輯位置,敲擊回車光標(biāo)會(huì)直接跳轉(zhuǎn)至豎線位置

• 此時(shí)按向下、向下,Ctrl 回車,輸入style回車,生成css代碼區(qū)域

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

• 然后按alt 下,alt 下跳轉(zhuǎn)至下一個(gè)編輯區(qū)域

• 依次輸入< d i v 也可輸入<dv回車、<iv回車,語(yǔ)法助手可以通過(guò)模糊匹配獲知想要生成的標(biāo)簽)如下圖

• 如上圖所示,代碼助手左側(cè)包含數(shù)字，可以使用這些數(shù)字選擇對(duì)應(yīng)的條目,右側(cè)包含瀏覽器兼容性數(shù)據(jù)及示例

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

• 鼠標(biāo)在div標(biāo)簽的class屬性classA上懸浮,按下Alt和左鍵,點(diǎn)擊后可跳轉(zhuǎn)至classA定義處

• Ctrl 回車

• div也可以通過(guò)代碼塊生成如輸入divc回車回車回車,輸入helloworld如下圖

• 向下,回車

使用CSS選擇器語(yǔ)法來(lái)快速開(kāi)發(fā)HTML和CSS(支持Emmet)

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

HBuilder集成了Emmet功能,可以通過(guò)CSS選擇器語(yǔ)法來(lái)快速開(kāi)發(fā)HTML和CSS,如想深入了解Emmet請(qǐng)移步http://www.emmet.io/

強(qiáng)大的JS解析引擎大大加快JS開(kāi)發(fā)的速度

JS中提示HTML、CSS

JS提示html的ID

JS提示html的tagname

JS提示css類名

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

JS中提示JSON

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

JS提示對(duì)象引用及其屬性、方法

JS提示閉包對(duì)象

跳轉(zhuǎn)到class、id、js方法定義處

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

跳轉(zhuǎn)到JS方法定義處 如下圖

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

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

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

更多挖寶

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

• HTML5 支持、手機(jī)真機(jī)連調(diào)、云編譯，方便開(kāi)發(fā)跨手機(jī)平臺(tái)的APP。

• 更多精彩功能：重構(gòu) | 大綱 | 任務(wù) | 版本歷史 | 內(nèi)置webserver | 實(shí)時(shí)升級(jí) | 安全工程管理 | 包圍 | 掩碼轉(zhuǎn)換 | 智能糾錯(cuò) | 折疊代碼 | 轉(zhuǎn)到定義 | 格式化代碼 | URL編解碼 | 進(jìn)制轉(zhuǎn)換 | 自動(dòng)閉合。

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

HBuilder

入門

• 設(shè)計(jì)理念及常用功能

• Hello HBuilder

進(jìn)階

• Emmet語(yǔ)法支持

• less、sass的支持和預(yù)編譯器

• HTML模板組使用指南

• 自定義語(yǔ)法提示&代碼塊

• JSDoc 規(guī)范

• 中文輸入法免干擾

• 分窗體、并列編輯器

• 真機(jī)運(yùn)行常見(jiàn)問(wèn)題

• 外部工具使用指南

• SVN、GIT等綁定操作快捷鍵

• 插件安裝

5 APP

入門

• 5 App概述

• 創(chuàng)建HelloWorld

• 調(diào)試打包

• mui開(kāi)發(fā)注意事項(xiàng)

進(jìn)階

• 窗口管理

• 下拉刷新

• 上拉加載

• 列表到詳情最佳實(shí)踐

• 應(yīng)用升級(jí)

• 推送服務(wù)

• 地圖定位

• 登錄授權(quán)（微信、微博）

• 快捷支付（微信、支付寶）

• 社交分享

• App優(yōu)化技巧

• 沉浸式狀態(tài)欄

• 代碼混淆加密

• 5 SDK 集成

• 5 SDK 插件開(kāi)發(fā)

• Native.js調(diào)用原生API

• 蘋果打包證書(shū)申請(qǐng)指南

• 通過(guò)UrlSchemes與第三方應(yīng)用相互調(diào)用

• 培訓(xùn)資源視頻教程匯總

wap2app

入門

• wap2app概述

• sitemap.json概述

• matchUrls配置

• webviewParameter配置

• webviewParameter之titleNView配置

• easyConfig配置

• M站改造-去除元素

• app.js

進(jìn)階

• NView模板概述

• NView模板-布局

• NView模板-標(biāo)簽

• NView模板-樣式

• NView模板-事件

• NView模板-數(shù)據(jù)綁定

• M站改造-原生定位

• M站改造-原生分享

• 選項(xiàng)卡切換優(yōu)化

流應(yīng)用

入門

• 流應(yīng)用介紹

• 視頻體驗(yàn)及入口說(shuō)明

• 流應(yīng)用開(kāi)發(fā)指南

• 微信小程序轉(zhuǎn)流應(yīng)用指南

進(jìn)階

• 流應(yīng)用更新方式說(shuō)明

• 制作快碼

• H5游戲改造流應(yīng)用指南

• 如何在應(yīng)用A中給流應(yīng)用B導(dǎo)流

• 流應(yīng)用SDK集成

• gostream.js，wap站流量轉(zhuǎn)為app流量

感興趣的程序員可以到該網(wǎng)站具體看下：dcloud.io