Cordova开发环境搭建

Cordova的环境搭建

此讲解主要基于Android环境搭建 Author: laoXu

---

（一）安装Cordova前提环境

笔者基本的JAVA、Android、Gradle等环境变量都已安装,笔者认为这些环境变量应该是每一个Android开发人员必备的开发环境

---

ANT的安装

首先需要安装Ant，并且配置%ANT_HOME%的环境变量，如果没有ANT则会报Error “executing command ‘ant’”错。

1、下载ant，ant下载的官方地址:http://ant.apache.org/

2、安装ant,笔者的ant安装目录为：D:\workApp\apache-ant-1.9.7

3、配置ant的环境变量：

>Ant环境变量：
ANT_HOME
D:\workApp\apache-ant-1.9.7

>Path环境变量中添加：
%ANT_HOME%\bin;

4、验证ANT环境变量的配置：

>在控制台输入如下命令即可查看当前ant显示出的信息
ant -h 
ant -version

---

安装node.js

1、下载node.js，node.js下载的官方地址：https://nodejs.org/en/

2、下载完成后点击可执行文件去一步一步的安装即可,笔者在安装的过程中总是失败，如下图：

3、如果安装失败的话可以有第二种方式安装:

- 第一步：

- 1、去官网的库中去下载压缩文件

- 2、下载地址：http://nodejs.org/dist/npm/


- 第二步：

- 1、解压npm文件后会生成node_modules文件与npm.cmd指令文件,把在官网下载的node.exe也放在同个目录，然后就可以配置你的环境变量

4、安装完成后，接下来就来配置node.js的环境变量(笔者的node.js安装目录为：D:\workApp\npm-1.4.9):

>NODEJS_MODULE指定的是node_modules目录：
NODEJS_MODULE
D:\workApp\npm-1.4.9\node_modules

>NODEJS_PATH指定的是我本地的nodejs目录:
NODEJS_PATH
D:\workApp\npm-1.4.9

>Path环境变量中添加：
%NODEJS_MODULE%;%NODEJS_PATH%;

5、验证node.js环境变量的配置:

>在控制台输出如下命令即可看到node和npm的输出信息
node -v 
node -h

npm -v
npm -h

---

安装Cordova

1、在命令行输出如下命令即可：

1、输入如下命令则会在nodejs默认安装的目录去下载cordova
>npm install -g cordova

2、如果需要制定目录则需要换到当前的目录下（如:需要安装到D盘下的test文件夹中）
>cd D：/test
>npm install -g ***

3、在安装angular.js时可以使用如上步骤制定文件夹，但是笔者试过安装cordova依旧是
安装在nodejs的默认目录（不过安装在nodejs默认目录更加方便的在命令行操作cordova）

2、如果安装的速度慢的话，可以设置代理：

npm config set proxy http://xx.xx.xx.xx:xxxx 
npm config set https-proxy http://xx.xx.xx.xx:xxxx 
npm config list

---

使用Cordova创建Android项目

1、使用cordova命令时可以使用如下命令查看cordova的命令操作

在控制台输入：
>cordova -h

控制台中将会出现如下说明：
Synopsis

    cordova command [options]

Global Commands
    create ............................. Create a project
    help ............................... Get help for a command
    telemetry .......................... Turn telemetry collection on or off

Project Commands
    info ............................... Generate project information
    requirements ....................... Checks and print out all the requirements
                                            for platforms specified

    platform ........................... Manage project platforms
    plugin ............................. Manage project plugins

    prepare ............................ Copy files into platform(s) for building
    compile ............................ Build platform(s)
    clean .............................. Cleanup project from build artifacts

    run ................................ Run project
                                            (including prepare && compile)
    serve .............................. Run project with a local webserver
                                            (including prepare)

Learn more about command options using 'cordova help '

Aliases
    build -> cordova prepare && cordova compile
    emulate -> cordova run --emulator

Options
    -v, --version ...................... prints out this utility's version
    -d, --verbose ...................... debug mode produces verbose log output for all activity,
    --no-update-notifier ............... disables check for CLI updates
    --nohooks .......................... suppress executing hooks
                                         (taking RegExp hook patterns as parameters)

Examples
    cordova create myApp org.apache.cordova.myApp myApp
    cordova plugin add cordova-plugin-camera --save
    cordova platform add android --save
    cordova requirements android
    cordova build android --verbose
    cordova run android
    cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --al
ias=mykey

2、根据上步的说明我们可以创建应用、下载插件等相关的操作

3、接下来正式开始创建一个Android应用，首先笔者在E盘下创建cordovaApp文件夹去存放创建的项目

4、打开命令行开始创建Android项目，具体命令如下：

跳转到指定的目录下：
>cd cordovaApp

创建一个cordova项目，名称为myapp，包名为com.xsy.app
>cordova create myapp com.xsy.app MyApp

接下来一定要先进入cordova创建的项目再添加Android项目，否者会出现下面的错误提示：
Error: Current working directory is not a Cordova-based project.
>cd myapp
>cordova platforms add android


安装成功，去E:/cordovaApp去看看吧!

5、在E:/cordovaApp下的目录结构如下：

1、hooks目录:
存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，
比如：before_build、after_build。

2、platforms目录:
各个平台的原生代码工程，不要手动修改，因为在build的时候会被覆盖。

3、plugins目录:
插件目录（cordova提供的原生API也是以插件的形式提供的）。

4、www目录：
源代码目录，在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。

6、cordova下载插件

安装插件（以camera插件为例）
>cordova plugin add cordova-plugin-camera

删除插件（以camera插件为例）
>cordova plugin rm cordova-plugin-camera

更新插件
>cordova plugin update

查看所有已经安装的插件
>cordova plugin ls
>cordova plugin list

注：笔者认为Cordova要进行操作是要先进入cordova目录下，且操作那个目录就要加上目录名称,如要下载插件则命令需加上plugin，如：cordova plugin