首頁 > web前端 > H5教程 > 主體

html5 app開發框架有哪些

奋力向前
發布: 2023-01-07 11:47:26
原創
5333 人瀏覽過

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

html5 app開發框架有哪些

本教學操作環境: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框架

html5 app開發框架有哪些

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

2.bootstrap框架

html5 app開發框架有哪些

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

3.ionic框架

html5 app開發框架有哪些

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

4.Mobile Angular UI框架

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

Mobile Angular UI的關鍵字有:

1. Bootstrap 3

2. AngularJS

Bootstrap 3 Mobile元件,例如switches, overlayssidebars,這些都是bootstrap中沒有的。

AngularJS modules,例如angular-route, angular-touchangular-animate

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

5.Intel XDK框架

html5 app開發框架有哪些

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

6.Appcelerator Titanium框架

#

html5 app開發框架有哪些

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

主要提供的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框架

html5 app開發框架有哪些

Sencha Touch框架是世界上第一個基於HTML5Mobile App框架。 Sencha Touch可以讓你的Web App看起來像Native App。美麗的使用者介面元件和豐富的資料管理,全部基於最新的HTML5CSS3WEB標準,全面相容AndroidApple iOS裝置。提供了豐富的WEB UI元件,可以快速的開發出運行於行動終端的應用程式。

8.Kendo UI框架

html5 app開發框架有哪些

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

9.PhoneGap框架

html5 app開發框架有哪些

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

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

10.mui框架

html5 app開發框架有哪些

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

輕量

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

MUI不依賴任何第三方JS庫,壓縮後的JSCSS檔案只有100 K60 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!