Mikel
[转载]PhoneGap+JqueryMob+html5开发跨平台移动app-Android实例教程-eoe 移动开发者论坛 – Powered by Discuz!.
一、PhoneGap简介
PhoneGap 是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系 人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展很多功能。
PhoneGap 在2011年7月29日发布1.0版本，在2011年10月4日被Adobe公司收购，截止2013年11月29日最新版本为2.9.1。
官方网址为：http://phonegap.com/（官方提供中文的Api）
二、JQuery for mobile简介
JQueryMobile 是一个极好的框架，用于编写移动Web 应用程序。jQuery Mobile 构建于流行的jQuery 和用户界面 (UI) 之上，是一个有效的统一框架，可为您编写移动Web 应用程序。有了 jQuery Mobile，就可以确保外观、感觉和行为在不同移动平台上的一致性。jQueryMobile 基本特性包括：
1、一般简单性和灵活性
该框架易于使用。您可以：
该框架易于使用。您可以：
o 主要使用标记驱开发动页面，无需或仅需很少JavaScript。
o 使用高级 JavaScript和事件。
o 使用一个 HTML 文件和多个嵌入页面。
o 将应用程序分解成多个页面。
2、逐步强化和全面兼容
尽管 jQuery Mobile 利用最新的HTML5、CSS3 和 JavaScript，但并非所有移动设备都提供这样的支持。jQueryMobile 的理念是同时支持高端和低端设备，比如那些不支持JavaScript 的设备，尽量提供最好的体验。
尽管 jQuery Mobile 利用最新的HTML5、CSS3 和 JavaScript，但并非所有移动设备都提供这样的支持。jQueryMobile 的理念是同时支持高端和低端设备，比如那些不支持JavaScript 的设备，尽量提供最好的体验。
3、支持触摸屏输入和其他输入方法。
jQuery Mobile 为不同输入方法和事件提供支持：触摸屏、鼠标和基于光标焦点的用户输入。
jQuery Mobile 为不同输入方法和事件提供支持：触摸屏、鼠标和基于光标焦点的用户输入。
4、可访问性
jQuery Mobile 在设计时考虑了访问能力，它支持Accessible Rich Internet Applications (WAI-ARIA)，以帮助使用辅助技术的残障人士访问Web 页面。
jQuery Mobile 在设计时考虑了访问能力，它支持Accessible Rich Internet Applications (WAI-ARIA)，以帮助使用辅助技术的残障人士访问Web 页面。
5、轻量级和模块化
该框架属于轻量级，拥有一个大小（版本 1.0.1 进行了缩小和压缩）为24KB 的 JavaScript 库，7KB的 CSS 以及一些图标。
该框架属于轻量级，拥有一个大小（版本 1.0.1 进行了缩小和压缩）为24KB 的 JavaScript 库，7KB的 CSS 以及一些图标。
6、主题
该框架还提供一个主题系统，允许您定义自己的应用程序样式。有了这个新的ThemeRoller 应用程序，您就可以轻松地创建您自己的主题。
该框架还提供一个主题系统，允许您定义自己的应用程序样式。有了这个新的ThemeRoller 应用程序，您就可以轻松地创建您自己的主题。
jQueryMobile 框架包括构建完整移动 Web 应用程序和网站所需的所有UI 组件。页面、对话框、工具栏、不同类型的列表视图，各种表单元素和按钮等。jQueryMobile 构建于 jQuery 内核之上，因此您可以访问关键设备，包括HTML 和 XML 文档对象模型 (DOM) 的遍历操作；事件处理；使用Ajax 服务器通信；以及 Web 页面的动画和图像效果。
有了jQuery Mobile，您就可以轻而易举地编写基础 Web 应用程序。由于jQuery Mobile 是一个非常全面的基础架构，提供了一些高级事件和API，所以您还可以编写高级移动 Web 应用程序和网站。
官方网址为：http://jquerymobile.com/(官网有各种效果的列子和代码api)
三、开发环境搭建示例（Android）
1、环境说明
本文介绍的开发工具是Eclipse，但也有做前端得使用Dreamweaver5.5
+PhoneGap开发的，但公司装不上PhoneGap没法尝试这样的开发，就先用Eclipse将就一下吧。
2、添加PhoneGap开发包及js库
在Eclipse中创建新的Android项目：TestJqueryForMobile，在assets目录下面创建文件夹www，再在www文 件夹下面创建css和js文件夹，将在PhoneGap官网下载的包解压找到cordova.js文件复制到刚才创建的js文件夹中，将 DroidGap-2.9.1.jar文件添加到libs中并buildpath。
3、添加Jqueryfor mobile 的js库和css库
解压在Jquery for mobile官网下载的包，将css下面的文件和文件夹复制到刚才创建的assets/www/css/目录下，将js下面的文件和文件夹复制到刚才创建 的assets/www/js/目录下。到现在我们在Eclipse上开发跨平台应用的环境就已经搭建好了。如下图：
file:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image002.jpg 
4、编写一个页面
下面我们通过用Html编写一个Jquery提供的界面风格的程序界面，并通过PhoneGap调用系统本地api拍照，取照片。
先在assets/www/目录下面创建一个html文件：index.html，并用jquery绘制界面，在项目的 MainActivity.java中继承DroidGap.java(来自于DroidGap-2.9.1.jar)并在onCreate方法中载入 assets/www/index.html文件。
MainActivity.java中的代码段：
@Override
public void onCreate(BundlesavedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl(“file:///android_asset/www/index.html”);
}
Index.html中的代码段：
<scriptsrc=”js/jquery.js”></script>
//载入jquery的js库
<scriptsrc=”js/cordova.js”></script>
//载入PhoneGap的js库
<scriptsrc=”js/jquery.mobile-1.3.2.min.js”></script>
//载入jquery for mobile的js库
5、效果：
file:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image004.jpgfile:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image006.jpgfile:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image008.jpgfile:///C:\DOCUME~1\yyl\LOCALS~1\Temp\msohtmlclip1\01\clip_image010.jpg
四、优劣势分析
优点：
1、 上手迅速并支持快速迭代。
2、支持跨平台和跨设备开发。
3、解决系统碎片化，主要针对Android。
缺点：
1、比原生程序运行慢。
2、有限的能力。
总结
总的说来，使用JQueryMobile和HTML5作为手机应用开发平台是可行的。然而，这并不适用于（至少到目前为止）所有类型的应用程序。对于简单的内容显示和数据输入类型的 应用程序（相对的是需要丰富多媒体/游戏程序），它是对原生程序一个有力的增强。
在接下来的1-2年中，随着硬件变得越来越快，手机设备越来越多样化，相信HTML5（JQuery Mobile，PhoneGap， 等等）在手机应用开发中会成为更加重要的技术。
