html5开发常用框架

大多数的 web 开发者一直在用关键点来寻找动态的框架，这样能简化设计和开发工作。

HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能。不仅简化了 HTML5 开发中 CSS 开发的沉重负担，还提高了网站的可见性。主要的原因是 HTML5 提供了独有的特征，例如特殊的架构标签，动画，浏览器支持等。

Ionic                                                                                                                

Ionic 是一个神奇的框架和强大前端开源系统，使用先进的 web 技术比如 CSS、HTML 和 JS 来创建令人惊叹的手机应用。已经定制了在所有手机设备上的快速 *** 作，并且确保简单的功能和大量的手机组件。

您可以通过一个命令创建来测试和使用基于任何平台上的 ionic 应用。此外，该框架为它自己的组件提供了一套 Angular 指令（自定义的 HTML 元素），从而使它可以简单的编写一行 HTML 代码。类似指令，它使用视图动画逻辑，异步通信，Angular 的触摸识别和 HTML 清洁处理。

Siimpler

Siimpler 是一个简单的 HTML 开发框架，可以通过选择自己喜欢的部分，来帮助快速又简单的创建 HTML5 开发结构。根据项目需求，可运用 Siimpler 开发你自己熟悉的前端结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 web 项目。

Foundation

Foundation 是世界上最精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口，并且获得了许多的原件来帮助你快速又完美的建立一个响应站点。Foundation 设置了许多关键的特性，例如 HTML，CSS UI 原件，模板，小代码块，含有按钮，表单，字体，导航等功能的响应组件。

LimeJS

针对于所有的最新的桌面浏览器和触屏设备，LimeJS 对于有用户经验的游戏开发者而言是最好的和最强大的开发框架。LimeJS 对于在线游戏开发而言能够带来更好的功能和更快的开发过程，而且适合所有的浏览器和触屏设备。

Enyo

Enyo 是一个开源的 JavaScript 框架，该框架能够让你创建顶级的 HTML5 应用程序，该应用程序能够运行在各种各样的电子设备上，比如说手机，台式机，笔记本，电视，以及 web 应用。对于很多流行的手机公司开发的重要应用都是采用该框架实现的。

最后：这是对于一个 HTML 开发公司的独特的功能， *** 作，需求，以及 HTML5 框架的最好的表现。

1、Siimpler

Siimpler 是个简单的 HTML 开发框架，他可以通过选择你自己喜欢的部分，来帮助你迅速又简单地创建 HTML5 开发结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 Web 项目。

2、Ionic

Ionic 是个神奇的框架和强大前端开源系统，使用先进的Web技术，比如CSS、HTML 和 JS 来创建令人惊叹的手机应用。

3、Foundation

Foundation 是世界上精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口，设置了许多关键特性。

4、Enyo

Enyo是一个开源的 Jaa 框架，该框架能够让你创建顶级的 HTML5 应用程序，该应用程序能够运行在各种各样的电子设备上，比如说手机、台式机、笔记本、电视以及Web应用。

5、LimeJS

针对于所有的新的桌面浏览器和触屏设备，LimeJS 对于有用户经验的游戏开发者而言是教好的和较强大的开发框架。

6、Bootstrap

Bootstrap能让所有开发者都能迅速上手、所有设备都可以适配、所有项目都适用。此外，bootstrap的官网也有很多教程提供。

7、juery UI

juery UI 主要分为交互、微件和效果库3个部分，主打代码开源， *** 作继承了juery 的简单特性，兼容各主流桌面浏览器。

前端HTML5是当下很多企业都会用到的软件开发，HTML5是移动互联网前端的主流开发语言，目前还没有任何一种前端开发技术能够取代HTML5。因此，无论是PC端还是APP端的应用，前端样式都离不开HTML5

以上就是小编今天的分享，希望对大家有所帮助，想要了解更多相关内容，欢迎关注我们!

主要使用：

 移动端：ionic、cordova

 后端：CoreThink

一、安装

1安装nodejs

2安装git

3安装ionic & cordova：

命令行输入：npminstall –g cordova ionic

注：-g表示全局安装，也可以进入指定的目录安装，但这里推荐全局安装，安装后的目录为C:/users/Administrator/AppData/Roaming/npm/node_modules

4安装Java JDK

5安装Apache Ant

6安装Android SDK（从这里开始后面基本以android为例，ios类似）

7设置环境变量：

①打开计算机->系统属性->高级系统设置->环境变量

②在系统变量中新建ANDROID_HOME变量，变量值为sdk所在目录，如图

③新建CLASSPATH变量，变量值为;%JAVA_HOME%\lib\dtjar;%JAVA_HOME%\lib\toolsjar;

④新建JAVA_HOME变量，变量值为jdk所在目录

⑤编辑系统变量中的path变量，不要删原来的变量值，在原值后面添加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\build-tools;%ANDROID_HOME%\platform-tools

注：这里是添加了jdk\bin、jdk\jre\bin、sdk\tools、sdk\build-tools、sdk\platform-tools的路径，互相以英文分号隔开

8创建项目：

命令行cd进入任何你喜欢的目录，ionic startAnyNameYouLikeblank，如果一切顺利，就会在你指定的目录新建一个你喜欢的名字的文件夹，并在里面初始化一个ionic项目。

9添加平台

进入刚才新建的项目的目录，命令行输入ionic platform add android

二、在项目目录中有一个> 手机浏览测试法： >

常用的移动APP开发框架:

框架：PhoneGap

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。

优点：

可跨平台。phonegap框架帮我们解决了差异性，javascript与平台系统的连接由phonegap框架完成。

提供硬件访问控制。可调用加速计、摄像头、罗盘、通讯录、文档、地理定位、媒体、网络、通知。

可利用成熟javascript框架。如：Ext js、jQuery。

缺点：

性能差。运行速度慢，UI反应延时。

不能完全跨平台。不同平台代码需要微调。

内存消耗，调试难度大。

框架：Ionic

Ionic 是一个强大的 HTML5 应用程序开发框架， Ionic 主要关注外观和体验，以及应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。

优点：

轻量级框架，运行速度快。

于 Angularjs，支持 Angularjs的特性， MVC ，代码易维护。

通过 SASS 构建应用程序，接近原生。

缺点：

Ionic是一个前段框架。不能完全取代PhoneGap和JavaScript框架的作用。

需要结合插件使用。

框架：Hbuilder（国产）

HBuilder是DCloud（数字天堂）推出一款支持HTML5的Web开发IDE。“快，是HBuilder的最大优势。

优点：

跨平台：同时支持iOS、Android、Symbian、Windows Phone。

开发工具：基于Eclipse的开发工具，集成UI控件与应用管理。

本地打包：无需配置环境，无需编译，本地一键打包。

代码加密：基于密钥的加密方式，无法破解，像混编一样保护html代码。

技术支持：技术支持及时响应，重视开发者建议和反馈。

缺点：

AppCan免费版因需要把源代码上传到厂商的服务器上打包，对于企业开发来说源代码泄露安全性上有一定风险。企业版虽然可以解决，但企业版稳定尚待观察。

AppCan采用封装的组件，依赖性比较高。不是开源代码。

ppCan 不能很好的解决原生代码的功能。

Wex5(国产)

WeX5应用快速开发框架（含完整的SDK API及全部源码），一次开发、跨端运行。

优点：

高效精致的UI组件体系，基于jquery和bootstrap技术，采用增强的RequireJS模块化技术。

基于phonegap(cordova)框架，如相机、地图、LBS定位、指南针、通讯录、文件、语音、电池等。

可视化拖拽式集成开发环境IDE，全能力的调试支持和智能代码提示。

缺点：

使用范围有限：适用：一般app、电商app、客服app、会员app、微店微商等。

用户量小，存在不稳定因素。

总结：

跨平台方面：大部分框架针对android和ios平台，需要做或多或少的代码调整，不能达到完全跨平台。

性能方面：根据不完全统计，Ionic的性能会更好一点。

PhoneGap出现最早，国内框架都是基于Phonegap开发出来的。

注意：

各框架在实现过程中都会遇到不同程度的坑，请根据框架的侧重点谨慎选择应用的框架。如果要基于Html5开发App，还需要进一步根据需求验证框架的可实施性、并进行不同框架的效果对比。

一ionic中路由管理介绍：

在单页应用中，路由的管理是很重要的环节。ionicjs没有使用AngularJS内置的ng-route路由，而是选择了AngularUI项目的ui-router模块。

ui-router的核心理念是将子视图集合抽象为一个状态机，导航意味着状态的切换。在不同的状态下，ionicjs渲染对应的子视图(动态加载的HTML片段)就实现了路由导航的功能。

二ionic中内联模板介绍

HTML中常用的script标签在AngularJS中被重新定义了：除了原本的脚本声明功能之外，如果script元素的type属性定义为text/ng-template,则被称为内联模板。

内联模板在单页应用(SAP)开发中非常有用。SAP应用通常需要通过AJAX从后台载入众多的HTML片段。这些HTML片段都用文件存放的话，看起来会非常杂乱。使用内联模块，就可以把这些零散的HTML片段模板都集中在一个文件里，维护和开发的感觉都会好很多。

AngularJS在编译时会将内联模板的id属性值和其内容，分别作为key和value，存入$templateCache管理的hash表中。

内联模板的使用，常见的有几种情况：

使用ng-include指令

可以利用ng-include指令在HTML中直接使用内联模板，例如：

<div ng-include="'ahtml'"></div>

注意：其中ahtml是一个字符串常量，需要使用单引号包裹起来。

使用$templateCache服务

也可以直接使用$templateCache服务的方法get()从模板缓存中读出其内容：

var partial=$templateCacheget("ahtml")

Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。ionic的理念类似前端开发的BootStrap，目标是封装HTML5移动跨平台开发的最佳实践，就像Twitter Bootstrap在前端开发中做的一样。Ionic框架目前发展很迅速，我们从2014年3月开始使用，当时是100beta2，现在已经更新到100beta10，大概每2个星期会出一个beta版本，并且都包含实质性更新。Ionic框架很先进，js部分是基于AngularJS框架，大量使用了Css3，css生成基于Sass，构建工具基于最新的gulp，版本升级基于bower，原生层无缝封装了cordova。

The beautiful, open source front-end framework for developing hybrid mobile apps with HTML5。

以上就是关于html5开发常用框架全部的内容，包括:html5开发常用框架、HTML5开发常见的7个框架，不可不知！、非原生App开发的基本步骤（以安卓端为例）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！