WIN7下搭建CORDOVA环境
Cordova 环境搭建
1安装JDK
工具文件夹中:jdk目录
1)下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html
设置环境变量:
JAVA_HOME= C:\Program Files\Java\jdk1.6.0_45
JRE_HOME=C:\Program Files\Java\jdk1.6.0_45\jre
CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
Path=%ANT_HOME%\bin;%MAVEN_HOME%\bin;%JAVA_HOME%\bin;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\MySQL\MySQL Server 5.5\bin;D:\Program Files\TortoiseSVN\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;C:\Program Files\nodejs\
2 安装APACHE ANT
工具文件夹中:apache-ant-1.9.4-bin.zip
下载地址:http://apache.fayea.com/apache-mirror/ant/binaries/
设置环境变量:
新建ANT_HOME=E:\ant\apache-ant-1.9.4
Path中添加:%ANT_HOME%\bin;
3安装ANDROID SDK
工具文件夹中:android-环境-64x.zip
运行命令行工具之前,你应该确保你已经安装了目标平台所需的SDK。以Android为例,我们可以到以下网址下载一个安装套件:
http://developer.android.com/sdk/index.html
点击页面右侧的“Download the SDK ADT Bundle for Windows”下载安装。
当然你也可以逐个下载和配置,不过针对初学者我推荐下载上面的安装套件,省时省力。
其他平台的SDK,请参照官方文档:
http://cordova.apache.org/docs/en/3.4.0/guide_platforms_index.md.html#Platform%20Guides
注意:
请把SDK的路径添加到系统环境变量Path中去,总共两个。比如d:\adt-bundle\sdk\tools和d:\adt-bundle\sdk\platform-tools
4安装NODE.JS
工具文件夹中:nodejs.zip
下载地址:http://nodejs.org/download/
安装完成后,运行Node.js command prompt
出现:Your environment has been set up for using Node.js 0.10.36 (x64) and npm.为正在配置环境变量
运行:node -v 查看node.js的版本号
5安装CORDOVA
在Node.js 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 com.example.hello HelloWorld -d
第一个参数hello,指定目录名称。
第二个参数com.example.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目录,比如platforms\android\assets\www。因为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,选择项目根目录为hello\platforms\android,并确保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访问设备。详细的可用插件列表你可以在社区中看到(http://plugins.cordova.io/)。当然你也可以自定义自己的插件。
你可以用CLI搜索可用的插件,比如:
cordova plugin search bar code
你可以通过以下命令安装插件,比如:
cordova plugin add org.apache.cordova.device //设备API
cordova plugin add org.apache.cordova.network-information //网络(事件)
cordova plugin add org.apache.cordova.battery-status //电池(事件)
cordova plugin add org.apache.cordova.device-motion //加速器
cordova plugin add org.apache.cordova.device-orientation //罗盘
cordova plugin add org.apache.cordova.geolocation //定位
cordova plugin add org.apache.cordova.camera //摄像头
cordova plugin add org.apache.cordova.media-capture //媒体文件处理
cordova plugin add org.apache.cordova.media //媒体文件处理
cordova plugin add org.apache.cordova.file //文件访问
cordova plugin add org.apache.cordova.file-transfer //文件传输
cordova plugin add org.apache.cordova.dialogs //对话框
cordova plugin add org.apache.cordova.vibration //震动
cordova plugin add org.apache.cordova.contacts //联系人
cordova plugin add org.apache.cordova.globalization //全球化
cordova plugin add org.apache.cordova.splashscreen //闪屏
cordova plugin add org.apache.cordova.inappbrowser //打开新的浏览器窗口
cordova plugin add org.apache.cordova.console //调试控制台
你可以用以下命令查看所有已经安装的插件
cordova plugin ls
使用以下命令删除插件:
cordova plugin rm org.apache.cordova.console
Plugin add高级选项
上面的安装方式是从registry.cordova.io库中按照id获取插件,这是一个非常通用的做法。你可以在安装时指定版本,比如:
cordova plugin addorg.apache.cordova.console@latest
cordova plugin addorg.apache.cordova.console@0.2.1
其中的latest表示获取最新版本。中间用@分隔。
如果插件不是在默认库中,而是在其他地方,则你可以指定URL:
cordova plugin addhttps://github.com/apache/cordova-plugin-console.git
当然你需要先安装git。
11MERGE目录
前面提到,一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容,又该怎么办呢?
项目根目录下有一个merges目录。我们以一个实例来讲解:
1) 修改www\css目录下的index.css文件,设置event.received的样式为红色: background-color:#FF0000;
2) 修改platforms\android\assets\www\css中的index.css文件,设置.event.received的样式为蓝色:background-color:#0000FF;
3) 在merges\android目录下新建一个css目录。
复制www\css中的index.css文件到该目录下。
修改该目录下的index.css文件中的.event.received的样式为绿色:background-color:# 00FF00;
仿真器中运行,你会发现最终呈现的结果为绿色。由此我们可知:
1) Merges目录中没有对应文件时,platform下的文件会被跟目录(www)下的文件覆盖。(即:如果Merges目录中不存在index.css文件,最终颜色将为红色)
2) Merges目录中存在对应文件时,platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能。
12帮助命令
通过以下命令查看帮助信息:
cordova help
更新命令
以下语句更新cordova:
npm update -g cordova
cordova更新完成后,你还需要更新项目:
cordova platform update android
注意:
因为各版本之间差异较大,执行更新时请事先仔细阅读官方文档,以免发生数据丢失或错误
WIN7下搭建CORDOVA环境的更多相关文章
- win7下搭建PHP环境
一.安装软件 1.apache下载地址:http://httpd.apache.org/download.cgi 2.php下载地址:http://windows.php.net/download/ ...
- mac下搭建cordova开发环境
Apache Cordova 原名叫PhoneGap.是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.PhoneGap最初由Nitobi开发,2011年 ...
- win7下android开发环境搭建(win7 64位)
win7下android开发环境搭建(win7 64位) 一.安装 JDK 下载JDK最新版本,下载地址如下: http://www.oracle.com/technetwork/java/jav ...
- Win7下搭建Go语言开发环境
Win7下搭建Go语言开发环境 1 下载适合window版本的Go安装包,下载地址http://code.google.com/p/go/downloads/list 2 下载适合window本本的L ...
- Pinpoint在Win7下搭建
Pinpoint在Win7下搭建 注:原创作品,未经允许严禁转载 对于Pinpoint是什么这个问题,在此不做任何讨论,因此本篇文章适用人群为了解Pinpoint相关基础理论知识,需要进行Window ...
- Linux 14.04lts 环境下搭建交叉编译环境arm-linux-gcc-4.5.1
交叉编译工具链是为了编译.链接.处理和调试跨平台体系结构的程序代码,在该环境下编译出嵌入式Linux系统所需要的操作系统.应用程序等,然后再上传到目标板上. 首 先要明确gcc 和arm-linux- ...
- Sublime Text 2下搭建Python环境常见错误
Sublime Text 2下搭建Python环境时,最容易出的错误就是Python环境配置错误,导致build(Ctrl+B)后没有任何反应. 关于Python编程环境的配置,网上很容易搜索到.先默 ...
- Android学习——windows下搭建Cygwin环境
在上一篇博文<Android学习——windows下搭建NDK_r9环境>中,我们详细的讲解了在windows下进行Android NDK开发环境的配置,我们也讲到了在NDk r7以后,我 ...
- Android学习——windows下搭建NDK_r9环境
1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...
随机推荐
- memo的一般方法
str := '好时代卡卡卡的水平佛单师傅开锁'; Memo1.Lines.Add(str); // 在最后加一行字符串 Memo1.Lines.Delete(x); // 删除x+1行字符串 Mem ...
- 10款html5开发工具,实用+好用
利用HTML5工具不仅可以帮助设计师和开发者创建更具吸引力的网站,还能增加网站的可用性和可访问性.本文收集了10款HTML5开发工具让你在网页中搭建特效.动画.视频.音频等诸多功能,为你节省更多开发时 ...
- 不安装oracle,使用plsql连接oracle
通常企业开发时,数据库是不会在我们本地安装的(废话),所以使用plsql时,没必要的话,我们尽量不去安装oracle,太大了: 接下来说一下本人plsql,不安装oracle的使用步骤: 1.个人本地 ...
- display:inline-block 和float:left 的区别
display:inline-block 和float:left 的区别 display是指显示状态,float是针对块级元素的浮动. 使用inline-block:控制元素的垂直对齐跟横向排列元 ...
- swift 命名,字符串
命名: let numberOfDogs = 6 +2; 字符串连接: let finishedMessage = username + "xx" + password; 字符串 ...
- 《嫌疑人X的献身》书评
<嫌疑人X的献身>是日本著名推理小说作家东野圭吾的代表作之一.1985年东野圭吾以一本<放学后>出道,出道初期善于写精巧细致的本格推理,后期文笔愈发老辣.简练.2005年东野圭 ...
- SPRING 标签库
打造专属自己的淘宝旺铺装修店铺优化商品推广网站客服工作物流发货 如果这个User的宿舍在Gryffindor(Gryffindor是哈利·波特在Hogwarts的宿舍——译者注), 那么“House” ...
- SQLite常用命令总结
1) 创建数据库文件: >SQLite3 d:\test.db 回车 就生成了一个test.db在d盘. 这样同时也SQLite3挂上了这个test.db 2) 用.help可以看看有什么命令 ...
- 【转】最佳Restful API 实践
原文转自:https://bourgeois.me/rest/ REST APIs are a very common topic nowaday; they are part of almost e ...
- nginx 之 grok 过滤
简介 前面我们的nginx日志编码使用的json,logstash直接输入预定义好的 JSON 数据,这样就可以省略掉 filter/grok 配置,但是在我们的生产环境中,日志格式往往使用的是普 ...