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

《用PhoneGap+jQueryMobile开发Android应用实例.docx》由会员分享，可在线阅读，更多相关《用PhoneGap+jQueryMobile开发Android应用实例.docx（18页珍藏版）》请在冰豆网上搜索。

用PhoneGap+jQueryMobile开发Android应用实例

用PhoneGap+jQueryMobile开发

Android应用

前言2

PhoneGap及jQueryMobile介绍2

开发环境的搭建2

下载并按照JAVASDK2

下载并安装AndroidSDK2

创建虚拟设备3

下载并安装Eclipse4

下载并安装ADTPlugin4

下载并解压Cordova5

下载jQueryMobile5

第一个手机应用5

创建工程5

整合Cordova8

整合jQueryMobile10

制作apk13

参考资料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，jQueryMobile等等。

2.PhoneGap、jQueryMobile简介

PhoneGap是一个基于HTML5+CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。

最初PhoneGap仅支持iOS，但随着Android市场份额的恐怖增长，增加了Android的支持，后续又陆续增加了BlackBerry、WindowsMobilePhone、WebOS以及Symbian的支持。

Adobe在去年底，收购了PhoneGap，并交由Apache开源，成了现在的Cordova（以下均称Cordova）。

Cordova现在已经更新到2.1.0，除了保留原PhoneGap的所有功能，Cordova支持更多的设备，桥接了更多的接口，并且稳定性更高。

jQueryMobile是jQuery在手机上和平板设备上的版本。

jQueryMobile不仅给主流移动平台带来jQuery核心库，而且发布了一个较完整统一的jQuery移动UI框架。

我们可以继续使用jQuery来开发手机版的网页代码，同时还可以利用jQueryMobile带来的基本UI控件（互联网时代的程序猿是幸福滴）。

3.开发环境的搭建

废话了不少，现在来点正经的，从无到有搭建一个开发环境：

1）下载并安装JAVAJDK（推荐使用JDK6）

2）下载并安装AndroidSDK（r20.0.3）

安装好之后，打开SDKManager（初始安装后，仅AndroidSDKTools一项已安装），将Tools项，以及Android2.2（API8）勾选，并点击“installxpackages”进行安装（过程会有点长，不如坐下来看一部电影吧），如图：

3）创建虚拟设备（AndroidVirtualDevice）

打开AVDManager，点击新建（New），如图：

输入虚拟设备名称，选择目标平台（Android2.2），如图：

4）下载并安装Eclipse（Eclipse3.4+）

5）下载并安装ADTPlugin（20.0.3）

ADTPlugin的安装有两种，一种在线安装：

打开Eclipse菜单Help|InstallNewSoftware，点Add，在Name中输入“ADT20.0.3”，在Location里输入https:

//dl-

再有一种就是把ADT20.0.3.zip下载到本地，进行本地安装。

不同之处就是在Add之后，在Location中输入zip包的本地路径即可。

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

6）下载并解压Cordova

Cordova是一个zip包，不需要安装，我们不妨将其解压，并与AndroidSDK放一起。

7）下载jQueryMobile

与Cordova一样，不妨将其解压并与AndroidSDK放一起（好找嘛）。

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文件（记得别双击，用OpenWith|TextEditor）。

7）增加Cordova屏幕支持：

android:

largeScreens="true"

android:

normalScreens="true"

android:

smallScreens="true"

android:

resizeable="true"

android:

anyDensity="true"/>

8）增加Cordova插件配置：

name="android.permission.VIBRATE"/>

name="android.permission.ACCESS_COARSE_LOCATION"/>

name="android.permission.ACCESS_FINE_LOCATION"/>

name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>

name="android.permission.READ_PHONE_STATE"/>

name="android.permission.INTERNET"/>

name="android.permission.RECEIVE_SMS"/>

name="android.permission.RECORD_AUDIO"/>

name="android.permission.MODIFY_AUDIO_SETTINGS"/>

name="android.permission.READ_CONTACTS"/>

name="android.permission.WRITE_CONTACTS"/>

name="android.permission.WRITE_EXTERNAL_STORAGE"/>

name="android.permission.ACCESS_NETWORK_STATE"/>

name="android.permission.GET_ACCOUNTS"/>

name="android.permission.BROADCAST_STICKY"/>

9）为activity节点增加属性：

android:

configChanges="orientation|keyboardHidden"

10）保存AndroidManifest.xml的修改，如图：

11）在assets\www下创建文件index.html，内容如下：

DOCTYPEHTML>

Hello,Cordova.

12）RunAs|AndroidApplication，看看整合的成绩吧（启动AVD时会有点慢，先喝口茶）。

Cordova整合完成，接下来我们把jQueryMobile也给整进去，同理，先假定jQueryMobile解压目录下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，修改文件内容：

DOCTYPEhtml>

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）{

varurl="+p.coords.latitude+","+p.coords.longitude;

$.get（url,function（data,status）{

alert（status+":

"+data）;

}）;

},function（err）{

alert（"查询失败：

"+err.message）;

}）;

}）;

},false）;

ATouch-OptimizedUIFrameworkbuiltwithjQueryandHTML5.