出处：/blogs
在这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识，懂一些CSS和JavaScript就够了。如果你总听别人说HTML5的移动应用太慢，我只能告诉你应该有一些主见，首先HTML5会越来越好，移动端的硬件也会越来越强，怎么说呢，你仔细看一看你手机上的应用吧，很多应用已经悄悄的使用混合式开发了，如果像你说的它们很慢，你发现它们了吗？
目前已经有很多的框架可以帮助你开发跨平台的移动应用，在这篇文章中，我们只介绍最牛的7个。
IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就 。
IONIC的开发团队将尽快开发出一种通过IONIC creator提供开发者快速创建IONIC应用的方式。我们将很快就会看到一个支持拖拉功能的可视化开发工具，几分钟内开发一个app将不再只是吹xx。
如果对IONIC感兴趣，可以看一看本站的IONIC教程 。
Mobile Angular UI
Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。
Mobile Angular UI的关键字有：
Bootstrap 3
Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。
AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate
响应式媒体查询是将bootstrap作为单独的文件，你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。
详细了解可以看一看 the Mobile Angular UI demo page，上面有Mobile Angular UI的实践，如果你想了解的更深入一些，我建议你读一读 getting started with Mobile Angular UI。
Intel XDK 是Inter开发的一款跨平台开发工具，我们可以很容易的通过Intel XDK开发应用，你需要做的只是下载他们的应用开发工具 ，有Linux、Windows和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat.
相关的APP frameworks的开发使用教程：移动开发实战：App frameworks开发支持移动设备全屏滚动应用
在之前我写过关于Intel XDK很详细的教程，没有看过的同学可以看一看：
通过Intel XDK编写跨平台app(一)
通过Intel XDK编写跨平台app(二)
Appcelerator Titanium
Appcelerator’s Titanium 不同于其它框架的是，它是一个开源的框架。
Titanium是混合式移动应用开发的一站式解决方案，你只需要下载 Titanium studio就可以解决所有的事情，Titanium SDK包含了很多手机平台的APIs和后端云服务。
Titanium使用 Alloy，Alloy是一个快速开发的手机应用MVC框架， 模块式开发可以大大减小开发时间，提高代码复用。
Titanium studio 还提供了一些code模板。你可以熟悉一下这些模板，相关的教程也很快会推出。
Sencha Touch
Sencha Touch 同样也是HTML5手机应用跨平台开发框架，运行iOS/Android/Blackberry。它已经诞生很多年了，现在已经成为很常用的混合式编程开发框架。
Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
下面是Sencha官方给出的几点特性
1.基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。
2.支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。
3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。
4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。
Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。
Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。
PhoneGap 恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的 Cordova 商业版本。
第一段PhoneGap代码是在2008年8月的iPhoneDevCamp上写成的。创建它的一个主要动力是基于一个几乎每一个单独的iPhone开发新手都要面对的简单事实：Objective-C是一个对Web开发人员来说非常陌生的环境，并且Web开发人员的数量远远多于Objective-C开发人员的数量。
问题是，是否有人可以开发一个框架，让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识，而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢？
就在那一年，PhoneGap获了奖并开始支持Android平台，对人数不断增长的移动开发人员变得越来越有用，这些人员需要在更多的平台上获得代码支持。
大家可以到PhoneGap documentation官方文档开始对PhoneGap的学习。
在这篇文章中，我们讨论了一些HTML5的移动开发框架，HTML5正式发布之后，很多开发者对HTML5又重燃了希望，相信这是个美好的时代，相信它会给我们带来更多的惊喜。
阅读原文：　
相关 [html5 移动 开发] 推荐：
- HTML5研究小组
随着移动互联世界的到来，目前已发展到多种移动
操作系统割据的局面，而开发者则急需要能运用原有的开发知识和技能，快速方便地构建移动应用程序，并期望能运行在不同的
手机操作平台上，比如Android,iOS,黑莓等. 而目前，出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架，其中最为大家熟悉的是jQuery Mobile框架(http://
)，它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用，而且直接通过
手机的浏览器即可浏览.
- 请叫我火矞弟 - Solidot
接近Adobe的消息来源透露了该公司未来发展计划：停止移动版Flash开发，增加HTML5投资. Adobe未来不会再为新浏览器、操作系统或移动设备开发Flash播放器，但会继续向现有的Android和PlayBook平台Flash播放器提供安全更新和bug修正. 它的开发重心将集中在移动应用程序开发，包括帮助Flash开发者用Adobe AIR为不同移动应用商店打包原生应用；以及加大HTML5投入.
标题很有诱惑力，所以我略看了一下并且转载了. 在我现在的工作中就是遇到了这样的问题，是该坚持HTML5还是坚持 native的程序. HTML5的好处当然有，可以随时更新新的样式. native的话就不行，但是内存消耗会小上很多. 而且很多基于后台运行的任务，HTML5也不能完美实现. 所以混用就成了现在大多数人的用法（用native做外包装，捕获HTML发送的一些接口、事件，这样就几乎可以两全其美了）.
- 行业资讯
　　编者按：HTML5专属时代正悄然来临，在这块角逐者众的竞技场，抢跑者无疑将更受瞩目. 3月6日，国内首个HTML5移动应用在线开发平台正式公测，大家可以使用AppCan简单、快速、高效地开发HTML5移动应用. 之前在AppCan内测期间，小编初次体验EASY功能就大呼过瘾. 特意撰文一篇《如何在Android手机上开发出Android应用》，有许多开发者对此强烈关注，并且表示区区内测的1000个邀请码没有抢到.
很久以前整理了篇将
手机网站做成手机应用的JS框架. 时隔一年多，很多新的技术已经出现，下面再来总结下还有哪些框架是适合面向手机设备的开发的. jQuery Mobile 是 jQuery 在手机上和平板设备上的版本. jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架.
- HTML5研究小组
PhoneGap 是一个免费开源的开发框架，让 Web 开发人员能够使用熟悉的
HTML，. JavaScript 构建跨平台的移动本地应用. 通过 PhoneGap 框架提供的 JavaScript API 能够以非常简单的方式调用移动设备的核心功能，包括地理位置，摄像头，加速器，通讯录，多媒体，文件和网络等功能.
涂雅导读：现在越来越多的公司进入到移动互联网这个领域，选择HTML5做跨平台的解决方案，还是针对不同的平台开发，这是一个十分艰难的选择. 早期的技术选型很重要，稍有不慎，后患无穷，是超前使用HTML5，还是稳妥地针对性开发，或者两者折中. 随着移动设备越来越先进，对HTML5的支持度越来越高，我们进军移动领域的时候，都会遇到一个问题，是选择HTML5和还是Native(用原生代码编写的本地程序).
- HTML5研究小组
随着移动设备越来越先进，对HTML5的支持度越来越高，我们进军移动领域的时候，都会遇到一个问题，是选择HTML5和还是Native(用原生代码编写的本地程序). HTML5的前景无疑是诱人的，一句“Write once, run anywhere”就可以秒杀一切. 笔者最近两年来对HTML5与Native有较为深入的研究，觉得两者之间不能仅仅是二分法来选择，还要根据企业自身的情况、团队的构成、公司的战略以及产品的特点来综合选择.
- 移动开发 - ITeye博客
HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间：移动端的IE、Chrome、FireFox、Safari，亦或是新出现的浏览器，谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场. 有了HTML5以后怎么装APP. 更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一.
- 动点科技
HBuilder是一个工作环境（IDE），可以加速html5新应用的开发，这是在中国的首个同类产品，在该产品背后的开发团队Dcloud，相信这是全球同类产品当中表现最好的一个. 公司已经找出某种方式来促进html5移动应用在中国的表现. 它们跟原生应用已经差不多好了，同样在低端的安卓设备上也可以表现很好，而低端安卓机占领中国智能手机市场的一大部分，也将会是不远的将来市场的主要驱动力量.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。用户名：1503849
文章数：16
访问量：11495
注册日期：
阅读量：1297
阅读量：3317
阅读量：444712
阅读量：1130469
51CTO推荐博文
首先从官网http://www.dcloud.io/ 下载HBuilder，用该软件创建一个HTML5的移动APP项目，具体可去官网查看相应的文档。接下来就是如何将写好的HBuilder引入到我们的安卓项目中。先到&下载HBuilder离线打包Android版SDK，SDK里面有个HBuilder-Integrate工程我们将会用到，接下来开始了~~~~~先用Android Studio创建一个新项目（MyFirstMUI）。1、导入jar包，可从HBuilder-Integrate工程的libs中选择，具体要导入哪些jar包可从SDK中的Feature-Android.xls中查看。2、加入APP资源：&&①在工程目录下的创建assets文件夹，并在assets目录下添加apps目录②在apps目录下创建应用ID同名目录③在应用ID同名目录下创建www目录④将应用资源和应用配置文件（manifest.json）拷贝到www目录下其中“H5B1EA68D”目录名称为应用manifest.json中的id名称，务必一致。添加control.xml文件和properties.xml文件到assets-&data目录下其中control.xml文件的appid值为HBuilder应用的appid，必须与应用manifest.json中的id值完全一致；appver为应用的版本号，用于应用资源的升级，必须保持与manifest.json中的version -& name值完全一致；version值为应用基座版本号（plus.runtime.innerVersion返回的值），不要随意修改。Properites文件用于对应JS类名和Android包名的对应关系，用户可以根据开发项目使用到的插件对文件进行添加或删改。这两个文件都可从HBuilder-Integrate工程中拷贝过来进行修改。3、复制所需的资源文件到drawable和layout文件夹中：&4、修改AndroidManifest.xml文件文件中的versionCode与manifest.json中version -& code值一致；versionName与manifest.json中version -& name值一致。根据HBuilder-Integrate工程中的AndroidManifest.xml文件添加所需的功能权限。如果只是需要基本功能的话可以只添加上述的基本权限。声明必须的这两个activity（其中一个为启动的activity），其他可根据HBuilder-Integrate工程中的AndroidManifest.xml文件进行相应添加。5、添加RInfomation文件注意RInfomation要连同其目录一起复制进项目中。需要其他功能可根据HBuilder-Integrate工程中相应的RInfomation文件进行添加。如果缺少对应资源文件，大家可以从HBuilder-Integrate工程中获取。具体可查看文档 到此结束，附上我自己写的例子大家可以下载下来参考，是用Android Studio写的，在Eclipse上同理。下载地址&---------------------此处是分割线-----------------------另外如果你想要在一个安卓项目中引入多个HBuilder写成的APP模块，同样先将资源拷贝到assets目录下，如下在control.xml文件中配置多个apps，即可引用多个模块。本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：未分类┆阅读(0)┆评论(0)
09:39:16 14:38:38 11:53:51 21:51:25输入关键字或相关内容进行搜索
利用Chrome开发者功能，在编辑框里的编辑会在浏览器实时渲染出来（不是保存才渲染），而且编辑器里当前光标所在区域在浏览器里会被高亮出来，就像在开发者工具里选中DOM一样，非常直观。不明白的童鞋可以试试Brackets那种实时预览效果。
我们觉得实时渲染好恶心，代码还没写完就开始执行。所以我们设计的是保存后渲染。
页面和代码的互相高亮功能是有的，目前Windows版本有，mac版暂时还没有。
Windows版本上打开边改边看，对dom代码点右键，有高亮浏览器内对应元素（右键 j）；
同样对浏览器点右键，也能转到对应的dom代码。
要回复问题请先或
浏览: 1070
关注: 2 人Web前端开发（22）
Dcloud HTML5+App开发套件分为三个部分： HBuilderIDE， 5+App， MUI框架三个部分。
HBuilder为基于Eclipse改造的专为HTML开发工作提供的IDE，其优点在于：
更方便的与手机设备实时调试
与HTML,MUI深度集成
集成代码块自动补全功能
与HBuilder集成， 通过HBuilder包装的APP框架。实现纯JS调用硬件API的特性。性能较Cordva更好。
移动CSS框架，与大部分js框架不冲突。体积小，精简，运行效率高。
可以明显感觉比Ionic以及phoneGap、jQueryMobile快。
HBuilder开发基本步骤
1、新建项目
选择APP项目即可，项目结构很明了，不做详细说明。
2、新建页面
若需要带上MUI特性，就新建MUI页面即可，会自动引入包与样式。
其中一些特殊代码需要重视：
mui.init();
document.addEventListener('plusready',plusReady,false);
function plusReady(){
plus.key.addEventListener('backbutton',function(){
if(confirm('确认退出？')){
plus.runtime.quit();
安卓只需选择 ‘运行 -& 手机运行 -& 在xxxx设备上运行’ 既可。是所见即得的方式，十分方便迅速。有时候出现即时刷新无效的情况，可以关闭程序后再打开
支持安卓IOS的云端以及本地打包，待研究。
1、页面结构
对于一般APP形式（上下栏固定，中间为显示内容）可以使用一个单一页面加子页面的形式。如下：
子页面在mui.init()时载入
mui.init({
subpages:[{
url:homeUrl,
id:'home',
bottom:'10%',
render:'onscreen'
这样中间的子页面有单独的webView资源，因此性能较高。
　2、页面跳转
页面跳转有两种方式，本质都是一样的。
1、利用样板项目中common.js的clicked函数
clicked('actionpage/barcode_scan.html',true,true);
w.clicked=function(id,wa,ns){
if(openw){
return null;
if(w.plus){
wa&&(waiting=plus.nativeUI.showWaiting());
var pre='';
openw=plus.webview.create(pre+id,id,{scrollIndicator:'none',scalable:false});
ns||openw.addEventListener('loaded',function(){
openw.show(as);
closeWaiting();
openw.addEventListener('close',function(){
openw=null;
w.open(id);
return null;
2、自己封装页面跳转函数
即利用mui.openWindow()函数
function loadPage(targeturl){
mui.openWindow({
url:targeturl,
id:targeturl,
bottom:'10%',
width:'100%'
autoShow:true,
aniShow:'slide-in-right',
duration:200
autoShow:true,
title:'正在加载...',
3、页面跳转的优化
推荐阅读: 左侧目录下的“提升HTML5的性能体验系列”
比较直接的办法就是预载，即将HTML页面的内容放入webView中， 在使用的时候show出来。
var contentV
var contentStyles = {top: '44px', bottom: '50px'};
contentView = plus.webview.create(homeUrl,'contentView',contentStyles);
contentView.show();
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：97232次
积分：1658
积分：1658
排名：千里之外
原创：73篇
评论：90条一、什么是HTML5
HTML5并不是一门编程语言，也不是一个工具，它只是HTML的升级版本。简单的说，HTML5其实就是新的页面标签库。
但是如果仅仅如此，那么HTML5就没有出现的必要了。所以，HTML5除了新的标签以外，还包括了很多其他新的东西，如画布，视频和音频的播放，本地存储等等。
这里有HTML5详细教程,初学者可以一看： .cn/html5/index.asp
二、学了HTML5标签，就完事了么？
如果你仅仅学会了标签，那么和普通的网页没什么区别。那怎么才能发挥HTML5的优势？ 答案就是你需要掌握 javascript。HTML5中新鲜玩意：画布，本地存储等，都需要用javascript 来操作才玩得转。
三、掌握上面两个，我就可以做移动开发了？
没错，掌握上面两个，你就可以做一个HTML5的网站了---是网站，不是APP。
你可以使用HTML5做动画效果，做好看的报表，在本地存储数据等等。
利用javascript, HTML5就好像一个富客户端的平台，看你去如何利用它的特性了 但是，请记住，你做的只是一个网站。也就是说，你必须在浏览器中访问它才行。关掉浏览器，你的应用也就结束了。这和安装在我们手机里的APP程序是有本质区别的。如此WebApp就来了
四、什么是WebApp?
举个例子吧，易企秀是可以制作H5页面的，制作出来的H5页面就是移动端web；如果可以把这个H5页面打包成app，那就是webapp。本质上都是web，都是利用html、css、js构建的网站，不同的是，webapp利用框架技术等让你有了在使用App的感觉（比如页面不跳转刷新等）
五、如何去做一个WebApp
这方面做的最好的是 HBuilder,http://www.dcloud.io/ ，使用它，你可以使用HTML5快速地创建APP应用程序。
六、什么是HBuilder
它的网站：http://dcloud.io/
如果单从上面的页面来看，它就是一个开发工具，包含了javascript以及HTML的语法，你用它写web程序的时候，它会给你自动提示或者补全。从工具的角度来说，这个东西确实不错，谁能全记住那些关键词呢？但其实，工具只是它的一小部分而已。进入它的文档部分：http://ask./docs会发现里面很多项目。下面主要说说这些文档的阅读方式。
进入这个项目中，会看到“入门”，“代码提示”等项目。这个项目主要介绍的就是HBuilder这个工具怎么用。重要程度基本上和“Eclipse怎么用”差不多。建议看一看。
七、什么是HTML5+
HBuilder所在的组织（公司），制定了HTML5+规范，然后第一个实现了这个规范，这就是HBuilder的核心。HTML5+，它已经可以让web应用变得几乎和原生应用一样快了这个标准的详细内容请访问
http://www.html5plus.org/doc/h5p.html
先介绍这些，具体webApp实现内容见下一篇^ ^
阅读(...) 评论()