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
滑動觸發操作選單
在手機應用程式中(特別是
iOS平台),許多操作選單都是滑動觸發的,例如簡訊介面,左滑顯示「刪除」按鈕,點選可以刪除該簡訊對話;郵件清單介面,左滑可以刪除,右滑可以標註為」已讀/未讀」狀態;
mui的清單控制項也支持滑動觸發操作選單功能,僅需依照特定格式拼裝
DOM結構即可;另外,滑動也支援事件觸發,開發者可透過監聽滑動事件(
slideleft/slideright
推薦學習:Html5影片教學
####以上是html5 app開發框架有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!