admin 管理员组文章数量: 887021
2023年12月21日发(作者:怎么能学好编程)
用PhoneGap + jQuery Mobile开发
Android应用
前言 ................................................................................................................................ 2
PhoneGap及jQueryMobile介绍 ..................................................................................... 2
开发环境的搭建 .............................................................................................................. 2
下载并按照 JAVA SDK ........................................................................................................... 2
下载并安装Android SDK ....................................................................................................... 2
创建虚拟设备 ........................................................................................................................ 3
下载并安装Eclipse ................................................................................................................ 4
下载并安装 4
下载并解压Cordova .............................................................................................................. 5
下载jQuery Mobile ................................................................................................................ 5
第一个手机应用 .............................................................................................................. 5
创建工程 ................................................................................................................................ 5
整合 8
整合jQueryMobile ............................................................................................................... 10
制作apk ............................................................................................................................... 13
参考资料 ....................................................................................................................... 16
1
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的就有很多不同的库,如:,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”进行安装(过程会有点长,不如坐下来看一部电影吧),如图:
2
3) 创建虚拟设备(Android Virtual Device)
打开AVD Manager,点击新建(New),如图:
输入虚拟设备名称,选择目标平台(Android 2.2),如图:
3
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里输入/android/eclipse/,确定。
4
再有一种就是把ADT 下载到本地,进行本地安装。不同之处就是在Add之后,在Location中输入zip包的本地路径即可。
安装好之后,Eclipse下会看到Android开发相关的工具按钮,如图:
6) 下载并解压Cordova
Cordova是一个zip包,不需要安装,我们不妨将其解压,并与Android SDK放一起。
7) 下载jQuery Mobile
与Cordova一样,不妨将其解压并与Android SDK放一起(好找嘛)。
4. 第一个手机应用
开发环境至此已经搭建完毕,练练手吧(可不可以不要“hello, Cordova.”):
5
SDK最好选一致的(为什么是2.2?)。
6
这里是程序图标(回头再来换),以及配色方案(无所谓,我们用的HTML+CSS嘛)。
空着,我们用不着。
7
好了,终于结束了(我是说截图结束了,手酸呐)。
现在该整合Cordova了,先假设我们的YofangMobile工程目录为%YofangMob%,而Cordova的解压目录下libandroidexample为%CordovaAnd%(恩恩,我们是开发Android应用嘛,当然以此为准),下面整合:
1) 切换到文件系统,复制%CordovaAnd%到%YofangMob%libs下。
2) 创建文件夹%YofangMob%assetswww。
3) 复制%CordovaAnd%到%YofangMob%assetswww下。
4) 复制文件夹%CordovaAnd%resxml到%YofangMob%res下。
5) 切换到Eclipse,打开我们的,将YofangMobile的基类由Activity改成DroidGap;将onCreate方法里的
setContentView(ty_yofang_mobile);
替换成
l("file:///android_asset/www/");
删除onCreateOptionsMenu方法(修改之后Eclipse会报错,不怕不怕,Ctrl+Shift+O)。修改结果如图:
8
6) 继续,打开文件(记得别双击,用Open With|Text Editor)。
7) 增加Cordova屏幕支持:
android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> 8) 增加Cordova插件配置: android:name="_LOCATION_EXTRA_COMMANDS" /> 9) 为activity节点增加属性: android:configChanges="orientation|keyboardHidden" 10) 保存的修改,如图: 9 11) 在assetswww下创建文件,内容如下:
Hello, Cordova.
12) Run As|Android Application,看看整合的成绩吧(启动AVD时会有点慢,先喝口茶)。
Cordova整合完成,接下来我们把jQuery Mobile也给整进去,同理,先假定jQuery Mobile解压目录下demos为%jQueryMob%:
1) 切换到文件系统,复制文件夹%jQueryMob%css到%YofangMob%assetswww下。
2) 复制文件夹%jQueryMob%js到%YofangMob%assetswww下。
3) 复制文件夹%jQueryMob%docs_assets到%YofangMob%assetswww下。
10
4) 复制%jQueryMob%到%YofangMob%assetswww下。
5) 移动%YofangMob%到%YofangMob%assetswwwjs下。
6) 切换到Eclipse,打开,修改文件内容:
11
alt="jQuery Mobile Framework" />
A Touch-Optimized UI Framework built with jQuery and
HTML5.
Platform: , Version: id="version">
UUID: , Name: id="name">
Width: , Height: id="height">
, Color Depth:
- Overview
data-role="button" data-inline="true">地理位置
data-dividertheme="f">
7) 保存修改,Run As|Android Application。
至此,我们已经可以在虚拟机中看到程序的运行效果了。可以顺利的获取设备信息,并且根据虚拟机的设置不同,还能获得一个国外的地理位置(哈哈,出国了)。
12
结束了吗?不,程序甚至都还没用在我们自己的手机上运行过,怎么能结束?
应该把程序制作成apk安装包对不对?然后安装到手机上,然后。。。
制作签名安装包(尽管菜单上有制作不签名安装包的功能,但我们暂时用不到,相信我)。
13
14
创建一个新的证书,选择证书文件存放位置,以及证书密码 (如果你已经创建了证书,则只需要选择证书文件,并输入一次密码就行了) 。
哈哈,其实除了上面5项,下面的都可以不填。
15
嗯,我比较喜欢放桌面,方便定位(呵呵,喝口茶)。
到这就真的结束了。
apk文件已经在桌面等着你了,还犹豫什么?
5. 附录
JDK6下载:/…/jdk-6u10-rc2-bin-b32-windows-i586-p-12_sep_
Android SDK下载:/sdk/
Eclipse下载:/downloads/
ADT Plugin:/tools/help/
PhoneGap中国:/ (PhoneGap)
PhoneGap官网:/ (PhoneGap+Cordova)
Cordova整合文档:/en/2.1.0/...ed%20with%20Android
jQuery Mobile官网:/
16
版权声明:本文标题:用PhoneGap+jQueryMobile开发Android应用实例 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1703148086h439933.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论