• WIN7下搭建CORDOVA环境


    技术交流群:233513714

    Cordova 环境搭建

    1安装JDK

    工具文件夹中:jdk目录

    1)下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

    设置环境变量:

    JAVA_HOME= C:Program FilesJavajdk1.6.0_45

    JRE_HOME=C:Program FilesJavajdk1.6.0_45jre

    CLASSPATH=.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar

    Path=%ANT_HOME%in;%MAVEN_HOME%in;%JAVA_HOME%in;%SystemRoot%system32;%SystemRoot%;%SystemRoot%System32Wbem;%SYSTEMROOT%System32WindowsPowerShellv1.0;C:Program FilesMySQLMySQL Server 5.5in;D:Program FilesTortoiseSVNin;%ANDROID_HOME% ools;%ANDROID_HOME%platform-tools;C:Program Files odejs

    2 安装APACHE ANT

    工具文件夹中:apache-ant-1.9.4-bin.zip

    下载地址:http://apache.fayea.com/apache-mirror/ant/binaries/

    设置环境变量:

    新建ANT_HOME=E:antapache-ant-1.9.4

    Path中添加:%ANT_HOME%in;

    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-bundlesdk ools和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安装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目录,比如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访问设备。详细的可用插件列表你可以在社区中看到(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) 修改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下的文件会被跟目录(www)下的文件覆盖。(即:如果Merges目录中不存在index.css文件,最终颜色将为红色)

    2) Merges目录中存在对应文件时,platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能。

    12帮助命令

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

    cordova help

    更新命令

    以下语句更新cordova:

    npm update -g cordova

    cordova更新完成后,你还需要更新项目:

    cordova platform update android

    注意:

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

  • 相关阅读:
    css的盒子模型由什么组成?
    div盒子水平、垂直居中
    display:none和visibility:hidden的区别
    创建一个多选框,且和文本关联起来(单击文本就像单击该选框一样)
    Canvas和SVG的不同
    js两个页面之间通过URL传参数
    css a标签去除下划线
    css 设置文本垂直居中
    css 边框圆角的方法
    html 文本框css设置边框圆角
  • 原文地址:https://www.cnblogs.com/cnndevelop/p/6034426.html
Copyright © 2020-2023  润新知