cordova500环境搭建.docx

上传人:牧羊曲112 文档编号:3154815 上传时间:2023-03-11 格式:DOCX 页数:8 大小:40.53KB
返回 下载 相关 举报
cordova500环境搭建.docx_第1页
第1页 / 共8页
cordova500环境搭建.docx_第2页
第2页 / 共8页
cordova500环境搭建.docx_第3页
第3页 / 共8页
cordova500环境搭建.docx_第4页
第4页 / 共8页
cordova500环境搭建.docx_第5页
第5页 / 共8页
亲,该文档总共8页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《cordova500环境搭建.docx》由会员分享,可在线阅读,更多相关《cordova500环境搭建.docx(8页珍藏版)》请在三一办公上搜索。

1、cordova500环境搭建Cordova 环境搭建 1安装jdk 工具文件夹中:jdk目录 1)下载地址: 设置环境变量: JAVA_HOME= C:Program FilesJavajdk1.6.0_45 JRE_HOME=C:Program FilesJavajdk1.6.0_45jre CLASSPATH=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar Path=%ANT_HOME%bin;%MAVEN_HOME%bin;%JAVA_HOME%bin;%SystemRoot%system32;%SystemRoot%;%SystemRoot

2、%System32Wbem;%SYSTEMROOT%System32WindowsPowerShellv1.0;C:Program FilesMySQLMySQL Server 5.5bin;D:Program FilesTortoiseSVNbin;%ANDROID_HOME%tools;%ANDROID_HOME%platform-tools;C:Program Filesnodejs 2 安装Apache Ant 工具文件夹中:apache-ant-1.9.4-bin.zip 下载地址: 设置环境变量: 新建ANT_HOME=E:antapache-ant-1.9.4 Path中添加:%

3、ANT_HOME%bin; 3安装Android SDK 工具文件夹中:android-环境-64x.zip 运行命令行工具之前,你应该确保你已经安装了目标平台所需的SDK。以Android为例,我们可以到以下网址下载一个安装套件: 点击页面右侧的“Download the SDK ADT Bundle for Windows”下载安装。 当然你也可以逐个下载和配置,不过针对初学者我推荐下载上面的安装套件,省时省力。 其他平台的SDK,请参照官方文档: http:/cordova.apache.org/docs/en/3.4.0/guide_platforms_index.md.html#Pl

4、atform%20Guides 注意: 请把SDK的路径添加到系统环境变量Path中去,总共两个。比如d:adt-bundlesdktools和d:adt-bundlesdkplatform-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、的版本号 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类

6、似C#的命名空间,或Java的包名。 第三个参数指定了应用程序的显示标题。 完成后可以查看Hello目录及其子目录结构 7添加特点平台支持 注意,以下所有命令都要在项目根目录下运行。 首先,你需要添加你所需要支持的平台,比如: cordova platform add android cordova platform add ios 注:貌似ios开发只能在Mac机器上进行,所以上面的add ios不会出现在Windows机器上。 完成后运行以下命令查看: cordova platfrom list 如果以后需要移除Android平台支持,可以运行: cordova platform rm a

7、ndroid 运行platform add或platform rm命令会影响项目目录下的内容。每一个被添加的平台会在项目根目录下的platform下产生一个对应平台的子目录。你可以看到各个平台下也存在www目录,比如platformsandroidassetswww。因为CLI会不断的复制项目根目录下的www中的内容,所以你应确保不要对平台下的www目录中的内容进行修改。如果你实在有这个需求,请参照本章末尾的“Merges目录”。 警告: 如果你使用CLI管理你的项目,请尽量不要更改platforms目录下的任何内容,除非你有明确的把握知道你在做什么。这是因为该目录下的内容会在一些条件下被覆盖

8、。 如果你希望此时能通过针对特定平台的SDK来进行开发,你应该打开那些位于platforms子目录下的内容。这是因为平台相关的一些配置信息是存储在platforms特定子目录下的 8编译应用程序 将生成的android工程导入eclipse中: 打开Eclipse,右击选择import 默认情况下,cordova create脚本将创建一个非常简单的基于Web的应用程序。 运行以下命令编译应用程序: cordova build 或 cordova build android /只针对Andorid平台编译 如果最终提示:BUILD SUCCESSFUL,则编译成功。 实际上build命令对应于

9、以下两个命令: cordova prepare android cordova compile android 这意味着你可以仅执行prepare命令,然后用SDK开发环境去另外编译。 9仿真器中测试 打开Eclipse,选择菜单New-Project-Android-AndroidProject From Existing Code,选择项目根目录为helloplatformsandroid,并确保hello和hello-CordoraLib两个项目均被选中。 如果项目名上有红色的叉叉,则代表有未解决的问题。此时可以尝试: 1) 项目名上点击右键,选择Properties。 2) 选中左侧导

10、航栏中的Android。 3) 在右侧选中对应的目标平台。比如Android4.4。 4) 点击OK。 稍后,在Eclipse中启动Android SDK Manager。如下图: 打开Manger后,点击菜单Tools-Manage AVDs,然后点击Device definitions栏,如下图: 选择一个你想要的仿真器,然后点击Create AVD,接受默认设置即可。完成后你将在列表中看到新建的仿真器。 在列表中选中仿真器,点击窗体右侧的“Start”按钮启动仿真器。 项目名称上点击右键,选择Run As-Android Application,然后耐心等待仿真器加载。 如果你的CPU支

11、持虚拟化技术,你可以参照相关文档进行设置以提高仿真器运行效率。 加载后你就可以通过操作仿真器看到你的第一个Android程序,如下: 或者你也可以在命令行中运行以下命令启动仿真器: cordova emulate android 10添加插件支持 如以上我们看到的,Cordova默认提供的程序界面和功能非常简单。当然你可以根据你的需要,运行标准Web开发技术对页面进行设计。但是当你需要和不同的设备进行通讯交互时,你就需要借助于一些插件,以便能够访问Cordova提供的核心API。 一般来说,你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用插件列表你可以在社区中看到。当然

12、你也可以自定义自己的插件。 你可以用CLI搜索可用的插件,比如: cordova plugin search bar code 你可以通过以下命令安装插件,比如: cordova plugin add org.apache.cordova.device /设备API cordova plugin add work-information /网络 cordova plugin add org.apache.cordova.battery-status /电池 cordova plugin add org.apache.cordova.device-motion /加速器 cordova plug

13、in 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.cordo

14、va.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 a

15、dd 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获取

16、插件,这是一个非常通用的做法。你可以在安装时指定版本,比如: cordova plugin add org.apache.cordova.consolelatest cordova plugin add org.apache.cordova.console0.2.1 其中的latest表示获取最新版本。中间用分隔。 如果插件不是在默认库中,而是在其他地方,则你可以指定URL: cordova plugin add 当然你需要先安装git。 11Merge目录 前面提到,一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容,又该怎么办呢? 项目根目录下有

17、一个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的样式为绿色:ba

18、ckground-color:# 00FF00; 仿真器中运行,你会发现最终呈现的结果为绿色。由此我们可知: 1) Merges目录中没有对应文件时,platform下的文件会被跟目录下的文件覆盖。 2) Merges目录中存在对应文件时,platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能。 12帮助命令 通过以下命令查看帮助信息: cordova help 更新命令 以下语句更新cordova: npm update -g cordova cordova更新完成后,你还需要更新项目: cordova platform update android 注意: 因为各版本之间差异较大,执行更新时请事先仔细阅读官方文档,以免发生数据丢失或错误

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号