在是移動開發的高潮時代，相信很多程序員都花時間去學習android，ios的開發，或者利用其他原生開發框架，今天小編要給大家推薦一個國產的超級神器 Hbuilder，相信這個神 器應該有不少人知道，不知道的也沒有關系，今天知道也不晚。使用Hbuilder 可以一次編碼直接發布為 android,ios,Html5 web 的app,大家也都知道發到蘋果的APP商店中，是需要申請開發者賬號，而且每年要交美金。然而通過Hbuilder我們可以發布為流應用（類似于小程序，其他騰訊的小程序晚于Dcloud的流用），IOS用戶只需要下載一個叫”流應用“的App，即可運行我們自己生成的流應用程序 。流應用是一個內核，一個運行環境引擎。

現在讓我們揭開他的蘆山真面目。

什么是HBuilder？

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

如何安裝 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激活var i=0;dn激活display: none;

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

• 代碼塊激活字符原則3:同一個tag，有多個代碼塊輸出，則在最后加后綴。比如meta輸出但metau則輸出，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請移步http://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定義處 如下圖

跳轉到文件 如下圖

更多挖寶

• 跳轉助手、選擇助手、轉義助手、快捷鍵助手，讓你手不離鍵盤。

• HTML5+支持、手機真機連調、云編譯，方便開發跨手機平臺的APP。

• 更多精彩功能：重構 | 大綱 | 任務 | 版本歷史 | 內置webserver | 實時升級 | 安全工程管理 | 包圍 | 掩碼轉換 | 智能糾錯 | 折疊代碼 | 轉到定義 | 格式化代碼 | URL編解碼 | 進制轉換 | 自動閉合。

• 還不滿足？下載插件增強更多功能，高手更可開發插件，并共享插件造福所有開發者。

HBuilder

入門

• 設計理念及常用功能

• Hello HBuilder

進階

• Emmet語法支持

• less、sass的支持和預編譯器

• HTML模板組使用指南

• 自定義語法提示&代碼塊

• JSDoc+規范

• 中文輸入法免干擾

• 分窗體、并列編輯器

• 真機運行常見問題

• 外部工具使用指南

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

• 插件安裝

5+ APP

入門

• 5+ App概述

• 創建HelloWorld

• 調試打包

• mui開發注意事項

進階

• 窗口管理

• 下拉刷新

• 上拉加載

• 列表到詳情最佳實踐

• 應用升級

• 推送服務

• 地圖定位

• 登錄授權（微信、微博）

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

• 社交分享

• App優化技巧

• 沉浸式狀態欄

• 代碼混淆加密

• 5+SDK 集成

• 5+SDK 插件開發

• Native.js調用原生API

• 蘋果打包證書申請指南

• 通過UrlSchemes與第三方應用相互調用

• 培訓資源視頻教程匯總

wap2app

入門

• wap2app概述

• sitemap.json概述

• matchUrls配置

• webviewParameter配置

• webviewParameter之titleNView配置

• easyConfig配置

• M站改造-去除元素

• app.js

進階

• NView模板概述

• NView模板-布局

• NView模板-標簽

• NView模板-樣式

• NView模板-事件

• NView模板-數據綁定

• M站改造-原生定位

• M站改造-原生分享

• 選項卡切換優化

流應用

入門

• 流應用介紹

• 視頻體驗及入口說明

• 流應用開發指南

• 微信小程序轉流應用指南

進階

• 流應用更新方式說明

• 制作快碼

• H5游戲改造流應用指南

• 如何在應用A中給流應用B導流

• 流應用SDK集成

• gostream.js，wap站流量轉為app流量

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

多同學想自學HTML5移動前端web APP，尤其是有編程基礎，想跨崗或者是把全棧工程師定為今后職業發展目標的程序員，擴展知識面對于他們來說十分重要，并且自學是大多數人的首選。那么應該如何自學才能提高效率，并且是行之有效的方法呢？

小編在網上搜集了一些資料，也向專業老師們討教了一番，總結出了一些實用的方法，包括適合看的書籍、網站推薦等等之類，希望能夠對大家有所幫助。當然，如果看完后你還有更好的學習方法，歡迎留言補充說明。

一、有知乎網友建議說，首先一定要把基礎打牢，知識最重要的，基本功練好了，今后更有深度的學習不成問題。首先是HTML + CSS，這部分建議在線教程上學習，邊學邊練。 一段時間的積累后就能模仿其他網站做些頁面。有了這些實戰經驗之后，可以系統的讀一兩本書，推薦《Head First HTML 與 CSS 中文版》，這本書講的太細了，我沒能拿出耐心細讀。你可以根據情況斟酌。

二、再來就是Javascript ，這一塊要學的內容確實很多，要是沒有其他編程語言的基礎的話，學起來估計要費些力，但是可以先去一些視頻網站找一些視頻看看，學習一下。之后再建議看看《Javascript語言精粹》，JS是一門很混亂的語言，這本書能夠幫助你區分哪些是語言的精華，哪些是糟粕，對于語言精華，應該深入學習。對于寫得太爛的代碼要學會鑒別，該舍棄的就果斷舍棄吧。

三、還有網友推薦這本書籍《html5觸摸界面開發與設計》，但這只是一本工具書。如果你想跳過這些東西的話就直接玩webapp吧。另外還建議直接看jquery moble，不說性能與定制，但可以很快搭建一個webapp。

四、另有老師專家直接給出學習思路，一定要熟悉與HTML的關系和區別，熟練掌握CSS3（響應式布局）、繪圖API以及相關JsAPI的使用。

五、還有更接地氣的網友認為，Angular.js 指南、React.js 指南之類的書籍，市面上確實有，但是移動前端webapp是一個比較大的概念，如果再加上HTML5就更大了。討論HTML5移動前端webapp就跟后端狗討論如何開發 WEB 服務端一樣，需要針對不同的技術框架針對性討論。要是想要掌握并且能夠擅長HTML5移動前端webapp的開發，其實還有很多知識點是需要同時掌握的。

以上就是小編為大家總結的網友們對于如何自學HTML5移動前端web APP給出

歡迎關注微信公眾號【中軟卓越北京EEC】