用PhoneGap+jQueryMobile开发Android应用实例.doc

用PhoneGap + jQuery Mobile开发
Android应用

前言 2
PhoneGap及jQueryMobile介绍 2
开发环境的搭建 2
下载并按照 JAVA SDK 2
下载并安装Android SDK 2
创建虚拟设备 3
下载并安装Eclipse 4
下载并安装ADT Plugin 4
下载并解压Cordova 5
下载jQuery Mobile 5
第一个手机应用 5
创建工程 5
整合Cordova 8
整合jQueryMobile 10
制作apk 13
参考资料 16

1. 前言
随着移动终端计算能力的提升，移动应用变得越来越受人青睐，也越来越流行；尤其以iOS和Android平台为主的手机，已经淘汰了大多数人的手机。
新的平台产生了新的SDK，新的UI，新的使用习惯和用户体验。而因为计算能力的增强，手机的渲染能力也大幅增强，从而催生了以WebKit为内核的浏览器的广泛应用。并以此而衍生出了手机上的HTML+CSS应用。至此，手机应用的开发也与传统PC的开发一样，多了一条低成本开发的坦途。
除却传统的基于原生SDK的开发不谈，基于HTML+CSS+js的开发已经变得越来越流行，也越来越受欢迎，特别是一些小应用开发商。
因此而衍生的开发框架如雨后春笋：PhoneGap，AppCan，Rexsee等等。这些框架都是采用桥接的方式，在系统(iOS/Android)原生SDK的基础上，创建一个以WebKit为运行环境的本地Web应用，并为js引擎暴露本地功能(服务)的访问接口，从而实现以HTML+CSS展示界面，以js控制程序流程的手机应用。
这种应用看上去与原生SDK开发的应用并无二致，甚至可能拥有更好的用户界面和用户体验。因为网页的开发技术越来越成熟，各种库的适用性，兼容性越来越强，而且也越来越注重用户界面与用户体验的提升，其中的佼佼者有最初的Prototype，Yahoo!；现在大行其道的jQuery，ExtJs，Dojo等等。
同样，这些库也推出了移动版，而基于jQuery的就有很多不同的库，如：JQ.mobi，jQuery Mobile等等。

2. PhoneGap、jQuery Mobile简介
PhoneGap是一个基于HTML5+CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。最初PhoneGap仅支持iOS，但随着Android市场份额的恐怖增长，增加了Android的支持，后续又陆续增加了BlackBerry、Windows Mobile Phone、WebOS以及Symbian的支持。
Adobe在去年底，收购了PhoneGap，并交由Apache开源，成了现在的Cordova(以下均称Cordova)。Cordova现在已经更新到2.1.0，除了保留原PhoneGap的所有功能，Cordova支持更多的设备，桥接了更多的接口，并且稳定性更高。
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅给主流移动平台带来jQuery核心库，而且发布了一个较完整统一的jQuery移动UI框架。我们可以继续使用jQuery来开发手机版的网页代码，同时还可以利用jQuery Mobile带来的基本UI控件(互联网时代的程序猿是幸福滴)。

3. 开发环境的搭建
废话了不少，现在来点正经的，从无到有搭建一个开发环境：
1) 下载并安装JAVA JDK(推荐使用JDK6)
2) 下载并安装Android SDK(r20.0.3)
安装好之后，打开SDK Manager(初始安装后，仅Android SDK Tools一项已安装)，将Tools项，以及Android 2.2(API 8)勾选，并点击“install x packages”进行安装(过程会有点长，不如坐下来看一部电影吧)，如图：

3) 创建虚拟设备(Android Virtual Device)
打开AVD Manager，点击新建(New)，如图：

输入虚拟设备名称，选择目标平台(Android 2.2)，如图：

4) 下载并安装Eclipse(Eclipse 3.4+)
5) 下载并安装ADT Plugin(20.0.3)
ADT Plugin的安装有两种，一种在线安装：
打开Eclipse菜单Help|Install New Software，点Add，在Name中输入“ADT 20.0.3”，在Location里输入https://dl-

再有一种就是把ADT 20.0.3.zip下载到本地，进行本地安装。不同之处就是在Add之后，在Location中输入zip包的本地路径即可。

安装好之后，Eclipse下会看到Android开发相关的工具按钮，如图：

6) 下载并解压Cordova
Cordova是一个zip包，不需要安装，我们不妨将其解压，并与Android SDK放一起。
7) 下载jQuery Mobile
与Cordova一样，不妨将其解压并与Android SDK放一起(好找嘛)。

4. 第一个手机应用
开发环境至此已经搭建完毕，练练手吧(可不可以不要“hello, Cordova.”)：

SDK最好选一致的(为什么是2.2?)。

这里是程序图标(回头再来换)，以及配色方案(无所谓，我们用的HTML+CSS嘛)。

空着，我们用不着。

好了，终于结束了(我是说截图结束了，手酸呐)。

现在该整合Cordova了，先假设我们的YofangMobile工程目录为%YofangMob%，而Cordova的解压目录下lib\android\example为%CordovaAnd%(恩恩，我们是开发Android应用嘛，当然以此为准)，下面整合：
1) 切换到文件系统，复制%CordovaAnd%\libs\cordova-2.1.0.jar到%YofangMob%\libs下。
2) 创建文件夹%YofangMob%\assets\www。
3) 复制%CordovaAnd%\assets\www\cordova-2.1.0.js到%YofangMob%\assets\www下。
4) 复制文件夹%CordovaAnd%\res\xml到%YofangMob%\res下。
5) 切换到Eclipse，打开我们的YofangMobile.java，将YofangMobile的基类由Activity改成DroidGap；将onCreate方法里的
setContentView(R.layout.activity_yofang_mobile);
替换成
super.loadUrl("file:///android_asset/www/index.html");
删除onCreateOptionsMenu方法(修改之后Eclipse会报错，不怕不怕，Ctrl+Shift+O)。修改结果如图：

6) 继续，打开AndroidManifest.xml文件(记得别双击，用Open With|Text Editor)。
7) 增加Cordova屏幕支持：
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
8) 增加Cordova插件配置：
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
9) 为activity节点增加属性：
android:configChanges="orientation|keyboardHidden"
10) 保存AndroidManifest.xml的修改，如图：

11) 在assets\www下创建文件index.html，内容如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
</head>
<body>
<h1>Hello, Cordova.</h1>
</body>
</html>
12) Run As|Android Application，看看整合的成绩吧(启动AVD时会有点慢，先喝口茶)。

Cordova整合完成，接下来我们把jQuery Mobile也给整进去，同理，先假定jQuery Mobile解压目录下demos为%jQueryMob%：
1) 切换到文件系统，复制文件夹%jQueryMob%\css到%YofangMob%\assets\www下。
2) 复制文件夹%jQueryMob%\js到%YofangMob%\assets\www下。
3) 复制文件夹%jQueryMob%\docs\_assets到%YofangMob%\assets\www下。
4) 复制%jQueryMob%\index.html到%YofangMob%\assets\www下。
5) 移动%YofangMob%\assets\www\cordova-2.1.0.js到%YofangMob%\assets\www\js下。
6) 切换到Eclipse，打开index.html，修改文件内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="_assets/css/jqm-docs.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="_assets/js/jqm-docs.js"></script>
<script type="text/javascript" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function(){
$("#platform").html(device.platform);
$("#version").html(device.version);
$("#uuid").html(device.uuid);
$("#name").html(device.name);
$("#width").html(screen.width);
$("#height").html(screen.height);
$("#colorDepth").html(screen.colorDepth);

$("#location").click(function(){
navigator.geolocation.getCurrentPosition(function(p){
var url = " + p.coords.latitude + "," + p.coords.longitude;

$.get(url, function(data, status){
alert(status + ": " + data);
});
}, function(err){
alert("查询失败：" + err.message);
});
});
}, false);
</script>
</head>
<body>
<div data-role="page" class="type-home">
<div data-role="content">
<p class="jqm-version"></p>

<div class="content-secondary">

<div id="jqm-homeheader">
<h1 id="jqm-logo"><img src="_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1>
<p>A Touch-Optimized UI Framework built with jQuery and HTML5.</p>
</div>

<div class="intro">
<h4>Platform: <span id="platform"> &nbsp;</span>, Version: <span id="version">&nbsp;</span></h4>
<h4>UUID: <span id="uuid"> &nbsp;</span>, Name: <span id="name">&nbsp;</span></h4>
<h4>Width: <span id="width"> &nbsp;</span>, Height: <span id="height"> &nbsp;</span>, Color Depth: <span id="colorDepth"></span></h4>
</div>

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Overview</li>
<li><a href="javascript:location.self;" id="location" data-role="button" data-inline="true">地理位置</a></li>
</ul>

</div><!--/content-primary-->

</div>

<div data-role="footer" class="footer-docs" data-theme="c">
<p class="jqm-version"></p>
<p>&copy; 2012 jQuery Foundation and other contributors</p>
</div>

</div>
</body>
</html>
7) 保存修改，Run As|Android Application。

至此，我们已经可以在虚拟机中看到程序的运行效果了。可以顺利的获取设备信息，并且根据虚拟机的设置不同，还能获得一个国外的地理位置(哈哈，出国了)。

结束了吗？不，程序甚至都还没用在我们自己的手机上运行过，怎么能结束？
应该把程序制作成apk安装包对不对？然后安装到手机上，然后。。。

制作签名安装包(尽管菜单上有制作不签名安装包的功能，但我们暂时用不到，相信我)。

创建一个新的证书，选择证书文件存放位置，以及证书密码 (如果你已经创建了证书，则只需要选择证书文件，并输入一次密码就行了) 。

哈哈，其实除了上面5项，下面的都可以不填。

嗯，我比较喜欢放桌面，方便定位(呵呵，喝口茶)。

到这就真的结束了。
apk文件已经在桌面等着你了，还犹豫什么？

5. 附录
JDK6下载：
Android SDK下载：
Eclipse下载：http://www.eclipse.org/downloads/
ADT Plugin：
PhoneGap中国： (PhoneGap)
PhoneGap官网： (PhoneGap+Cordova)
Cordova整合文档：
jQuery Mobile官网：

16