zoukankan      html  css  js  c++  java
  • Cordova搭建环境与问题小结

    1.Cordova介绍:

    Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript来访问本地设备的功能,比如摄像头、加速计。它可以与UI框架(如jQuery Mobile或Dojo Mobile或Sencha Touch)等相结合使用,这些UI框架可以使用HTML、CSS和JavaScript开发智能手机应用。在使用Cordova API时,应用程序的构建可以无需本地代码(如Java或对象C等),使用的是Web技术。由于这些JavaScript API在多个设备平台上是一致的,而且是基于Web标准创建的,因此应用程序的移植很方便,基本不做什么改变。使用Cordova的应用使用平台SDK打包成应用程序,可以从每种设备的应用程序商店下载安装。

    Cordova提供了一套统一的JavaScript库供调用,它支持iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian。如果想用Cordova开发移动应用,先看看它的文档。文档中包含了入门指南、JavaScript API参考、例子程序、Cordova升级的事宜、怎样编写自己的Cordova插件等。

    2.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添加插件支持

    如以上我们看到的,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 add org.apache.cordova.console@latest

    cordova plugin add org.apache.cordova.console@0.2.1

    其中的latest表示获取最新版本。中间用@分隔。

    如果插件不是在默认库中,而是在其他地方,则你可以指定URL:

    cordova plugin add https://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

    注意:

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

    windows: 
    npm install -g cordova 

    ios & linux: 
    sudo npm install -g cordova 

    Create the App: 
    cordova create DirectoryName com.package.name ProjectName 

    Add/Remove/ls Platforms: 
    cd DirectoryName 
    cordova platform add android 
    cordova platform add ios 
    cordova platform add amazon-fireos 
    cordova platform add blackberry10 
    cordova platform add firefoxos 
    cordova platforms ls 
    cordova platform rm android 

    Build the App: 
    cordova build 
    cordova build ios 
    cordova prepare ios 
    cordova compile ios 
    Test the App on an Emulator or Device: 
    cordova emulate android 
    cordova run android 

    Add Plugin Features: 
    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 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 
    ---or--- 
    cordova plugin remove org.apache.cordova.console 


    Help Commands: 
    cordova help 
    ---or--- 
    cordova 

    cordova info 

    Updating Cordova and Your Project: 
    cordova -v 
    sudo npm update -g cordova 
    npm info cordova 

    cordova platform update android 
    cordova platform update ios 
    ...etc.

    3.注意事项

    1.安装插件得时候无法添加?
    cordova版本不同得时候,特别是在5.0版本之后,是无法通过id添加的,这个在这个网站(https://cordova.apache.org/plugins/)里面可以看到。这个时候你可以更改cordova版本。

    2.安卓环境变量无法识别?
    这个也和cordova版本有关,直接修改Cordova版本,或者更改SDK版本。

    参考网址:

    https://www.imooc.com/article/26083(创建Android程序)

    https://www.imooc.com/article/26119(热更新)

  • 相关阅读:
    OpenShift和F5的集成手册
    OpenShift负载分区策略(Router Shading)
    Istio在Openshift 3.11的安装
    Openshift 和Harbor的集成
    OpenShift 如何获取bearer Token以便进行各种API调用
    Openshift 3.11和LDAP的集成
    Openshift 节点添加和删除
    Spring Dataflow批处理框架在OCP上的部署
    Openshift 用户,角色和RBAC
    取消Windows server 关机提示备注的方法
  • 原文地址:https://www.cnblogs.com/xuhai/p/8878141.html
Copyright © 2011-2022 走看看