赵工的个人空间

PhoneGap3.0以上版本配置到Eclipse开发环境

PhoneGap最初是Nitobi软件公司为了让使用HTML+CSS+JavaScript的Web开发者能快速开发iPhone手机的App而建立的一个项目，这个名字的意思是“Bridging the gap between the web and the iPhone sdk”，即在web和iPhone开发之间的间隙上架起一座桥梁。因为PhoneGap的成功，后来被Adobe公司收购。PhoneGap的核心代码被贡献给Apache软件基金会，但原来的名字已经不能使用，所以改成了Cordova，据说这是Nitobi软件公司最早所在地的街道名称，新版本的这款软件都是以Cordova命名。而PhoneGap商标的拥有者Adobe公司则在Dreamweaver的CS5.5以上版本中内置了支持PhoneGap功能的开发环境，但这是一款收费软件，所以使用者不多。

Cordova的3.0以上的版本都使用node.js来建立开发环境，有比较复杂的命令行操作过程，然后可以使用Eclipse或Android Studio打开生成的项目，进行AVD模拟或输出apk文件。这个过程需要详述。

1.安装Node.js：

前面已经介绍了Eclipse平台下Android开发环境的搭建，这都是要预先做的工作，特别是要配置环境变量。然后去Node.js官网上下载软件，页面上有对应不同平台的版本：

现在的计算机大多都已是64位的了，一般选择64-bit的.msi格式文件。双击下载的msi文件即可运行安装：

安装过程比较简单，一般只需要设置安装路径，其他采用默认设置，按Next按钮即可：

检查安装是否成功，可以打开windows的Command Prompt，命令行输入node --version：

安装成功就会显示安装的node.js版本号。后面的大量操作都需要在Command Prompt中使用命令行进行。

2.安装cordova：

NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，安装node.js后就可以使用npm命令下载并安装cordova软件。cordova官网上有操作流程，因为版本不同，所以操作流程也可能会有所不同，按官网上操作更好一些。

首先执行npm install -g cordova命令：

有时候速度比较慢，也可以使用一个镜像站点：

如果下载安装完成，就会有很长的提示列表（这里只是截取很小一段）：

安装完成后，可以使用命令cordova -v来看安装的版本信息：

3.建立cordova项目：

cordova安装成功，就可以建立项目。为了管理方便，一般把所有项目建在一个文件夹中，我先在c:盘下建立了node目录放置所有cordova的项目。然后就可以使用cordova create来创建一个complex项目：

也可以使用另一种更复杂一些的格式来创建，其中包括了包名：

然后可以在windows文件夹中看到新建项目的目录结构：

其中www目录中已有index.html及css、js、img子目录，子目录中分别包含index.css、index.js和logo.png文件。但其他目录中基本为空。

4.为项目安装手持终端开发平台：

可以使用命令cordova platform查看支持的手持终端平台。

要为特定项目安装手持终端的开发平台，需要先用cd命令进入这个项目的目录中：

我只对android感兴趣，所以使用命令cordova platform add android：

也可以使用镜像网站的方式。

这个操作正常时比较快，但如果网络有问题，就可能无法下载成功：

我是等到第二天才能正常下载：

这时platforms目录中就有了相应的android子目录：

android子目录中也有多个子目录，其中assets、res、libs、src等都是Android项目的基本子目录，但也有几个特殊的子目录，当然也有AndroidManifest.xml文件。

6.项目配置模拟器：

Android项目一般都先使用AVD模拟器模拟运行，需要设置模拟器。可以先使用命令行cordova run --list检查已经设置的模拟器：

如果在Eclipse或Android Studio中已经用AVD Manager建立了AVD模拟器，执行命令时就会显示AVD的名字列表。有时候下载的SDK软件包版本有问题也会出现错误，需要寻找适合的版本。

然后执行cordova run android指令：

create项目时没有设置Package名字，会自动起名为io.cordova.hellocordova。后面的提示信息为：

虽然有警告信息，但可以正常运行，并会打开另一个Command窗口，运行的是SDK中的tools/emulator-arm.exe：

里面也有警告信息，但可以打开AVD模拟器，并显示cordova项目的默认界面：

这说明cordova项目已经可以在AVD模拟器中正常输出了。

7.在Eclipse中导入项目：

开发Android最常用的的是Eclipse，可以在其中导入前面用cordova命令行产生的项目。因为Cordova产生的项目，Activity都命名为MainActivity，而Eclipse导入项目时会自动以Activity来命名项目，导入多个cordova项目时会因为重名而出现问题，所以最好为每个要导入的cordova项目先建一个目录，并设为workspace，每个项目更换就不会出错：

然后使用File-Import菜单，会打开一个对话框：

在其中选择Android-Existing Android Code Into Workspace，点击Next按钮，打开对话框：

不同版本的cordova产生的项目在其中的显示有些不同，旧版本的只有两个项目，新版本则会产生多个，一般情况下只需要导入platforms/android目录下的MainActivity和platforms/android/CordovaLib目录下的CordovaLib项目。选择后点击Finish按钮：

导入两个项目后，发现MainActivity有错误标识。点击MainActivity，使用菜单Project-Properties打开属性对话框，点击其中的Android，界面右下方有错误提示：

这是因为需要的CordovaLib层次关系有问题，需要先删除，然后再使用Add按钮加入：

点击OK按钮，然后错误就消除了：

然后使用项目的右键菜单中Run As-Android Application就可以在模拟器中运行。并产生界面：

其中assets目录中包含了www子目录，其中包含了index.html、cordova.js、cordova_plugins.js三个文件，还有css、js、img和cordova-js-src子目录，其中包含了网页设计的所需的代码，修改代码就可以完成需要的App设计。

脚本文件cordova.js及相关插件的使用，详见以后的说明。