cordova环境搭建(win7)

admin管理员组

文章数量:1538748

2024年7月21日发(作者：)

Cordova 环境搭建

1安装jdk

工具文件夹中：jdk目录

1）下载地址：

/technetwork/java/javase/downloads/

设置环境变量：

JAVA_HOME= C:Program FilesJavajdk1.6.0_45

JRE_HOME=C:Program FilesJavajdk1.6.0_45jre

CLASSPATH=.;%JAVA_HOME%;%JAVA_HOME%

Path=%ANT_HOME%bin;%MAVEN_HOME%bin;%JAVA_HOME%bin;%Syste

mRoot%system32;%SystemRoot%;%SystemRoot%System32Wbem;%SYSTEMR

OOT%System32WindowsPowerShellv1.0;C:Program

Server

FilesMySQLMySQL

5.5bin;D:Program

FilesTortoiseSVNbin;%ANDROID_HOME%tools;%ANDROID_HOME%platform-

tools;C:Program Filesnodejs

2 安装Apache Ant

工具文件夹中：

下载地址：/apache-mirror/ant/binaries/

设置环境变量：

新建ANT_HOME=E:antapache-ant-1.9.4

Path中添加：%ANT_HOME%bin;

3安装Android SDK

工具文件夹中：android-环境-

运行命令行工具之前，你应该确保你已经安装了目标平台所需的SDK。以Android为

例，我们可以到以下网址下载一个安装套件：

/sdk/

点击页面右侧的“Download the SDK ADT Bundle for Windows”下载安装。

当然你也可以逐个下载和配置，不过针对初学者我推荐下载上面的安装套件，省时省

力。

其他平台的SDK，请参照官方文档：

/docs/en/3.4.0/guide_platforms_#Pla

tform%20Guides

注意：

请把SDK的路径添加到系统环境变量Path中去，总共两个。比如

d:adt-bundlesdktools和d:adt-bundlesdkplatform-tools

4安装

工具文件夹中：

下载地址：/download/

安装完成后，运行 command prompt

出现：Your environment has been set up for using 0.10.36 (x64) and

npm.为正在配置环境变量

运行：node -v 查看的版本号

5安装cordova

在 command prompt中，运行npm install -g cordova

直接运行npm install -g cordova 安装的cordova版本为当前的最高版本

下载指定cordova版本，运行npm install -g cordova@4.2.0，安装的即为4.2.0版

本

6创建应用工程

自定义一个工作空间

进入工作空间并创建应用工程

运行：cordova create hello HelloWorld -d

第一个参数hello，指定目录名称。

第二个参数类似C#的命名空间，或Java的包名。（不太确定，

读者自行鉴别，原文写的是a reversedomain-style identifier）

第三个参数指定了应用程序的显示标题。

完成后可以查看Hello目录及其子目录结构

7添加特点平台支持

注意，以下所有命令都要在项目根目录下运行（用cd命令进入）。

首先，你需要添加你所需要支持的平台，比如：

cordova platform add android

cordova platform add ios

注：貌似ios开发只能在Mac机器上进行，所以上面的add ios不会出现在Windows

机器上。

完成后运行以下命令查看：

cordova platfrom list

如果以后需要移除Android平台支持，可以运行：

cordova platform rm android

运行platform add或platform rm命令会影响项目目录下的内容。每一个被添加的

平台会在项目根目录下的platform下产生一个对应平台的子目录。你可以看到各个平台下

也存在www目录，比如platformsandroidassetswww。因为CLI会不断的复制项目

根目录下的www中的内容，所以你应确保不要对平台下的www目录中的内容进行修改。

如果你实在有这个需求，请参照本章末尾的“Merges目录”。

警告：

如果你使用CLI管理你的项目，请尽量不要更改platforms目录下的任何内容，除非

你有明确的把握知道你在做什么。这是因为该目录下的内容会在一些条件下被覆盖。

如果你希望此时能通过针对特定平台的SDK（比如Eclipse）来进行开发，你应该打

开那些位于platforms子目录下的内容。这是因为平台相关的一些配置信息是存储在

platforms特定子目录下的

8编译应用程序

将生成的android工程导入eclipse中：

打开Eclipse，右击选择import

默认情况下，cordova create脚本将创建一个非常简单的基于Web的应用程序。

运行以下命令编译应用程序：

cordova build 或 cordova build android //只针对Andorid平台编译

如果最终提示：BUILD SUCCESSFUL，则编译成功。

实际上build命令对应于以下两个命令：

cordova prepare android

cordova compile android

这意味着你可以仅执行prepare命令，然后用SDK开发环境去另外编译。

9仿真器中测试

打开Eclipse，选择菜单New->Project->Android->AndroidProject From Existing

Code，选择项目根目录为helloplatformsandroid，并确保hello和hello-CordoraLib

两个项目均被选中。（需要选中hello-CorodoraLib项目是因为这个项目将取代传统的.jar

文件）

如果项目名上有红色的叉叉，则代表有未解决的问题。此时可以尝试：

1） 项目名上点击右键，选择Properties。

2） 选中左侧导航栏中的Android。

3） 在右侧选中对应的目标平台。比如Android4.4。

4） 点击OK。

稍后，在Eclipse中启动Android SDK Manager。如下图：

打开Manger后，点击菜单Tools->Manage AVDs…，然后点击Device definitions

栏，如下图：

选择一个你想要的仿真器，然后点击Create AVD，接受默认设置即可。完成后你将

在列表中看到新建的仿真器。

在列表中选中仿真器，点击窗体右侧的“Start”按钮启动仿真器（启动提示窗口中点

击Launch即可）。

项目名称上点击右键，选择Run As->Android Application，然后耐心等待仿真器加

载。

如果你的CPU支持虚拟化技术，你可以参照相关文档进行设置以提高仿真器运行效

率。

加载后你就可以通过操作仿真器看到你的第一个Android程序，如下：

或者你也可以在命令行中运行以下命令启动仿真器：

cordova emulate android

10添加插件支持（原文:Add Plugin Features）

如以上我们看到的，Cordova默认提供的程序界面和功能非常简单。当然你可以根据

你的需要，运行标准Web开发技术对页面进行设计。但是当你需要和不同的设备进行通

讯交互时，你就需要借助于一些插件，以便能够访问Cordova提供的核心API。

一般来说，你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用

插件列表你可以在社区中看到（/）。当然你也可以自定义自己

的插件。

你可以用CLI搜索可用的插件，比如：

cordova plugin search bar code

你可以通过以下命令安装插件，比如:

cordova plugin add //设备API

cordova plugin add k-information //网络（事件）

cordova plugin add y-status //电池（事件）

cordova plugin add -motion //加速器

cordova plugin add -orientation //罗盘

cordova plugin add ation //定位

cordova plugin add //摄像头

cordova plugin add -capture //媒体文件处理

cordova plugin add //媒体文件处理

cordova plugin add //文件访问

cordova plugin add -transfer //文件传输

cordova plugin add s //对话框

cordova plugin add ion //

cordova plugin add ts //

cordova plugin add ization //

cordova plugin add screen //

cordova plugin add rowser //

cordova plugin add e

你可以用以下命令查看所有已经安装的插件

cordova plugin ls

使用以下命令删除插件：

cordova plugin rm e

震动

联系人

全球化

闪屏

打开新的浏览器窗

调试控制台

口

//

Plugin add高级选项

上面的安装方式是从库中按照id获取插件，这是一个非常通用

的做法。你可以在安装时指定版本，比如：

cordova plugin add e@latest

cordova plugin add e@0.2.1

其中的latest表示获取最新版本。中间用@分隔。

如果插件不是在默认库中，而是在其他地方，则你可以指定URL：

cordova plugin add /apache/

当然你需要先安装git。

11Merge目录

前面提到，一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你

确实需要为某个平台定制一些内容，又该怎么办呢？

项目根目录下有一个merges目录。我们以一个实例来讲解：

1） 修改wwwcss目录下的文件，设置ed的样式为红

色： background-color:#FF0000;

2） 修改platformsandroidassetswwwcss中的文件，设

置.ed的样式为蓝色：background-color:#0000FF;

3） 在mergesandroid目录下新建一个css目录。

复制wwwcss中的文件到该目录下。

修改该目录下的文件中的.ed的样式为绿色：

background-color:# 00FF00;

仿真器中运行，你会发现最终呈现的结果为绿色。由此我们可知：

1） Merges目录中没有对应文件时，platform下的文件会被跟目录（www）下的文

件覆盖。（即：如果Merges目录中不存在文件，最终颜色将为红色）

2） Merges目录中存在对应文件时，platform下的文件会被merges下的文件覆盖。

可见Merges目录主要用于为平台定制功能。

12帮助命令

通过以下命令查看帮助信息:

cordova help

更新命令

以下语句更新cordova：

npm update -g cordova

cordova更新完成后，你还需要更新项目：

cordova platform update android

注意：

因为各版本之间差异较大，执行更新时请事先仔细阅读官方文档，以免发生数据丢失

或错误

本文标签： 目录平台命令运行