html5 app開發(fā)框架有：1、jquery mobile；2、bootstrap；3、ionic；4、Mobile Angular UI；5、Intel XDK；6、Appcelerator Titanium；7、PhoneGap等等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

HTML5移動(dòng)開發(fā)的10大移動(dòng)APP開發(fā)框架

• jquery mobile框架

• bootstrap框架

• ionic框架

• Mobile Angular UI框架

• Intel XDK框架

• Appcelerator Titanium框架

• Sencha Touch框架

• Kendo UI框架

• PhoneGap框架

• mui框架

1.jquery mobile框架

jQuery Mobile是jQuery在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。

2.bootstrap框架

Bootstrap是基于HTML、CSS、JAVASCRIPT的，它簡(jiǎn)潔靈活，使得Web開發(fā)更加快捷。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC(微軟全國(guó)廣播公司)的Breaking News都使用了該項(xiàng)目。 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來(lái)。

3.ionic框架

Ionic是一個(gè)強(qiáng)大的HTML5應(yīng)用程序開發(fā)框架，可以幫助您使用Web技術(shù)，比如HTML、CSS和Javascript構(gòu)建接近原生體驗(yàn)的移動(dòng)應(yīng)用程序。Ionic主要關(guān)注外觀和體驗(yàn)，以及和你的應(yīng)用程序的UI交互，特別適合用于基于Hybird模式的HTML5移動(dòng)應(yīng)用程序開發(fā)。

4.Mobile Angular UI框架

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應(yīng)式移動(dòng)開發(fā)HTML5框架。

Mobile Angular UI的關(guān)鍵字有：

1. Bootstrap 3

2. AngularJS

Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。

AngularJS modules，比如angular-route, angular-touch和angular-animate

響應(yīng)式媒體查詢是將bootstrap作為單獨(dú)的文件，你只需要包含你所需要的東西。Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過(guò)一些AngularJS指令創(chuàng)建友好的用戶體驗(yàn)。

5.Intel XDK框架

Intel發(fā)布了其首個(gè)版本基于web的編程工具，可幫助開發(fā)者為Android和iOS開發(fā)移動(dòng)應(yīng)用。這款免費(fèi)的軟件名為Intel XDK，實(shí)際上這是今年2月份Intel收購(gòu)的AppMobi軟件的重新包裝后的版本，所以并非新鮮事物。開發(fā)者可用此軟件開發(fā)基于HTML5的應(yīng)用，并用于移動(dòng)設(shè)備中。

6.Appcelerator Titanium框架

Titanium是一個(gè)跟手機(jī)平臺(tái)無(wú)關(guān)的開發(fā)框架，用來(lái)開發(fā)具有本地應(yīng)用效果的Web應(yīng)用。當(dāng)前主要支持iPhone和Android手機(jī)。

主要提供的API包括：

• 2D/3D animations

• Geo-location, compass, and maps

• Augmented reality features

• Social app authentication and native client support for email

• SOAP or REST API calls

• Audio, video, and image capture and playback

• Taps into local filesystem and SQL lite databases

• Accesses photo gallery or address data

7.Sencha Touch框架

Sencha Touch框架是世界上第一個(gè)基于HTML5的Mobile App框架。Sencha Touch可以讓你的Web App看起來(lái)像Native App。美麗的用戶界面組件和豐富的數(shù)據(jù)管理，全部基于最新的HTML5和CSS3的WEB標(biāo)準(zhǔn)，全面兼容Android和Apple iOS設(shè)備。提供了豐富的WEB UI組件，可以快速的開發(fā)出運(yùn)行于移動(dòng)終端的應(yīng)用程序。

8.Kendo UI框架

Kendo UI的每個(gè)方面都從底層開始構(gòu)建，以提供強(qiáng)大的JavaScript應(yīng)用程序性能。Kendo UI不是另一個(gè)jQuery UI的克隆，它的每一個(gè)決定都是從優(yōu)化性能出發(fā)。從輕量級(jí)的、執(zhí)行明顯快于jQurey模板的內(nèi)置模板庫(kù)，到利用CSS3硬件加速的(如果可能)優(yōu)化動(dòng)畫 和先進(jìn)的虛擬化用戶界面，Kendo UI不遺余力地提供高性能的客戶端UI。

9.PhoneGap框架

說(shuō)到跨平臺(tái)開發(fā)工具，很多人首先會(huì)想到PhoneGap。這樣一款能夠讓開發(fā)者使用HTML、JS、CSS來(lái)開發(fā)跨平臺(tái)移動(dòng)App的開源免費(fèi)框架，一直以來(lái)都深受開發(fā)者喜愛，從iOS、Android、BB10、Windows Phone到Amazon Fire OS、Tizen等，各大主流移動(dòng)平臺(tái)一應(yīng)俱全，還能讓開發(fā)者充分利用地理位置、加速器、聯(lián)系人、聲音等手機(jī)核心功能。

業(yè)界很多主流的移動(dòng)開發(fā)框架均源于PhoneGap。較著名的有Worklight、appMobi、WeX5等。其中WeX5為國(guó)內(nèi)打造，完全Apache開源，在融合Phonegap的基礎(chǔ)上，做了深度優(yōu)化，具備接近Native app的性能，同時(shí)開發(fā)便捷性也較好。

10.mui框架

最接近原生APP體驗(yàn)的高性能前端框架，具有以下特點(diǎn)：

輕量

追求性能體驗(yàn)，是我們開始啟動(dòng)MUI項(xiàng)目的首要目標(biāo)，輕量必然是重要特征;

MUI不依賴任何第三方JS庫(kù)，壓縮后的JS和CSS文件僅有100+K和60+K

原生UI

鑒于之前的很多前端框架（特別是響應(yīng)式布局的框架），UI控件看起來(lái)太像網(wǎng)頁(yè)，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標(biāo)

MUI以iOS平臺(tái)UI為基礎(chǔ)，補(bǔ)充部分Android平臺(tái)特有的UI控件

流暢體驗(yàn)

• 拉刷新

為實(shí)現(xiàn)下拉刷新功能，大多H5框架都是通過(guò)div模擬下拉回彈動(dòng)畫，在低端android手機(jī)上，div動(dòng)畫經(jīng)常出現(xiàn)卡頓現(xiàn)象（特別是圖文列表的情況）; mui通過(guò)雙webview解決這個(gè)div的拖動(dòng)流暢度問(wèn)題；拖動(dòng)時(shí)，拖動(dòng)的不是div，而是一個(gè)完整的webview(子webview)，回彈動(dòng)畫使用原生動(dòng)畫。

• 側(cè)滑導(dǎo)航

mui提供了兩種側(cè)滑導(dǎo)航實(shí)現(xiàn)：webview模式和div模式，兩種模式各有優(yōu)劣，適用于不同的場(chǎng)景。每種側(cè)滑實(shí)現(xiàn)模式，有不同的側(cè)滑動(dòng)畫效果，主要分為四類：

動(dòng)畫1：主界面移動(dòng)、菜單不動(dòng)

動(dòng)畫2：主界面不動(dòng)、菜單移動(dòng)

動(dòng)畫3：主界面和菜單同時(shí)移動(dòng)

動(dòng)畫4：縮放式側(cè)滑(類手機(jī)QQ)

• 滑動(dòng)觸發(fā)操作菜單

在手機(jī)應(yīng)用中(特別是iOS平臺(tái))，很多操作菜單都是滑動(dòng)觸發(fā)的，比如短信界面，左滑顯示“刪除”按鈕，點(diǎn)擊可以刪除該短信對(duì)話；郵件列表界面，左滑可以刪除，右滑可以標(biāo)注為”已讀/未讀”狀態(tài)；mui的列表控件也支持滑動(dòng)觸發(fā)操作菜單功能，僅需按照特定格式拼裝DOM結(jié)構(gòu)即可；另外，滑動(dòng)還支持事件觸發(fā)，開發(fā)者可以通過(guò)監(jiān)聽滑動(dòng)事件(slideleft/slideright)，完成操作前的確認(rèn)提醒工作。

推薦學(xué)習(xí)：Html5視頻教程