赵工的个人空间

Cordova配置到Android Studio开发环境

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来建立开发环境，有比较复杂的命令行操作过程，然后可以使用Android Studio打开生成的项目，进行AVD模拟或输出apk文件。这个过程需要详述。

1.安装JDK和Android SDK：

无论使用Eclipse还是Android Studio都需要安装Java开发软件包JDK和Android开发软件包Android SDK，好像现在的Eclipse与Android Studio使用的SDK中的SDK Manager和AVD Manager有差别，如果同时需要使用这两种开发平台，就需要安装两套Android SDK，占用比较大的空间，或者以后的版本能够统一，只需要安装一套就够了。

安装完成后，需要设置SDK的环境变量，我将要使用Android Studio来开发，而其使用的SDK默认安装在C:\Users\Administrator\AppData\Local\Android\Sdk中，环境变量设为ANDROID_HOME：

然后需要将C:\Users\Administrator\AppData\Local\Android\Sdk\tools和C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools路径加入到path路径中，可以写为%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

Android Studio的版本变化也比较大，现在是使用android-studio-bundle-162.3871768-windows.exe来安装，是2017年4月发布的最近的版本2.3.1.0。

这个版本安装后，Android Studio界面菜单Tools下并没有Android工具子菜单，所以看不到SDK和AVD管理工具。

关闭界面并重新启动后，界面右下角会出现一个提示：

点击其他的update链接，就会打开Platform and Plugin Updates界面，提示用户进行升级：

点击Update Now按钮后，出现Component Installer界面，升级相关组件：

升级完成后，按Finish按钮，然后退出，再次重新启动Android Studio，等待初始化完成，Tools菜单下就有了Android子菜单，其中包括了AVD Manager、SDK Manager等Android工具，需要安装必须的SDK软件包，设置AVD模拟器并运行成功，Android Studio开发环境设置才算完成。

2.安装Node.js：

Node.js可以到官网上下载，页面上有对应不同平台的版本：

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

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

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

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

3.安装cordova：

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

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

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

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

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

4.建立cordova项目：

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

也可以使用另一种更复杂一些的格式来创建：

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

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

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

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

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

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

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

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

项目文件夹中的platforms子文件夹中就有了相应的目录：

6.项目配置模拟器：

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

如果在Android Studio中已经用AVD Manager建立了AVD模拟器，执行命令时就会显示AVD的名字列表。不过，这并不意味着就不会有问题。下一步在命令行中使用cordova run android指令，出现了错误：

错误说明“Could not find gradle wrapper within Android SDK”，还提示了一个文件夹。打开SDK所在的目录，没有发现tools文件夹中包含有templates子文件夹。在Android开发网站中找到了一个tools_r25.2.3-windows.zip命令行工具包，解压后的目录结构为：

其中就包含了templates文件夹，但版本比我从Android Studio安装得到的版本要低，但也只能复制并覆盖（如果不覆盖因版本不一致会出错）。但这样覆盖后，打开Android Studio会提示有问题，需要再次进行升级并打补丁（patch），几次打开关闭Android Studio软件后，使其能正常工作了，但使用AVD时还会出现一些问题，需要删除后重建AVD。

然后再次执行cordova run android指令：

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

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

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

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

7.输出apk文件：

然后就可以按PhoneGap/Cordova的规范来修改项目的www文件夹中的index.html文件，其中的css、js和img子文件夹中可以放置相关的css、js文件及使用的图片。

然后使用命令

命令行方式很容易输入错误字母，而且一些字母的大小写也有关，不能搞错，否则不能执行。