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

 1、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理由： 一、兼容性，老版本的浏览器上也能够运行（不是很靠谱） 二、实用性，简化了标签，细分了功能，增长了移动互联网元素 三、革命性，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能被打包成本地客户端的基础，可方便的用HTML五、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以及其它操做系统之上。 2、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的表明开发框架

3、 为么要学习PhoneGap

 

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

为了解决上述问题，跨平台的移动应用开发技术逐渐地引发了开发者的关注。市面上也出现了不少跨平台框架，然而笔者认为比较好的还属于PhoneGap 也是开发人员最多的 4、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 支持的设备要少

 

5、建立一个简单的示例，打包成跨平台的可安装的移动应用

一．环境搭建简单的示例 <!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>