Cordova开发环境的搭建

jopen 9年前

原文 http://www.cnblogs.com/zivxiaowei/p/Cordova.html

Cordova开发环境的搭建

原文地址: http://imziv.com/blog/article/read.htm?id=66

Cordova为目前做混合式开发中比较受欢迎的一个解决方案了，并且拥有比较丰富的插件资源。本文介绍了Cordova开发的环境搭建过程。由于Cordova命令行工具发布在了npm包管理平台上，npm为nodejs内置的包管理工具，所以安装cordova前需要先确认你是否已经安装过 Nodejs。

Nodejs安装

打开 Nodejs 官网下载页，根据自己当前的操作系统平台，选择对应的nodejs版本，下载完后直接点击安装程序，下一步完成即可。测试nodejs安装，打开控制台，输入：

$ node -v // 查看node版本 $ npm -v // 查看npm版本

如果控制台成功输出当前程序安装的版本，那么你已经安装成功了。

Nodejs版本管理工具(Nvm)

由于Nodejs目前的更迭速度很快，有时候项目组人员的版本可能各不相同，为了避免出现不必要的问题，尽量统一管理node的版本，所以我们需要 nvm 这样一个版本管理工具，来轻松的达到自由切换nodejs和npm版本的问题。

Linux平台，Mac安装和更新

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

或者

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

打开控制台输

nvm --version // 查看nvm版本

如果成功输出，那么nvm就安装成功了。更多的nvm可以在控制台通过nvm --help查看。

当然如果发现控制台找不到nvm这个全局变量的话，那么我们可以尝试手动添加的方式。

打开~/.bashrc, ~/.profile, ~/.bash_profile, 或者~/.zshrcc文件，在文件后面添加变量环境导出的代码：

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

同样的，进行完变量导出后，可通过上面的nvm --version查看安装结果。

windows安装

nvm提供了windows上的安装器，可以在这里下载 , 然后直接点击安装即可。

Cordova安装

好了，搭建完这些基本工具后，终于可以安装cordova了。

在OSX或者Linux平台：

$ sudo npm install -g cordova

Windows平台:

C:\>npm install -g cordova

同样的，安装完成后，可以通过

$ cordova -v

命令查看安装结果。成功输出当前的cordova版本，那么你就安装成功了。

创建Cordova项目和模拟器运行

切换到你的workspace目录，执行

$ cordova create hello com.example.hello HelloWorld

这个命令会帮我们自动在workspace目录下创建一个名为hello(即第一个参数）的文件夹，里面会包含几个子文件目录，第二个参数com.example.hello即为项目包的一个标识符，就像java项目中的某个包名一样。当然你可以在创建的时候就添加上去，如果不添加，cordova会帮你自动生成，而你之后可以在根目录下的config.xml下手动去更改这个项目标识名称。最后一个HelloWord为程序显示的标题名称。同样如果不写cordova会自动生成，也可以在config.xml下手动配置。创建完后，我们一个可以看到workspace下为我们生成的这个项目目录以及相关初始化文件。

添加运行平台：

$ cordova platform add android // 安卓 $ cordova platform add ios // 苹果 $ cordova platform add wp8 // wp8

查看添加的运行平台：

$ cordova platform ls

构建命令：

$ cordova build // 自动构建所以你添加的平台 $ cordova build platformName // 根据平台名称构建 $ cordova build android // 构建安卓平台

在模拟器运行安卓（这里假设你电脑装了安卓SDK的环境）

$ cordova emulate android

另外，你也可以直接连上你的手机直接测试，运行：

$ cordova run android

运行命令后，程序会自动构建初始化，并打开模拟器，然后运行当前的程序。

安装安卓SDK

上面的运行示例中直接假设你已经安装好了安卓的运行环境，如果没有安装的话，那么可以参考下面的教程。

下载安装

打开安卓SDK安装的页面，当然如果你没有使用Android Studio的话，那么就直接点击下载SDK, 下载完后直接解压到一个例如andoid-sdk的目录下面即可。

解压完后，我们可以切换到解压文件下android-sdk/tools目录下，我们可以通过./android命令运行SDK程序，运行后，应该就会打开一个SDK管理界面，然后根据所需下载相应版本的SDK。由于谷歌被墙，所以如果你身边的同事已经有安卓开发环境的话，最好直接从他们那边拷贝环境即可，不然这个非常难下载。

配置SDK环境变量

上面我们安装完后，可以在tools目录下通过命令直接打开SDK管理工具，但是为了更方便的全局访问，我们给它添加全局变量。在OSX或者Linux下，我们打开或者创建~/.bash_profile文件，然后添加如下代码：

export PATH=${PATH}:/Users/ziv/Documents/development-android/android-sdk/platforms:/Users/ziv/Documents/development-android/android-sdk/tools

以上是我电脑上面配置的实例代码。配置好后，在控制台直接输入：android命令，如果成功打开SDK管理工具，那么就成功了。至于windows的环境变量配置，这里就不多说了。

创建模拟器

成功安装完SDK管理工具后，我们需要创建一个模拟器：

运行android命令，打开包管理工具
选择菜单上面的tools -> Manage AVDs
在模拟器管理界面选择create
根据你所要的SDK版本，设备，硬件参数来创建一个模拟器
填写完毕后点击OK即可

配置好这一切后，我们再用cordova emulate android命令启动模拟器。模拟器如果成功启动，则会直接打开我们的这个HelloWorld应用。在使用途中我们会发现，安卓SDK自带的模拟器相当的卡顿，反应异常慢，所要跟安卓同事交流后，他们推荐我使用 Genymotion .

Genymotion模拟器的安装使用

打开 genymotion 的下载页面，这里我们需要下载个人版本的genymotion, 因为其他版本需要收费，另外你要先在这个网站注册一个账号。

下载Genymotion完并安装后，点击运行发现出现了无法运行的情况，提示你需要安装 VirtualBox ，因为Genymotion依赖VirtualBox虚拟机, 所以我们打开 VirtualBox , 找到下载按钮点击下载安装包程序，下载完成后直接点击安装即可。

安装完成后，运行Genymotion, 然后点击add，创建一个模拟器，如图

图中的Custom Phone则为我已经创建好的。创建好后，点击start即可。如果发现启动时VirtualBox出现无法启动并抛出类似权限异常的情况下，我们可以通过如下命令赋权：

$ sudo chmod -R 777 /Applications $ sudo chmod -R 777 /Applications/VirtualBox.app

然后重新启动。正常情况下，genymotion会打你之前添加的模拟器，然后在cordova中运行genymotion模拟器，直接通过运行如下命令：

$ cordova run android

程序会自动在genymotion中运行起来。

Cordova开发环境的搭建