使用 Cordova(PhoneGap)构建Android程序

移动终端开发随着智能手机的普及变得越来越热,什么项目都想移动一把,但反观要去学这些各个终端的控件使用,实属不易,又特别是每个终端的控件及所用语言都各不相同,使得这种学习变得更加困难.

有没有一种简单的方式能够快速构建移动终端程序并能在各个终端平台上快速打包并正常使用? 答案是肯定的,并且这种框架还不少,本文简单的介绍通过Cordova(原名为phonegap)这个平台构建一个android 程序.

1. 开发环境准备.
   1. 安装JDK,此步骤忽略,各位有意的看官可自行去oracle网站上下载你适合的jdk版本.安装完后请添加系统环境变量”JAVA_HOME”,指向的路径为你刚安装的JDK目录.并将Path环境变量增加上 JAVA_HOME 路径,即在Path环境变量路径末尾增加上 ”;%JAVA_HOME%\bin”.
   2. 下载Adt-bundle-windows软件包,这个是google集成了android sdk的eclipse开发环境. 下载后直接解压即可使用.
   3. 安装node.js, 因Cordova最新版可直接使用node.js来安装,并且每次开发的时候都可以更新到最新的Cordova版本,故本处我们先安装Node.js.可通过官网直接下载.
   4. 安装cordova,在命令行工具中输入”npm install -g phonegap”，成功后再次输入 “npm install -g cordova”，
   5. 配置”ANDROID_HOME”环境变量,将其路径指向你的Android SDK路径,如我本机会设置为”D:\Stady\JAVA\Android\Adt-bundle-windows\sdk”.
   6. 另外,ADT(android 模拟器)会默认创建在 操作系统盘的用户目录下,若想改到其他位置,可以添加一个环境变量 “ANDROID_SDK_HOME”,指向你期望的位置即可.
2. 在正式例子之前,我们先验证环境是否已经ok,可简单通过查看 java/npm 版本命令来在验证是否正常,如 java –version / npm –version.
3. 在以上步骤都ok之后,我们就可以开始Cordova之旅了.
4. 1. 在命令窗口提供cd命令跳转到新项目存放的目录.如 cd D:\Stady\JAVA\Android\Project .
      
   2. 通过命令 Cordova Create 创建一个新项目,最常用的命令可以使用 Cordova 路径 包名 项目名 ,如本处我们将创建一个用于人力资源的APP,将其简称为 HR, 创建项目的命令便可以使用为 cordova create HR com.xiezl.hr HR , 命令执行完后,我们的项目文件大概如下图所示.
      
   3. Cordova 是一个可以跨平台的移动终端解决方案,目录中platforms 就将存放各个平台所独有的文件资源,目前因为我们还没有添加任何平台进去,所以这个目录暂时是空的.本文主要介绍Android环境下的开发,其他平台(IOS,wp等)本人没有尝试过,但感觉应该类似.
   4. 进入到项目解决方案目录后,通过 cordova platform add android 命令添加 android 平台.稍等片刻直到见到如下图所示.
   5. 此时,我们在进入到platform便可见到我们刚添加的android平台,如下图所示.
      
   6. 当完成上面步骤后,我们的基础工作就已经完成了,接下来,我们用Adt-bundle-windows 中的eclipse 来打开我们刚刚创建的项目.通过eclipse中的import命令导入我们刚创建的项目.
      
   7. 导入后,我们的项目在eclipse的效果如上图所示,一共有两个项目,CordovaApp-CordovaLib为lib项目,HR为我们的工作项目.在这个项目中,assets 目录下目前只有一个提示文件,可以通过这个提示文件的辅助方法,将文件过滤器移除后,就可以展现出我们的项目文件.
      
   8. 接下来我们可以尝试去看下 index.html 文件,这个便是我们的程序入口展示界面,我们可以简单的改造一下,假设如下所示.
      
   9. 因为仅仅是测试项目,改造完后,我们通过模拟器来运行这个项目.大概像这个样子.可以清楚的看出我们的app展示的界面就是我们的index.html的内容.我们回到我们项目解决方案目录下,定位到platform\android\bin目录下,可以看到这里有一个HR.apk文件,相信大家已经猜出这个文件是什么了,不妨把这个文件拷贝到手机上去安装后运行下看看什么情况.
      
   10. 经过了以上步骤,我想各位应该能明白怎么使用cordova做android项目了.大家可以自己去尝试一下.
5. 在上面我们简单的介绍了使用Cordova来快速搭建一个android开发项目,例子就先介绍到此,后面我们将通过一个实实在在的真实项目HR,来一起学习如何使用jquery mobile +html5+cordova开发真正的app程序.
   号外,我也是刚开始学习这个东东,所以文中难免会有写疏漏,欢迎各位指出以便共同学习.共同提高.