html5移動應用框架

手機上mobile app，UI 框架能夠分爲兩種，一種就是跑在普通手機瀏覽器上的網站，仍是須要走網絡；另外一種是與 PhoneGap/Appcelerator/Titanium 這些橋接器配合作成真正的手機應用。

Ratchet——專門針對移動設備優化的css框架，bootstrap的一員，提供了一些常見控件的調用，好比按鈕、iphone上的segmented control,開關鍵，列表視圖。

Ionic——一個完善的hybrid app開發方案，配合angular js使用，功能強大。

Onsen UI——和Ionic很相似，也是最好配合Angular JS使用，官方寫了幾個不錯的patterns，能夠拿來就用。

Framework7——Full feature for html framework for building ios apps；示例也能夠在各大平臺上直接運行。

1.框架phonegap

phonegap是一個基於html5/javascript/css的，建立移動跨平臺移動應用程序的快速開發平臺。它使開發者可使用Android，Palm,Symbian,WP7,WP8,Bada和Blackberry智能手機的核心功能——地理定位，加速器，照相機，聯繫人，聲音，震動等。

此外PhoneGap擁有豐富的插件，能夠調用。 

優勢：1.可跨平臺。phonegap框架幫咱們解決了差別性，javascript與平臺系統的鏈接由phonegap框架完成。成爲鏈接移動終端的適配器，或者說中間件。 
2.提供硬件訪問控制。可調用加速計、攝像頭、羅盤、通信錄、文檔、地理定位、媒體、網絡、通知(警告、聲音和振動)、存儲。 
3.可利用成熟JavaScript框架。如：Ext js、jQuery。 
缺點：1.性能差。運行速度慢，UI反應延時——這是個致命傷。(高端機影響不大) 
2.不能徹底跨平臺。不一樣平臺代碼須要微調。 
3.內存消耗大。 
4.調試難度大。

 

2.框架：Ionic 
官網：http://ionicframework.com/ 
簡介： Ionic 是一個強大的 html5 應用程序開發框架，號稱 Advanced Html5 Hybrid Mobile AppFramework 是 AngularJS 移動端解決方案 能夠幫助您使用 Web 技術，好比 HTML、 CSS 和Javascript 構建接近原生體驗的移動應用程序。 Ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。 Ionic 是一個輕量的手機 UI 庫，具備速度快，界面現代化、美觀等特色。爲了解決其餘一些UI 庫在手機上運行緩慢的問題。 
優勢：1.追求性能 運行速度快 
2.輕量級框架 
3.基於 angularjs，支持 Angularjs的特性， MVC ，代碼易維護 
4.經過 SASS 構建應用程序。它提供了不少 UI 組件來幫助開發者開發強大的應用。 
5.接近原生。 
6.強大的命令行工具 
3.可利用成熟javascript框架。如：Ext js、jquery。 
缺點：1.Ionic是一個前段框架。不能徹底取代PhoneGap和JavaScript框架的做用 
2.須要結合插件使用。

 

3.框架：appcan（國產） 
官網：http://www.appcan.cn/ 
簡介：AppCan是國內Hybrid App混合模式開發的倡導者，AppCan應用引擎支持Hybrid App的開發和運行。而且着重解決了基於HTML5的移動應用」不流暢」和」體驗差」的問題。使用AppCan應用引擎提供的Native交互能力，可讓HTML5開發的移動應用基本接近Native App的體驗。 
與Phonegap支持單一webview使用div爲單位開發移動應用不一樣。AppCan支持多窗口機制，讓開發者能夠像最傳統的網頁開發同樣，經過頁面連接的方式靈活的開發移動應用。基於這種機制，開發者能夠開發出大型的移動應用，而不是隻能開發簡易類型的移動應用。 
AppCan提供強大的設備調用能力，電話、短信、相機、LBS、傳感器、數據庫等經常使用的手機功能，開發者能夠經過JS接口調用，輕鬆構建移動應用。 
優勢：1.跨平臺：同時支持iOS、android、Symbian、Windows Phone 
2.原生體驗：引入原生UI控件與交互支持（如Action Sheet等） 
3.開發工具：基於Eclipse的開發工具，集成UI控件與應用管理 
4.UI框架：提供強大的UI框架，更加易於實現頁面佈局與交互 
5.設備API：支持各類手機設備調用，如電話、相機、傳感器、定位等 
6.本地打包：無需配置環境，無需編譯，本地一鍵打包 
7.插件機制：支持第三方原生插件，支持JS插件 
8.代碼加密：基於密鑰的加密方式，沒法破解，像混編同樣保護html代碼 
統計分析：應用分平臺安裝數統計，應用啓動和使用狀況統計 
9.開放平臺：更具本土優點，已經對接Sina、QQ、百度等開放平臺 
10.技術支持：技術支持及時響應，重視開發者建議和反饋 
缺點：1.AppCan免費版因須要把源代碼上傳到廠商的服務器上打包，對於企業開發來講源代碼泄露安全性上有必定風險。企業版雖然能夠解決，但企業版穩定尚待觀察。 
2.AppCan採用封裝的組件，依賴性比較高。不是開源代碼。 
3.AppCan 不能很好的解決原生代碼的功能

 

4.框架：ApiCloud(國產) 
官網：http://www.apicloud.com/ 
簡介：APICloud是中國領先的「雲端一體」的移動應用雲服務提供商。APICloud推行「雲端一體」的理念，從新定義了移動應用開發。APICloud爲開發者從「雲」和「端」兩個方向提供API，簡化移動應用開發技術，讓移動應用的開發週期從一個月縮短到7天。APICloud由「雲API」和「端API」兩部分組成，能夠幫助開發者快速實現移動應用的開發、測試、發佈、管理和運營的全生命週期管理。 
APICloud致力成爲中國領先的移動垂直領域雲服務商，幫助傳統軟件公司從B/S架構成功走向APP，幫助中國數百萬web開發者轉化成移動APP專家！。 
優勢：1.提供開發的IDE。 
2.提供數據雲API、統計雲API、推送雲API 
缺點：與Hbuilder存在版權問題，抄襲Hbuilder

五、JQuery Mobile 
1.官方網站：http://jquerymobile.com/ 
2.性質：UI框架 
3.說明：這個大名鼎鼎的JQuery的移動版本。跟JQuery同樣是一個輕量級的JS庫，同樣使用HTML5+CSS+JS的技術。應爲輕量級，因此在web加載時比Sencha有一點優點。缺點顯而易見，UI控件太少了。由於JQuery Mobile 太普及了，也有不少第三方的擴展控件庫例如JQuery Mobile Touch。比較有意思的是Sencha Touch 也融合了JQuery Mobile Touch。 
4.受權：徹底開源，放心使用

 

還有幾個國內比較火的前端框架，基本是國內大公司推出的：

1.JX(騰訊)

JX 是一個相似 Google Closure Library 的 Web 前端開發框架，服役於 WebQQ 等大規模的 WebApp。

JX 是模塊化的非侵入式Web前端框架，開發於2008年，並於2009年開源於GoogleCode ，於2012年切換到Github。 JX 框架同時適用於 Web Page 和 Web App 項目的開發，特別適合構建和組織大規模、工業級的Web App，騰訊 WebQQ、騰訊Q+等產品都是採用JX框架開發，兼容目前全部主流瀏覽器。

2.KISSY(騰訊)

KISSY是淘寶的前端類庫，幾乎在淘寶的每一個頁面上都能看到它的身影。

KISSY提供穩定的核心，包括 oo、dom、Event、Anim、Ajax 等；強大且易用的腳本加載器，特有的 loader；豐富的UI組件，包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具有模塊化、高擴展性、組件齊全等特性。

3.Qwrap（百度）

QWrap是百度有啊前端團隊推出的一個Javascript框架，支持IE6+、Firefox、Chrome、Safari、Opera等瀏覽器，在BSD協議下開源發佈。

QWrap的特色以下：

1. 提供jQuery同樣方便的dom功能，同時又打破jQuery「專一於dom」的約束，也提供非dom的許多功能。

2. 提供prototype方便的原型功能，同時又提供Javascript1.6的泛型功能，而且提供用戶有選擇方便與嚴謹的自由。

3. 提供YUI2同樣的靜態方法庫，同時又用所謂的Helper規範來作到真正的絕對靜態，讓組件開發者能夠發佈出無依賴的組件。

4. 學習YUI3的use，同時又擯棄YUI3的嚴謹性潔癖，讓use更實用。

5. QWrap首創特的Helper + Wrap + Retouch + Apps設計，讓QWrap有更多的靈性等待你去發現。

4.Tangram(百度)

Tangram是一款實用的JavaScript基礎庫，經過它能夠快速構建出高度互動的Web應用程序。Tangram具備全瀏覽器兼容，平滑升級體驗以及自由定製輸出最小尺寸的特色。

5.Como(康尚實驗室)

Como由上海康尚實驗室開發，是一款簡易而功能強大的JS框架，對String等原生對象進行了擴展，支持經常使用的CSS選擇器，高效的動畫播放，強大的包擴展機制，支持類的繼承等。