2.1 开发环境的搭建

无论是进行哪种语言的开发，最先要做的都是配置相应的开发环境，Cordova自然也不例外。本节将会以安卓为例介绍Cordova开发环境搭建的方法，在其他平台上的搭建方法也与此类似。

2.1.1 安卓开发环境的搭建

在搭建安卓开发环境之前，首先要做的是安装和配置JDK（Java Development Kit），它是SUN公司为Java开发者提供的编译工具，可以在百度搜索JDK之后到Oracle官网（http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk8-downloads-2133151-zhs.html）下载，如图2-1所示。

图2-1 在百度中搜索JDK或官网下载

步骤01 在官网中最下面两个版本分别是Windows32位和64位，下载前先选中上方的“接受许可协议”，然后点击相应版本右侧的链接，如图2-2所示。下载后的文件名和文件大小如图2-3所示。

图2-2 选择下载JDK

图2-3 下载后JDK

步骤02 双击运行安装程序，得到如图2-4所示的界面，点击“下一步”按钮继续安装。

图2-4 欢迎界面

步骤03 继续点击“下一步”按钮，JDK开始安装。稍等几分钟后，JDK安装完毕，得到如图2-5所示的界面。接下来可以点击“后续步骤”按钮查看JDK配置环境变量的方法。

图2-5 JDK安装完成

步骤04 在“计算机”图标上点击鼠标右键，在弹出的快捷菜单中选择“属性”命令，打开如图2-6所示的界面。选中左侧的“高级系统设置”选项，就弹出如图2-7所示的对话框。

图2-6 选择“高级系统设置”

图2-7 点击“环境变量”按钮

步骤05 在某些系统中还要选中“高级”选项卡才能得到图2-7所示的界面，进入之后点击底部的“环境变量”按钮就可以对环境变量进行设置了，如图2-8所示。

图2-8 在此处对环境变量进行设置

步骤06 新建一个系统变量，命名为JAVA_HOME，其中的内容为：C:\Program Files\Java\jdk1.7.0_51（一定注意这个后面没有分号）。再新建环境变量classpath，内容为：.; %java_home%\lib。之后还要在环境变量中找到path变量，在其中加入内容：; %java_home%\bin。

注意：是在原有的内容之后加入而不是替换，如原内容为：

    C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common; C:\Program Files (x86)\
    Intel\iCLS Client\;
    %SystemRoot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem;
    %SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;

那么修改后的内容应为：

    C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common; C:\Program Files (x86)\
    Intel\iCLS Client\;
    %SystemRoot%\system32; %SystemRoot%; %SystemRoot%\System32\Wbem;
    %SYSTEMROOT%\System32\WindowsPowerShell\v1.0\; %java_home%\bin。

在配置环境变量时要注意，环境变量实际上是JDK安装的真实路径，比如说在本例中JDK就被安装在了路径C:\Program Files (x86)\Java\jdk1.8.0_111下，如图2-9所示。

图2-9 JDK的安装路径

步骤07 配置完成后，在CMD中输入javac-version，显示所安装JDK的版本号即可证明环境变量配置成功，如图2-10所示。

图2-10 显示JDK版本号

步骤08 在完成了JDK的配置之后就可以搭建安卓的开发环境了。本来这是非常复杂的一项任务，但是现在安卓官方已经为开发者提供了打包好的集成开发环境，只要去官网下载后解压即可。在浏览器中输入网址“http://developer.android.com/”可以到安卓的开发者网站上下载最新版本的SDK（Software Development Kit，即软件开发工具包），如图2-11所示。

图2-11 在安卓开发者主页获取SDK

步骤09 点击屏幕下方的Get the SDK按钮可以进入如图2-12所示的页面，点击右侧的Download the SDK按钮，选择要下载的SDK版本。

图2-12 进入SDK下载页面

步骤10 选中I have read and agree with the above terms and conditions复选框，根据需要选择是使用32位还是64位的开发环境并点击Download the SDK ADT Bundle for Windows按钮就可以开始下载了。注意，此处只提供了Windows环境下的SDK，如果使用Linux还需要下载Eclipse进行配置。

步骤11 下载之后将它解压并复制到D盘根目录下（也可以是其他位置，但要保证其中不要有中文路径）。打开D:\adt-bundle-windows-x86_64-20131030\eclipse路径下的eclipse即可进入安卓开发环境（如果提示javaw找不到的错误，要修改eclipse.ini中javaw的路径，具体方法可百度）。

步骤12 在菜单中选择File|New|Android Application Project，弹出如图2-13所示的窗口，按照图中的内容进行填写并点击Next按钮。

图2-13 新建一个安卓项目

步骤131 之后一直点击Next按钮，最终来到如图2-14所示的界面，点击Finish按钮完成新项目的创建。

图2-14 完成新项目的创建

步骤14 由于安卓已经为开发者准备了简单的例子，因此当新建项目之后，实际上已经是一个简单且完整的例子了，可以直接编译运行。但是为了运行它，还需要新建一个虚拟机才行。在菜单中选中Window|Android Virtual Device Manager，弹出如图2-15所示的窗口。

图2-15 新建一个虚拟机

步骤15 点击New按钮，新建一个虚拟机，其中在AVD Name一栏填写虚拟机的名称，可以随意填写，由于笔者对HTC发布的Nexus One有着极深的热爱，因此常常会以此来作为名称。Device一栏用来选择合适的设备分辨率以及屏幕尺寸。Target一栏用来选择所使用安卓系统的版本，一般来说SDK中会自带当前最新版本的系统，比如本例中使用的是4.4版本。如果想使用老版本则需要自己去下载。此外还可以在下方的其他选项中去设置虚拟机的内存以及SD卡等内容。点击OK按钮完成创建，如图2-16所示。

图2-16 设置新建虚拟机的各项属性

步骤16 接下来就可以选中刚刚新建好的安卓项目并在其上右击，在弹出的快捷菜单中选择Run AS|Android Application进行测试，结果如图2-17所示。

图2-17 第一个安卓程序

至此，安卓的开发环境就配置成功了，本章的后续内容将逐步介绍一些它的使用技巧和方法，请读者注意实践。

2.1.2 iOS开发环境的搭建

iOS开发环境的配置则要容易很多，当然了，如果想要开发iOS程序，最好有一台mac。

步骤01 打开mac的App Store，找到一款软件Xcode，如图2-18所示。

图2-18 iOS开发工具

步骤02 下载后安装并运行如图2-19所示。

图2-19 Xcode运行后的界面

步骤03 如果是要创建一个全新的项目，就选择第二行Create a new Xcode project，然后打开图2-20所示的界面。

图2-20 新建Xcode项目

步骤04 如果是要开发一般的手机App，选择Single view Application，然后点击Next按钮后如图2-21所示。

图2-21 填写APP信息

步骤05 给项目起一个名字，然后点击Next按钮，选择一个路径后，第一个程序就算是创建完成了，新建APP的工程界面如图2-22所示。

图2-22 新建项目界面

点击左上角的三角按钮，就可以调用模拟器运行程序了，只不过这个程序什么都没有添加，能看到的只有一个白色背景。因为本书并不是要讲解iOS编程，所以就不做过多地介绍了。

另外，因为要在mac上面书写JavaScript和HTML的代码，建议读者再去下载一个其他的编程工具，只要能编写JavaScript和HTML的代码即可，个人比较推荐HBuilder，如图2-23所示。下载地址：http://www.dcloud.io/index.html。

图2-23 HBuilder

2.1.3 Cordova的配置

为了提高运行速度和降低开发者的工作量，Cordova在3.0.0版本之后采用了全新的架构，利用Node.js自动生成项目。目前最新的Cordova版本是6.3.0。

Cordova使用Node.js进行管理。首先要去Node.js的官方网站（http://nodejs.org/）下载最新版本的Node.js并进行安装（这个安装有msi安装版，比较简单，所以本书省略安装步骤）。安装完成后以管理员身份运行Node.js command prompt.exe。

运行Node.js command prompt.exe之后，在命令行中输入命令：npm install -g cordova, Node.js将会自动在网络上寻找Cordova相关组件进行安装。稍等几分钟即可下载完毕，可以进行下一步的操作。在命令行下执行命令cordova create myCordova，创建一个名为myCordovap的项目，完成后出现如图2-24所示的提示。此时在用户目录下已经出现了一个名为myCordovap的文件夹，如图2-25所示。双击打开该文件夹，如图2-26所示。

图2-24 用命令行创建一个新项目

图2-25 新创建的项目可以在用户目录中找到

图2-26 新创建的项目结构

在命令行中继续输入命令：cd myCordova，进入项目文件，然后使用cordova platform add android命令，为当前项目添加Android平台。如果是iOS平台，将android替换为ios即可。如果第一次添加不成功，记得用cordova platform remove android先删除之前添加的Android平台。第一次添加平台会比较慢，如图2-27所示。

图2-27 添加安卓平台（第一次会比较慢）

添加平台后，发现在myCordova\platforms下多了一个android文件夹，此时就可以将整个文件夹导入到Eclipse中进行使用了。导入后包含两个项目，一个是CordovaLib，一个是MainActivity。MainActivity为测试项目，CordovaLib为Cordova的源代码。

还可以使用cordova platform list来查看当前项目，添加一个平台，如果想都编译这些平台，使用cordova build生成可运行的app文件，如Android平台下的apk文件。如果只想生成某个平台，可以用cordova build android（iOS开发要运行cordova build ios）来指定平台进行生成，如图2-28所示。

图2-28 利用Cordova生成完整的安卓apk文件（第一次会比较慢）

Cordova是命令行界面（简称CLI），所以一般把它的操作称为Cordova CLI，具体CLI都有哪些命令，可参考官方文档：http://cordova.apache.org/docs/en/latest/guide/cli/index.html。或者也可以通过cordova help命令来查看。