用PhoneGap+jQueryMobile开发Android应用实例.docx
- 文档编号:5874349
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:18
- 大小:846.36KB
用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> 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> DemosandDocumentation 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.Hello,Cordova.
Platform:
UUID:
Width:
location.self;"id="location"data-role="button"data-inline="true">地理位置
--/content-primary-->
©2012jQueryFoundationandothercontributors