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选择器，高效的动画播放，强大的包扩展机制，支持类的继承等。