基于H5的移動(dòng)開(kāi)發(fā)框架應用介紹

　　今天給大家介紹10款有關(guān)HTML5移動(dòng)開(kāi)發(fā)APP開(kāi)發(fā)框架，這幾款框架都是比較優(yōu)秀的移動(dòng)Web開(kāi)發(fā)框架，能夠幫助開(kāi)發(fā)者更加高效的開(kāi)發(fā)移動(dòng)Web應用。
 

 

　　一、jquery mobile框架

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

　　二、bootstrap框架

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

　　三、ionic框架

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

 

　　四、Mobile Angular UI框架

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

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

　　1.Bootstrap 3

　　2.AngularJS

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

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

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

　　五、Intel XDK框架

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

　　六、Appcelerator Titanium框架

　　Titanium 是一個(gè)跟手機平臺無(wú)關(guān)的開(kāi)發(fā)框架，用來(lái)開(kāi)發(fā)具有本地應用效果的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 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
 

 

　　七、Sencha Touch框架

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

　　八、Kendo UI框架

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

　　九、PhoneGap框架

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

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

　　十、mui框架

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

　　輕量

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

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

　　原生UI

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

　　MUI以iOS平臺UI為基礎，補充部分Android平臺特有的UI控件

　　流暢體驗

　　•下拉刷新

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

　　•側滑導航

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

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

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

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

　　動(dòng)畫(huà)4：縮放式側滑(類(lèi)手機QQ)

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

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