Cordova 环境搭建及使用


简介


Cordova是一个用基于HTMLCSSJavaScript的,用于创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhoneAndroidPalmWP7Blackberry等智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等,此外Cordova拥有丰富的插件,可以调用。


优缺点Cordova 环境搭建及使用_第1张图片


混合型应用可以说是为了弥补上面两种应用开发模式的缺陷而生,它是两者混合的产物,并且尽可能继承了双方的优势:


      首先,它可以让众多Web开发人员几乎零成本地转型成移动应用开发者。


      其次,相同的代码只需针对不同平台进行编译就能实现在多平台的分发,大大提高了多平台开发的效率。而相较于Web应用,开发者可以通过包装好的接口调用大部分常用的系统API


      作为本文所讲的CordovaCordova正是混合型框架中的佼佼者,它基于标准的Web技术——HTMLJavaScriptCSS,用JavaScript包装平台的API供开发者调用,具备强大的编译工具来为不同平台生成应用,同时拥有丰富的第三方资源和产业链。


相信大家都对移动应用开发的框架使用已经有大概了解。接下来就讲述Cordova的环境搭建


 


cordova环境搭建开始之前需要将JavaJdk安装好,环境变量配置步奏如下:


  1. 我的电脑-->属性-->高级系统设置-->环境变量。

    Cordova 环境搭建及使用_第2张图片

    Cordova 环境搭建及使用_第3张图片

  2. 点击环境变量,我们就会看到如下界面:

    Cordova 环境搭建及使用_第4张图片

  3. 配置用户变量:


  1. 新建JAVA_HOME

    C:\Program Files\Java\jdk1.7.0_79;

    Cordova 环境搭建及使用_第5张图片

    Cordova 环境搭建及使用_第6张图片

    B. 新建PATH(如果有直接在Path下添加)

    %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

    Cordova 环境搭建及使用_第7张图片

    Cordova 环境搭建及使用_第8张图片

    C. 新建CLASSPATH

    .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

    Cordova 环境搭建及使用_第9张图片

    Cordova 环境搭建及使用_第10张图片


  1. 测试环境变量配置是否成功:

    开始-->运行-->cmd

    Cordova 环境搭建及使用_第11张图片

    在命令行输入java

    Cordova 环境搭建及使用_第12张图片

    看是否出现如下画面:

    Cordova 环境搭建及使用_第13张图片

    在命令行输入java -version

    Cordova 环境搭建及使用_第14张图片

    能够看到你的jdk安装版本:

    Cordova 环境搭建及使用_第15张图片

    可以看到如上两个画面,说明你的java JDK安装和环境变量配置完成.

     

     


2安装AndroidStudio


Android Studio下载地址:http://www.android-studio.org/


Cordova 环境搭建及使用_第16张图片


第一次只下载了AndroidStudio V1.0,这个版本是没有Android SDK的。从上图所示文件大小可以看出,不带SDK的只有240MB,带SDK的要813MB。不带SDK的版本,直接解压缩,即可打开使用,会有如下的初始化步骤,一路Next之后,会进入Downloading Components步骤,而在这个步骤的时候,会由于网络问题失败。


提示:


请在安装AndroidStudio时,直接下载带有SDK版本的安装包。


Cordova 环境搭建及使用_第17张图片


Cordova 环境搭建及使用_第18张图片


下载完成携带SDKandroid studio安装包后,双击打开。


Cordova 环境搭建及使用_第19张图片


出现安装程序界面,点击下一步。这时会出现一个组件选择界面,我们可以看到,Android SDKAndroidVirtual Machine以及用于硬件加速的Performance都是处于被勾选的状态。这三个组件都是我们将来需要的,所以继续点击下一步。


Cordova 环境搭建及使用_第20张图片


另一个需要操作的界面是选择安装路径,可以根据自己的安装习惯,找到对应需要安装的位置,选择默认安装地址直接进入下一步也是可以的。


Cordova 环境搭建及使用_第21张图片


然后安装程序会说检测到你的系统可以将安卓虚拟机运行在加速环境下,这个应该和电脑的处理器有关,我的电脑是英特尔的处理器。安装程序推荐提供512MB的内存,如果电脑拥有较大内存,可以选择自定义,将内存调整到1GB。点击下一步即可,然后点击“install”按钮,就可以开始安装了。


Cordova 环境搭建及使用_第22张图片


安装完毕,打开Android Studio。会出现FetchingAndroid SDK component information界面,这个滚动条会滚动一段时间,需要耐心等待。


Cordova 环境搭建及使用_第23张图片


2.3.1问题:检查SDK更新失败


出现了更新SDKcomponents的界面,但是这里总会出现网络连接失败的问题,造成无法打开Android Studio。可能是被墙的原因,所以无法访问。


 


Cordova 环境搭建及使用_第24张图片


Cordova 环境搭建及使用_第25张图片


在这里,我采用的方法是跳过这个检查步骤,进行了如下操作:


Android Studio安装目录下的bin目录下,找到idea.properties文件,在文件最后追加disable.android.first.run=true


Cordova 环境搭建及使用_第26张图片


然后就可以顺利打开Android Studio了。


  


2.1 Window中设置androidSDK环境变量:


ANDROID_HOME E:\AndroidSDK


PATH%ANDROID_HOME%\tools;


验证:android–h


Cordova 环境搭建及使用_第27张图片



Window中设置androidSDK环境变量:


ANDROID_HOME D:\Android\sdk


PATH;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;


验证:adb


Cordova 环境搭建及使用_第28张图片


用命令行的方式来部署Cordova


1.安装 nodejs


下载:http://nodejs.org/download/.安装完毕后需要重启。


2.添加淘宝镜像


打开cmd命令行,执行:npm install -g cnpm--registry=https://registry.npm.taobao.org


1. 打开.npmrc文件(在用户主目录下)


2. registry = http://registry.npm.taobao.org


搞定!


2.安装 cordova


打开cmd命令行,执行:cnpminstall -g cordova


安装约10分钟。


Cordova 环境搭建及使用_第29张图片


4.创建一个cordova工程


cordova create hello com.shj.helloworld helloapp


其中,第一个 hello是文件夹的名称;om.shj.helloworldapp id,第二个helloapp是工程的名称,也是应用的名称。

提示下载库,请等待。


说明: te6


下载完成。


5.进入工程文件夹


cd hello


6.添加平台支持


有多种平台可选.命令如下:


$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

$ cordova platform add wp7

$ cordova platform add wp8

$ cordova platform add windows8


此处选择cordovaplatform add android


在工程文件夹下输入该命令:


Cordova 环境搭建及使用_第30张图片


项目创建完毕。


7.添加插件支持


主要为系统硬件访问的插件,常见如照相机、媒体访问、设备访问、加速设备、定位设备等。可以动态的按需求去添加,譬如按以下方式添加,,更多插件请去cordova官网查看。


基本设备资讯(设备 API):


$ cordova plugin add org.apache.cordova.device


网路连接和电池事件:


$ cordova plugin add org.apache.cordova.network-information

$ cordova plugin add org.apache.cordova.battery-status


相机、媒体重播和捕获:


Cordova plugin add cordova-plugin-camera --save

$ cordova plugin add org.apache.cordova.camera

$ cordova plugin add org.apache.cordova.media-capture

$ cordova plugin add org.apache.cordova.media


访问设备或网路(档 API上的档:


$ cordova plugin add org.apache.cordova.file

$ cordova plugin add org.apache.cordova.file-transfer


8.构建应用


cordovabuild


说明: te6


上图出现该提示,BUILD成功。即将hello/www下的内容,构建到添加的各平台内。如 android平台,会构建到此目录:hello\platforms\android\assets\www


 


先看PC直接打开网页的效果。


Cordova 环境搭建及使用_第31张图片



这是未修改配置的启动界面。也就是刚刚PC端打开的网页。网页就存在android项目asset目录下面。引用路径如上图所示file:///android_asset/www/index.html


通过360手机助手查看手机界面,可以看到刚刚的界面已经成功引导进去了。


Cordova 环境搭建及使用_第32张图片


在此Cordova的环境部署已经大功告成了。Web开发人员可以很轻易的开发移动应用了。



你可能感兴趣的:(Cordova 环境搭建及使用)