用PhoneGap+jQueryMobile开发Android应用实例Word文件下载.docx
《用PhoneGap+jQueryMobile开发Android应用实例Word文件下载.docx》由会员分享，可在线阅读，更多相关《用PhoneGap+jQueryMobile开发Android应用实例Word文件下载.docx（18页珍藏版）》请在冰豆网上搜索。
因为网页的开发技术越来越成熟，各种库的适用性，兼容性越来越强，而且也越来越注重用户界面与用户体验的提升，其中的佼佼者有最初的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屏幕支持：
<
supports-screens
android:
largeScreens="
true"
normalScreens="
smallScreens="
resizeable="
anyDensity="
/>
8）增加Cordova插件配置：
uses-permissionandroid:
name="
android.permission.VIBRATE"
android.permission.ACCESS_COARSE_LOCATION"
android.permission.ACCESS_FINE_LOCATION"
android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"
android.permission.READ_PHONE_STATE"
android.permission.INTERNET"
android.permission.RECEIVE_SMS"
android.permission.RECORD_AUDIO"
android.permission.MODIFY_AUDIO_SETTINGS"
android.permission.READ_CONTACTS"
android.permission.WRITE_CONTACTS"
android.permission.WRITE_EXTERNAL_STORAGE"
android.permission.ACCESS_NETWORK_STATE"
android.permission.GET_ACCOUNTS"
android.permission.BROADCAST_STICKY"
9）为activity节点增加属性：
configChanges="
orientation|keyboardHidden"
10）保存AndroidManifest.xml的修改，如图：
11）在assets\www下创建文件index.html，内容如下：
<
!
DOCTYPEHTML>
html>
head>
title>
Cordova<
/title>
scripttype="
text/javascript"
charset="
utf-8"
src="
cordova-2.1.0.js"
>
/script>
/head>
body>
h1>
Hello,Cordova.<
/h1>
/body>
/html>
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>
metacharset="
metaname="
viewport"
content="
width=device-width,initial-scale=1"
jQueryMobile:
DemosandDocumentation<
linkrel="
stylesheet"
href="
css/themes/default/jquery.mobile-1.2.0.css"
_assets/css/jqm-docs.css"
js/jquery.js"
js/jquery.mobile-1.2.0.js"
_assets/js/jqm-docs.js"
js/cordova-2.1.0.js"
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）;
divdata-role="
page"
class="
type-home"
content"
<
pclass="
jqm-version"
/p>
divclass="
content-secondary"
<
divid="
jqm-homeheader"
<
h1id="
jqm-logo"
imgsrc="
_assets/images/jquery-logo.png"
alt="
jQueryMobileFramework"
p>
ATouch-OptimizedUIFrameworkbuiltwithjQueryandHTML5.<
/div>
intro"
h4>
Platform:
spanid="
platform"
&
nbsp;
/span>
Version:
version"
&
/h4>
UUID:
uuid"
Name:
name"
Width:
width"
Height:
height"
ColorDepth:
colorDepth"
uldata-role="
listview"
data-inset="
data-theme="
c"
data-dividertheme="
f"
lidata-role="
list-divider"
Overview<
/li>
li>
ahref="
javascript:
location.self;
id="
location"
data-role="
button"
data-inline="
地理位置<
/a>
/ul>
--/content-primary-->
footer"
footer-docs"
copy;
2012jQueryFoundationandothercontributors<
7）保存修改，RunAs|AndroidApplication。
至此，我们已经可以在虚拟机中看到程序的运行效果了。
可以顺利的获取设备信息，并且根据虚拟机的设置不同，还能获得一个国外的地理位置（哈哈，出国了）。
结束了吗？
不，程序甚至都还没用在我们自己的手机上运行过，怎么能结束？
应该把程序制作成apk安装包对不对？
然后安装到手机上，然后。
。
制作签名安装包（尽管菜单上有制作不签名安装包的功能，但我们暂时用不到，相信我）。
创建一个新的证书，选择证书文件存放位置，以及证书密码（如果你已经创建了证书，则只需要选择证书文件，并输入一次密码就行了）。
哈哈，其实除了上面5项，下面的都可以不填。
嗯，我比较喜欢放桌面，方便定位（呵呵，喝口茶）。
到这就真的结束了。
apk文件已经在桌面等着你了，还犹豫什么？
5.附录
JDK6下载：
AndroidSDK下载：
Eclipse下载：
http:
//www.eclipse.org/downloads/
ADTPlugin：
PhoneGap中国：
（PhoneGap）
PhoneGap官网：
（PhoneGap+Cordova）
Cordova整合文档：
jQueryMobile官网：
升级会员 