win7下搭建cordova环境

为什么80%的码农都做不了架构师？>>>   

0、概述

cordova，是一个开源的手机应用开发框架，它可以让开发者使用标准网页技术如html5，css以及js来进行跨平台开发,避免不同开发平台的原生开发语言带来的麻烦。

官网:http://cordova.apache.org

文档:http://cordova.apache.org/docs/en/3.5.0/   #截止到2014-7-29,cordova的最新版本是3.5

1、环境准备:

1)安装node.js

这是因为安装cordova时要用到node.js的npm

连接:http://nodejs.org/

下载安装成功之后,打开cmd,进入D盘,创建cordova的工作空间

测试安装结果命令:

node -v

效果图:

2)安装git

用于后面有些插件可能需要用git来下载;

连接:http://git-scm.com/

3)安装ant

下载连接:http://apache.dataguru.cn//ant/binaries/apache-ant-1.9.4-bin.zip 

下载好之后,解压出来,我这里解压到D:\Program Files\apache-ant-1.9.4下,

然后在环境变量中配置变量ANT_HOME,值:D:\Program Files\apache-ant-1.9.4,

在PATH中追加%ANT_HOME%\bin;

注：如果不安装的话后台的操作会报找不到ant;

测试安装效果命令:

ant -v

效果图:

2、安装cordova CLI

安装命令：

npm install -g cordova

回车后，就会开始下载相关的包并安装

ok，测试安装结果命令：

cordova -v

3、创建app

这里创建一个命名为firstApp，id为com.cycle.first的app，放在first文件夹下:

创建命令：

cordova create first com.cycle.firstApp firstApp　-d

创建过程需要下载一些cordova的库，所以得等一下，上面命令中的-d是展示创建过程中的一些细节。

命令执行完后会得到这么一个目录结构的app

./first
./first/config.xml
./first/hooks
./first/hooks/README.md
./first/platforms
./first/plugin
./first/www
./first/www/css
./first/www/img
./first/www/js
./first/www/index.html

4、添加平台

注：添加平台前必须得先安装该平台的sdk,不然的话....#下面的配图是拿别人的...

这里以添加安卓来例子

1)安装sdk

注意：安卓sdk和cordavo版本之间有这么个关系:

• 3.0需要的是android-17（Android 4.2.2）

• 3.1和3.2需要android-18（Android 4.3）

• 3.3、3.4、3.5需要android-19（Android 4.4.2）（同时ant1.8+）

下载安装好adt后，还需要在环境变量中配置变量ANDROID_HOME，值得为sdk所有的目录，

比如我的就安装D:\androidWorkspace\adt\sdk，那就将ANDROID_HOME指向这个目录，并在PATH中

追加%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

注：修改了PATH后需要重启cmd才可以生效。

2)添加平台

接下来的命令都需要在app的次级目录下执行，

进入first

cd first

添加安卓

cordova platform add android
 #添加其他的平台：
 #cordova platform add ios
 #cordova platform add amazon-fireos
 #cordova platform add blackberry10
 #cordova platform add firefoxos

回车后，会开始下载安卓的相关库，等等吧。。。

创建完之后可以用下面这条命令来查看已添加以及可支持添加的平台：

cordova platforms ls

如果想删除某个平台的话，可以这样：

cordova platform rm amazon-fireos
cordova platform remove android

添加之后会./first/platforms下的目录，增加一个相应平台的目录，而删除平台的话，也会将这个目录删除。#慎重#

5、编译app

cordova build

这条命令将编译./firstApp/platforms下所有的平台，如果只想单独编译其中的平台的话，只需要在build上增加该平台名即可。

cordova build　android

貌似头一回编译时都比较慢。。。

编译的过程中，会输出一堆东西。。最后如果看到build successful,就可以了。

实际上，build命令是prepare 以及compile两条命令的缩写。上面这条命令相当于：

 cordova prepare android
 cordova compile android

6、测试一下app吧

1)模拟器上测试：

输入下面命令：

cordova emulate android

但是，查资料说Windows下convert命令冲突，直接“cordova emulate android”会报Error: spawn ENOENT，需要先启动模拟器。

2)浏览器上测试：

输入下面命令：

cordova serve android

然后在浏览器中输入http://localhost:8000　即可看到支行情况。

注:可以打开多个cmd运行同一个app，但是端口会8000开始+1；

3)设备上测试：

插入usb，输入下面命令：

cordova run android

搞掂收工。

转载于:https://my.oschina.net/epaxj/blog/296021