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 jsjQuery。 
缺点: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.跨平台:同时支持iOSandroid、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

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

原文地址:https://www.cnblogs.com/liangxin/p/7374445.html