1、因为网页的开发技术越来越成熟,各种库的适用性,兼容性越来越强,而且也越来越注重用户界面与用户体验的提升,其中的佼佼者有最初的Prototype,Yahoo!;现在大行其道的jQuery,ExtJs,Dojo等等。同样,这些库也推出了移动版,而基于jQuery的就有很多不同的库,如:JQ.mobi,jQuery Mobile等等。2. PhoneGap、jQuery Mobile简介PhoneGap是一个基于HTML5+CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。最初PhoneGap仅支持iOS,但随着Android市场份额的恐怖增长,增加了Android的支持,后
2、续又陆续增加了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来开发
3、手机版的网页代码,同时还可以利用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 Virt
4、ual 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包的本地
5、路径即可。安装好之后,Eclipse下会看到Android开发相关的工具按钮,如图:6) 下载并解压CordovaCordova是一个zip包,不需要安装,我们不妨将其解压,并与Android SDK放一起。7) 下载jQuery Mobile与Cordova一样,不妨将其解压并与Android SDK放一起(好找嘛)。4. 第一个手机应用开发环境至此已经搭建完毕,练练手吧(可不可以不要“hello, Cordova.”):SDK最好选一致的(为什么是2.2?)。这里是程序图标(回头再来换),以及配色方案(无所谓,我们用的HTML+CSS嘛)。空着,我们用不着。好了,终于结束了(我是说截图结束
6、了,手酸呐)。现在该整合Cordova了,先假设我们的YofangMobile工程目录为%YofangMob%,而Cordova的解压目录下libandroidexample为%CordovaAnd%(恩恩,我们是开发Android应用嘛,当然以此为准),下面整合:1) 切换到文件系统,复制%CordovaAnd%libscordova-2.1.0.jar到%YofangMob%libs下。2) 创建文件夹%YofangMob%assetswww。3) 复制%CordovaAnd%assetswwwcordova-2.1.0.js到%YofangMob%assetswww下。4) 复制文件夹%
7、CordovaAnd%resxml到%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) 继续,打开Androi
8、dManifest.xml文件(记得别双击,用Open With|Text Editor)。7) 增加Cordova屏幕支持: 8) 增加Cordova插件配置:uses-permission android:name=android.permission.VIBRATEandroid.permission.ACCESS_COARSE_LOCATIONandroid.permission.ACCESS_FINE_LOCATIONandroid.permission.ACCESS_LOCATION_EXTRA_COMMANDSandroid.permission.READ_PHONE_STATE
9、android.permission.INTERNETandroid.permission.RECEIVE_SMSandroid.permission.RECORD_AUDIOandroid.permission.MODIFY_AUDIO_SETTINGSandroid.permission.READ_CONTACTSandroid.permission.WRITE_CONTACTSandroid.permission.WRITE_EXTERNAL_STORAGEandroid.permission.ACCESS_NETWORK_STATE android.permission.GET_ACC
10、OUNTSandroid.permission.BROADCAST_STICKY9) 为activity节点增加属性:configChanges=orientation|keyboardHidden10) 保存AndroidManifest.xml的修改,如图:11) 在assetswww下创建文件index.html,内容如下:htmlheadtitleCordovascript type=text/javascript charset=utf-8 src=cordova-2.1.0.js/script/headbodyh1Hello, Cordova./body/html12) Run A
11、s|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下。4) 复制%jQueryMob%index.h
12、tml到%YofangMob%assetswww下。5) 移动%YofangMob%assetswwwcordova-2.1.0.js到%YofangMob%assetswwwjs下。6) 切换到Eclipse,打开index.html,修改文件内容:DOCTYPE htmlmeta charset=meta name=viewport content=width=device-width, initial-scale=1jQuery Mobile: Demos and Documentationlink rel=stylesheet href=css/themes/default/jquer
13、y.mobile-1.2.0.css_assets/css/jqm-docs.cssjs/jquery.jsjs/jquery.mobile-1.2.0.js_assets/js/jqm-docs.jsjs/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(
14、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) a
15、lert(查询失败: + err.message); ); ); , false);div data-role=page class=type-homecontent div class=content-secondary div id=jqm-homeheader A Touch-Optimized UI Framework built with jQuery and HTML5.introh4Platform:span id=platform /span, Version:version&/h4UUID:uuid, Name:nameWidth:width, Height:he
16、ight, Color Depth:colorDepth ul data-role=listview data-inset= data-theme=c data-dividertheme=fli data-role=list-dividerOverviewlia href=javascript:location.self; id=location data-role=button data-inline=地理位置/ul-/content-primary-footerfooter-docscopy; 2012 jQuery Foundation and other contributors7)
17、保存修改,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官网:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1