html5框架介绍

HTML5移动开发框架： 1、Ionic

Ionic 是目前最有潜力的一款HTML5手机应用开发框架，可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。Ionic 主要关注外观和体验，以及和你的应用程序的 UI交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

Ionic主要特点：

1.Ionic为性能而生-追求性能 运行速度快 2.轻量级框架

3.Ionic完美的融合下一代移动框架 AngularJS 基于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护

4.漂亮的设计让你立马爱上它，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

5.Ionic让你看不出混合应用和原生的区别-专注原生 6.强大的命令行工具 7.基于angular语法简单易学

Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验

Ionic并不是一个可以完全替代PhoneGap的方案，也不是一个真正的JavaScrip框架，它的重点是在于UI交互设计。这个框架附带了SASS，并且可选各种AngularJS扩展，有许多部件可以调用，如按钮、切换、页眉页脚、标签栏等等。并且最令人印象深刻的是，Ionic团队制作了一套很棒的教程和示例。

2、PhoneGap

PhoneGap是一款开源的免费移动应用开发框架，能够让开发者使用HTML、JavaScript、CSS等Web技术来开发跨平台移动App，支持iOS、Android、BlackBerry、webOS、Windows Phone、Symbian以及bada系统平台。它使开发者能够利用iPhone，Android，Palm，WP8和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用PhoneGap运行速度 1. Android环境：

a) 512M内存手机可以放弃PhoneGap

b) 1G 双核手机 运行流畅 感觉速度稍微比原生慢 c) 2G 4核+ 手机运行流畅 看不出和原生差别

d) 部分手机兼容可能会出现问题 需要调整css（原生开发也会有次问题） 2. iOS环境：

a) iphone4+运行流畅

b) iphone5+ 看不出和原生差别

在使用PhoneGap之前，你可能需要一个AdobeID，或者使用Github账号注册。登陆之后建立一个新的应用程序，选择刚才在Github上建立的repo，一旦添加好这些，就可以选择Build App了。把刚刚编译好的APK包，装在Android手机上，界面都可以点击，但也许你发现它还不能对数据库进行读写。前端的皮我们已经画好，下面我们需要强大的后端服务支持。

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中 如Gmail、Maps、Calender 等。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。

phonegap 框架详解：http://www.cnblogs.com/hubcarl/p/4216844.html

3、Intel App Framework

Intel App Framework http://app-framework-software.intel.com/ 由 jQMobi 框架的改造版本 \。这个新的 HTML5 开发环境可完全免费下载，侧重于构建 iOS、Android 和 Windows Phone 8 的移动应用。App Framework 是专门为移动设备而设计，支持最新的 CSS3 和 HTML5 特性，通过使用浏览器内建的特性，我们可比竞争者提供更快的运行速度和更轻量级的应用。

App Framework 使用 CSS3 动画、W3C 选择器和 iOS 内建滚动来达到其他框架无法匹配的性能。

4、Framework7

http://framework7.taobao.org/

Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。

Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。

Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。

Framework7 是一个针对iOS7的框架。从一开始，她就考虑到如何最方便快捷地实现iOS7上各种惊艳的UI组件，以及复杂的动画和灵活的触摸交互。想用Framework7开发Android应用，可以试试基于F7开发的，轻量且兼容所有主流安卓设备的 MSUI。MSUI 是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。

5、OnSenUI

http://onsenui.io/

OnSen UI是一个前端开发框架，适合PhoneGap/Cordova混合应用的开发。它注重差劲可用的移动应用。而且，可与Monaca一起使用，可以很简单地开发后端特性和添加设备支持。OnSen UI自身使用Angular.js和Topcoat开发，由于其架构特性，可以便捷的使用Angular.js的特性。 资料比较少

6、MUI

http://dcloudio.github.io/mui/components/

和Hbuilder是同一家公司的产品，mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验。它以ios7 UI为主体，补充android特有UI样式。

开发工具IDE:

一、DreamWeaver。

利用DreamWeaver可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

二、webStorm。

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。 优势：

智能的代码补全。支持不同浏览器的提示，还包括所有用户自定义的函数(项目中) 代码补全。包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

代码格式化。代码不仅可以格式化，而且所有规则都可以自己来定义

html提示。大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示。

联想查询。只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义；可以全代码导航和用法查询项目查找函数或者变量，还可以查找使用并高亮。

代码重构。这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。

代码检查和快速修复。可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。

代码调试。支持代码调试，界面和IDEA相似，非常方便。 代码结构浏览。可以快速浏览和定位 代码折叠。功能虽小，不过胜在方便高效

包裹或者去掉外围代码。自动提示包裹或者去掉外围代码，一键搞定

三、Intel XDK。

Intel XDK 是Inter开发的一款跨平台开发工具，支持Android、iOS、wp8、Blackberry，开发者可以很容易的通过Intel XDK开发应用，你需要做的只是下载他们的应用开发工具 ，有Linux、Windows和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat。

XDK IDE包含了从创建到发布几乎所有实用的开发工具，开发、仿真、测试、调试、分析和构建都包括在内。除了这些它还包含了一些第三方的服务，而且所有的功能都被组织在7个选项卡里，非常易用。

其中开发选项卡是最需要了解的地方，开发过程中大部分时间会花在这里。使用者可以通过拖拉来设计界面，也可以通过纯编码方式，编码方式是基于Bracket editor这个HTML5构建的开源的编辑器，Bracket是由Adobe开发的。可拖拉的设计原型可以选择App Designer或者App Starter。App Starter是为初学者提供的一个简单的工具，它只支持 App Framework。App Designer则是一个更全面的工具，它支持App Framework,Bootstrap 3, JQuery Mobile 和 TopCoat。

测试是XDK工具中的一个很重要的功能。一方面，XDK内置了HTML5应用模拟器来提供模拟设备的能力，如重力感应、地理位置、网络状态等等，并且可以对应用界面进行快速预览。另一方面则是在真实设备上的测试和调试，目前XDK已经为Android设备提供了一系列完整的测试和调试功能，包括多设备实时预览及编辑（Preview on Devices）、远程调试（Remote Debugging）、性能分析（Profiling）等等。

在编码阶段，开发者可以使用多设备实时预览功能，实时地将代码变化体现在真实设备上，例如HTML的结构变化和CSS样式改动都会立竿见影地得到预览，对JavaScript的修改也可以直接在真实设备上生效，甚至对于资源文件的变动，包括添加、删除、覆盖等都能实时呈现在设备上。其次，在调试阶段，通过远程调试、性能分析功能，开发者可以更深入的发现代码缺陷及性能问题。

国产：

四、Hbuilder。

和MUI是同一家公司的产品。特点：强大的语法提示，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率；最快的开发工具，代码输入法的创新、代码块的优化、emmet的集成、快捷键语法设计、无鼠标操作等；App开发及部署，Run in device真机调试、打包发行，以及云打包还能使得没有mac电脑的程序员可以开发iOS应用。

五、APICloud。

APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。基于APICloud提供的“云API”和“端API”，开发者甚至可以忘记繁杂的服务端编码，也可以忘记复杂的ObjectC和Java，更可以忘记那数不清的屏幕适配。

本文来源：https://www.bwwdw.com/article/4qbp.html