html5 app開發框架有哪些

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

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

HTML5移動開發的10大移動APP開發框架

• jquery mobile框架

• bootstrap框架

• ionic框架

• Mobile Angular UI框架

• Intel XDK框架

• Appcelerator Titanium框架

• Sencha Touch框架

• Kendo UI框架

• #PhoneGap框架

• mui框架

#1.jquery mobile框架

jQuery Mobile是jQuery在手機上和平板裝置上的版本。 jQuery Mobile不僅會為主流行動平台帶來jQuery核心函式庫，還會發布一個完整且統一的jQuery行動UI框架。支援全球主流的行動平台。

2.bootstrap框架

#Bootstrap是基於HTML 、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發更快速。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。 Bootstrap提供了優雅的HTML和CSS規範，它也就是由動態CSS語言Less寫成。 Bootstrap一推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了這個專案。國內一些行動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap原始碼進行效能最佳化而來。

3.ionic框架

#Ionic是一個強大的HTML5應用程式開發框架，可以幫助您使用Web技術，例如HTML、CSS和Javascript來建立接近原生體驗的行動應用程式。 Ionic主要專注於外觀和體驗，以及和你的應用程式的UI交互，特別適合用於基於Hybird模式的HTML5行動應用程式開發。

4.Mobile Angular UI框架

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應式行動開發HTML5框架。

Mobile Angular UI的關鍵字有：

1. Bootstrap 3

2. AngularJS

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

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

#響應式媒體查詢是將bootstrap作為單獨的文件，你只需要包含你所需要的東西。 Mobile Angular UIu並沒有包含任何jQuery依賴，你需要做的只是透過一些AngularJS指令來創造友善的使用者體驗。

5.Intel XDK框架

Intel#發布了其首個版本基於web的程式設計工具，可協助開發者為Android和iOS開發行動應用程式。這款免費的軟體名為Intel XDK，其實這是今年2月Intel收購的AppMobi軟體的重新包裝後的版本，所以並非新鮮事物。開發者可用此軟體開發基於HTML5的應用，並用於行動裝置中。

6.Appcelerator Titanium框架

#

Titanium是一個跟手機平台無關的開發框架，用來開發具有本地應用效果的Web應用。目前主要支援iPhone和Android手機。

主要提供的API包括：

• 2D/3D animations

• Geo-location, compass, and maps

• Augmented reality features

• Social app authentication and native client support for email

• #SOAP 或 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框架是世界上第一個基於HTML5的Mobile App框架。 Sencha Touch可以讓你的Web App看起來像Native App。美麗的使用者介面元件和豐富的資料管理，全部基於最新的HTML5和CSS3的WEB標準，全面相容Android和Apple iOS裝置。提供了豐富的WEB UI元件，可以快速的開發出運行於行動終端的應用程式。

8.Kendo UI框架

#Kendo UI的每個方面都從底層開始構建，以提供強大的JavaScript應用程式效能。 Kendo UI不是另一個jQuery UI的克隆，它的每一個決定都是從優化效能出發。從輕量級的、執行明顯快於jQurey模板的內建模板庫，到利用CSS3硬體加速的(如果可能)優化動畫和先進的虛擬化用戶界面，Kendo UI不遺餘力地提供高效能的客戶端UI。

9.PhoneGap框架

#說到跨平台開發工具，很多人會先想到PhoneGap。這樣一款能夠讓開發者使用HTML、JS、CSS來開發跨平台行動App的開源免費框架，一直以來都深受開發者喜愛，從iOS、Android、BB10、Windows Phone到Amazon Fire OS、Tizen等，各大主流行動平台一應俱全，還能讓開發者充分利用地理位置、加速器、聯絡人、聲音等手機核心功能。

業界許多主流的行動開發架構皆源自於PhoneGap。較著名的有Worklight、appMobi、WeX5等。其中WeX5為國內打造，完全Apache開源，在融合Phonegap的基礎上，做了深度優化，具備接近Native app的性能，同時開發便利性也較好。

10.mui框架

#最接近原生APP體驗的高效能前端框架，具有以下特點：

輕量

追求效能體驗，是我們開始啟動MUI專案的首要目標，輕量級必然是重要特徵;

MUI不依賴任何第三方JS庫，壓縮後的JS和CSS檔案只有100 K和60 K

#原生UI

鑑於之前的許多前端框架（特別是回應式版面的框架），UI控制項看起來太像網頁，沒有原生感覺，因此追求原生UI感覺也是我們的重要目標

MUI以iOS平台UI為基礎，補充部分Android平台特有的UI控制項

的流暢體驗

• ####################################### #########拉刷新#######

為實現下拉刷新功能，大多H5框架都是透過div模擬下拉回彈動畫，在低階android#手機上，div動畫常出現卡頓現象（特別是圖文列表的情況）; mui透過雙重webview解決這個div的拖曳流暢度問題；拖曳時，拖曳的不是div，而是一個完整的webview(子webview

)，回彈動畫使用原生動畫。

• 側滑導航

#mui提供了兩種側滑導航實作：webview模式和div

模式，兩種模式各有優劣，適用於不同的場景。每種側滑實作模式，有不同的側滑動畫效果，主要分為四類：

動畫1：主介面移動、選單不動

動畫2：主介面不動、選單移動

動畫3：主介面與選單同時移動

動畫4：縮放式側滑(類別手機QQ)

• 滑動觸發操作選單

在手機應用程式中(特別是iOS平台)，許多操作選單都是滑動觸發的，例如簡訊介面，左滑顯示「刪除」按鈕，點選可以刪除該簡訊對話；郵件清單介面，左滑可以刪除，右滑可以標註為」已讀/未讀」狀態；mui的清單控制項也支持滑動觸發操作選單功能，僅需依照特定格式拼裝DOM結構即可；另外，滑動也支援事件觸發，開發者可透過監聽滑動事件(slideleft/slideright

)，完成操作前的確認提醒工作。

推薦學習：Html5影片教學

####

以上是html5 app開發框架有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！