码迷,mamicode.com
首页 > 移动开发 > 详细

01.html5+phonegap跨平台移动应用开发

时间:2015-09-09 21:28:42      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:

 一、html5+PhoneGap基础知识 (1)html5介绍

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集 开发中选择html5理由: 1、兼容性,老版本的浏览器上也可以运行(不是很靠谱) 2、实用性,简化了标签,细分了功能,增加了移动互联网元素 3、革命性,HTML不再是简单的标签语言,增加了API、渲染等 html5有哪些特点: 1.微数据与微格式等方面的支持 , 2.本地存储,离线应用 3.API调用,地图,位置,LBS等 4.连接通讯,后台线程, 5.多媒体 , 6.三维、图形及特效, 7.CSS3 (2)PhoneGap介绍 1. PhoneGap是什么

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发框架。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——

包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套开发。使用PhoneGap只比为每个平台分别建立应用程序好一点点,因为虽然基本代码是一样的,但是你仍然需要为每个平台分别编译应用程序。 PhoneGap针对不同平台的WebView做了扩展和封装,使WebView这个组件变成可访问设备本地API的强大浏览器,所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。 WebView是什么(WebView组件实质是移动设备的内置浏览器 WebView这个内置浏览器特性是Web能被打包成本地客户端的基础,可方便的用HTML5、CSS3页面布局,这是移动Web技术的优势相对于原生开发)

2. PhoneGap的优势 (1)可跨平台:PhoneGap是唯一的一个支持7个平台的开源移动框架(PhoneGap包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能,几乎Native App能完成的功能他都能完成)。它的优势是无以伦比的:开发成本低——据估算,至多Native App的五分之一! (2)易用性,基于标准的Web开发技术 (html + css +js) (3)提供硬件访问控制(api) (4)可利用成熟javascript框架(JqueryMobile SenchaTouch) (5)方便的安装和使用 3. PhoneGap的不足 (1) PhoneGap应用程序的运行是寄托于移动设备上各平台的内置浏览器webkit的,受到webkit处理速度影响,以及各个平台的硬件与软件的性能制约,其程序运行的速度会比原生的程序稍微慢点,但是笔者认为,这些问题在1-2年内都会解决,因为现在的硬件的发展速度太快了。 (2)还有一些底层的功能需要插件来实现比如(推送功能)

技术分享

(3)平台差异化不同,PhoneGap应用程序在所有平台上运行界面看起来都一样。即使这个应用程序与原生应用很相像,但对于习惯了iOS与 Android 平台的用户来说,会觉得不习惯,他们还是会很快看出差异。 通过综合比较PhoneGap的优点与不足,我们认为,如果你想快速实现一般的移动WebApp或者普通的2D游戏,那么可以采用PhoneGap技术。如果你想要实现需要大量CPU计算的应用或者3D游戏,或者对用户体验及界面有极致的追求,考虑目前的硬件条件和开发成本,使用原生开发来实现比较适合。 4.PhoneGap前景 2011年10月4日Adobe宣布收购了创建了HTML5 移动应用框架PhoneGap 和PhoneGap Build的新创公司Nitobi Software。这使得phonegap有了坚强的后盾,phonegap的发展前景也是一片光明。与此同时,PhoneGap的开源框架已经被累积下载60万次,借助PhoneGap平台,已有数千应用程序建立在iOS,android以及其它操作系统之上。 二、Web App, Native APP,Hybird App介绍 (1)Web App 这个主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发. 用户无需下载,通过不同平台的浏览器访问来实现跨平台,同时可以通过浏览器支持充分使用HTML5特性,缺点是这些基于浏览器的应用无法调用系统API来实现一些高级功能,也不适合高性能要求的场合. (2)Native APP 就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用.使用它们的优点是可以完全利用系统的API和平台特性,在性能上也是最好的。缺点是由于开发技术不同,如果你要覆盖多个平台,则要针对每个平台独立开发,无跨平台特性. (3)Hybird App 则是为了弥补如上两者开发模式的缺陷的产物.分别继承双方的优势.首先它让为数众多的web开发人员可以几乎零成本的转型成移动应用开发者;其次,相同的代码只需针对不同平台进行编译就能实现在多平台的分发,大大提高了多平台开发的效率;而相较于web App,开发者可以通过包装好的接口,调用大部分常用的系统API。PhoneGap正是Hybird APP的代表开发框架

三、 为么要学习PhoneGap

 

1、移动互联网软件开发现状 在多厂商的利益竞争下,当前的智能终端平台呈现出了“百家争鸣”的现象。当前的移动终端系统呈现出较为零散的割据状态,其中,Nokia 主推的 Symbian、Apple 的iOS、和 Google 的 Android,分别占据了较大的市场份额。然而,由于当前主流的移动平台之间互不兼容,针对不同的移动平台系统,当前并没有可以兼容的应用开发接口和语言;当前,使用 C/C++ 的 Symbian、使用 Object C 的iOS和使用 Java 的 Android 应用开发技术,几乎是完全无法融合的。 2、移动互联网软件开发者的困扰 开发完Android应用,还得重新开发Ios应用,开发完Ios还得开发Windows Phone,一个应用不同平台重复开发 1.从应用开发的角度来说,同样的程序逻辑却不得不在多个平台上使用不同的语言和API 重复编码。 2.从代码维护的角度来说,针对同一个项目需要同时维护多份代码,一旦程序逻辑发生变化,将导致大规模的代码修改与回归测试。 3.从经济角度来说,要同时开发和维护多个平台的应用程序,将花费企业巨大的人力和时间成本。 3、phonegap的出现,为什么要学phonegap

为了解决上述问题,跨平台的移动应用开发技术逐渐地引起了开发者的关注。市面上也出现了很多跨平台框架,然而笔者认为比较好的还属于PhoneGap 也是开发人员最多的 四、Html5 移动应用软件开发框架JqueryMobile SenchaTouch介绍 1.JqueryMobile介绍

jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。此框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript。 此框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript。 2.SenchaTouch介绍 前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库,推出适用于最前沿Touch Web的Sencha Touch框架,该框架是世界上第一个基于HTML5的Mobile App框架。同时,ExtJS更名为Sencha,JQTouch的创始人David Kaneda,以及Raphaël的创始人也已加盟Sencha团队 3.JqueryMobile SenchaTouch对比 大家可以看看这篇文章,上面有详细的说明

http://www.phonegap100.com/article-65-1.html jQuery Mobile JM 只是一个 UI 库,依赖于 jQuery 和 jQuery UI 的 DOM 操作、Ajax 和其他库

o 为了创建 UI 部件,你只需要编写 HTML 即可,JM 为了对这些 HTML 元素进行修饰

o 可方便的重用已有的 HTML 代码

o 一些简单的应用直接用 HTML 即可实现,无需 JavaScript

o JM 具有相对小的对象模型,可以快速轻松学习,特别是他是一个 jQuery 的插件

o JM 对代码没有特定的要求,这可能是非常灵活的,但维护难度也加大

o 易于和其他框架进行集

o 比 Sencha Touch 支持更多的设备

o 不依赖某个特定的供应商

 

Sencha Touch

o 这是一个独立的库,包括 UI 部件、DOM 操作、Ajax 以及其他

o 无需依赖其他库

o 采用以 JavaScript 为核心的方法,基本上不需要写 HTML

o 提供大的对象模型,提供更多的功能,但是学习周期很长

o 统一的编程代码结构和要求,良好组织的代码易于维护

o 提供内置的服务器和本地存储的抽象层,可在关系数据基础上轻松执行 CRUD 操作。

o 提供内置的工具用于创建 iOS 和 Android 本地运行的程序

o 比 jQuery Mobile 支持的设备要少

 

五、创建一个简单的示例,打包成跨平台的可安装的移动应用

一.环境搭建简单的示例 <!DOCTYPEhtml> <html> <head> <title>jQuery Mobile 应用程序</title> <metaname="viewport"content="width=device-width"/> <linkhref="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet"type="text/css"/> <scriptsrc="Js/jquery-1.6.4.js" type="text/javascript"></script> <scriptsrc="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script> </head> <body> <sectionid="page1"data-role="page"> <headerdata-role="header"><h1>jQuery Mobile</h1></header> <divdata-role="content"class="content"> <p>Hello World!</p> </div> <footerdata-role="footer"><h1>PhoneGap中文网</h1></footer> </section> </body> </html>

01.html5+phonegap跨平台移动应用开发

标签:

原文地址:http://www.cnblogs.com/daipianpian/p/4795860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!