cordova环境搭建(win7).doc

Cordova 环境搭建1安装jdk工具文件夹中：jdk目录1）下载地址：/technetwork/java/javase/downloads/index.html设置环境变量：JAVA_HOME= C:Program FilesJavajdk1.6.0_45JRE_HOME=C:Program FilesJavajdk1.6.0_45jreCLASSPATH=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jarPath=%ANT_HOME%bin;%MAVEN_HOME%bin;%JAVA_HOME%bin;%SystemRoot%system32;%SystemRoot%;%SystemRoot%System32Wbem;%SYSTEMROOT%System32WindowsPowerShellv1.0;C:Program FilesMySQLMySQL Server 5.5bin;D:Program FilesTortoiseSVNbin;%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools;C:Program Filesnodejs2 安装Apache Ant工具文件夹中：apache-ant-1.9.4-bin.zip下载地址：/apache-mirror/ant/binaries/设置环境变量：新建ANT_HOME=E:antapache-ant-1.9.4Path中添加：%ANT_HOME%bin;3安装Android SDK工具文件夹中：android-环境-64x.zip运行命令行工具之前，你应该确保你已经安装了目标平台所需的SDK。以Android为例，我们可以到以下网址下载一个安装套件：/sdk/index.html点击页面右侧的“Download the SDK ADT Bundle for Windows”下载安装。当然你也可以逐个下载和配置，不过针对初学者我推荐下载上面的安装套件，省时省力。其他平台的SDK，请参照官方文档：/docs/en/3.4.0/guide_platforms_index.md.html#Platform%20Guides注意：请把SDK的路径添加到系统环境变量Path中去，总共两个。比如d:adt-bundlesdktools和d:adt-bundlesdkplatform-tools4安装Node.js工具文件夹中：nodejs.zip下载地址：/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 cordova4.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 androidcordova 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 androidcordova 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 android10添加插件支持（原文: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 /设备APIcordova plugin add work-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.consolePlugin add高级选项上面的安装方式是从registry.cordova.io库中按照id获取插件，这是一个非常通用的做法。你可以在安装时指定版本，比如：cordova plugin add org.apache.cordova.consolelatestcordova plugin add org.apache.cordova.console0.2.1其中的latest表示获取最新版本。中间用分隔。如果插件不是在默认库中，而是在其他地方，则你可以指定URL：cordova plugin add /apache/cordova-plugin-console.git当然你需要先安装git。11Merge目录前面提到，一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容，又该怎么办呢？项目根目录下有一个merges目录。我们以一个实例来讲解：1） 修改wwwcss目录下的index.css文件，设置event.received的样式为红色： background-color:#FF0000;2） 修改platformsandroidassetswwwcss中的index.css文件，设置.event.received的样式为蓝色：background-color:#0000FF;3） 在mergesandroid目录下新建一个css目录。复制wwwcss中的index.css文件到该目录下。修改该目录下的index.css文件中的.event.received的样式为绿色：background-color:# 00FF00; 仿真器中运行，你会发现最终呈现的结果为绿色。由此我们可知：1） Merges目录中没有对应文件时，platform下的文件会被跟