跨平台框架Cordova 命令行简介(CLI)

这一节,我们将看到如何通过Cordova命令行(CLI)创建新的项目,针对不同平台进行编译,并利用仿真器或真实设备进行测试。CLI是跨平台工作方式的主要工具。

当然,你也可以利用CLI进行一些项目的初始化工作,比如创建初始代码等等。稍后,你就可以针对不同平台提供的SDK进行持续开发。

以下我们以Windows下Android应用开发为例。

前提条件

1) JDK

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

设置环境变量:

JAVA_HOME= C:\Program Files (x86)\Java\jdk1.8.0

Classpath=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
注意:
具体路径根据你安装选项而定。

2) Apache Ant

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

设置环境变量:

新建ANT_HOME=C:\ant193

Path中添加:%ANT_HOME%\bin;

3)Android SDK

运行命令行工具之前,你应该确保你已经安装了目标平台所需的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-bundle\sdk\tools和d:\adt-bundle\sdk\platform-tools

4)安装Node.js

下载地址:http://nodejs.org/download/

提示:

64位版的我试了很多次,都无法安装Cordova,暂时不清楚原因。

32位版的下载后安装正常。

5)安装Cordova

安装Node.js后,命令行执行以下语句:

npminstall -g cordova

我 试过 以上语报错

修改如下 npm install -g cordova

耐心等候直至安装完成。

创建应用程序

命令行,切换到你的项目工作目录,执行以下语句创建HelloWord应用:

cordovacreate hello com.example.hello HelloWorld –d

耐心等待直至命令完成。

第一个参数hello,指定目录名称。

第二个参数com.example.hello类似C#的命名空间,或Java的包名。(不太确定,读者自行鉴别,原文写的是a reversedomain-style identifier)

第三个参数指定了应用程序的显示标题。

完成后可以查看Hello目录及其子目录结构。

添加特定平台支持

注意,以下所有命令都要在项目根目录下运行(用cd命令进入)。

首先,你需要添加你所需要支持的平台,比如:

cordovaplatform add android

cordovaplatform add ios

注:貌似ios开发只能在Mac机器上进行,所以上面的add ios不会出现在Windows机器上。

完成后运行以下命令查看:

cordovaplatfrom list

如果以后需要移除Android平台支持,可以运行:

cordovaplatform rm android

运行platform add或platform rm命令会影响项目目录下的内容。每一个被添加的平台会在项目根目录下的platform下产生一个对应平台的子目录。你可以看到各个平台下也存在www目录,比如platforms\android\assets\www。因为CLI会不断的复制项目根目录下的www中的内容,所以你应确保不要对平台下的www目录中的内容进行修改。如果你实在有这个需求,请参照本章末尾的“Merges目录”。

警告:

如果你使用CLI管理你的项目,请尽量不要更改platforms目录下的任何内容,除非你有明确的把握知道你在做什么。这是因为该目录下的内容会在一些条件下被覆盖。

如果你希望此时能通过针对特定平台的SDK(比如Eclipse)来进行开发,你应该打开那些位于platforms子目录下的内容。这是因为平台相关的一些配置信息是存储在platforms特定子目录下的。

编译应用程序

默认情况下,cordova create脚本将创建一个非常简单的基于Web的应用程序。

运行以下命令编译应用程序:

cordovabuild

cordovabuild android  //只针对Andorid平台编译

如果最终提示:BUILD SUCCESSFUL,则编译成功。

实际上build命令对应于以下两个命令:

cordovaprepare android

cordovacompile android

这意味着你可以仅执行prepare命令,然后用SDK开发环境去另外编译。

仿真器中测试

打开Eclipse,选择菜单New-->Project->Android->AndroidProject From Existing Code,选择项目根目录为hello\platforms\android,并确保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程序,如下:

或者你也可以在命令行中运行以下命令启动仿真器:

cordovaemulate android

添加插件支持(原文:Add Plugin Features)

如以上我们看到的,Cordova默认提供的程序界面和功能非常简单。当然你可以根据你的需要,运行标准Web开发技术对页面进行设计。但是当你需要和不同的设备进行通讯交互时,你就需要借助于一些插件,以便能够访问Cordova提供的核心API。

一般来说,你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用插件列表你可以在社区中看到(http://plugins.cordova.io/)。当然你也可以自定义自己的插件。

你可以用CLI搜索可用的插件,比如:

cordovaplugin search bar code

你可以通过以下命令安装插件,比如:

cordovaplugin add org.apache.cordova.device                   //设备API

cordovaplugin add org.apache.cordova.network-information  //网络(事件)

cordovaplugin add org.apache.cordova.battery-status      //电池(事件)

cordovaplugin add org.apache.cordova.device-motion     //加速器

cordovaplugin add org.apache.cordova.device-orientation     //罗盘

cordovaplugin add org.apache.cordova.geolocation         //定位

cordovaplugin add org.apache.cordova.camera                 //摄像头

cordovaplugin add org.apache.cordova.media-capture     //媒体文件处理

cordovaplugin add org.apache.cordova.media                   //媒体文件处理

cordovaplugin add org.apache.cordova.file                        //文件访问

cordovaplugin add org.apache.cordova.file-transfer          //文件传输

cordovaplugin add org.apache.cordova.dialogs                 //对话框

cordovaplugin add org.apache.cordova.vibration              //震动

cordovaplugin add org.apache.cordova.contacts               //联系人

cordovaplugin add org.apache.cordova.globalization       //全球化

cordovaplugin add org.apache.cordova.splashscreen       //闪屏

cordovaplugin add org.apache.cordova.inappbrowser             //打开新的浏览器窗口

cordovaplugin add org.apache.cordova.console                //调试控制台

你可以用以下命令查看所有已经安装的插件

cordovaplugin ls

使用以下命令删除插件:

cordovaplugin rm org.apache.cordova.console    

Plugin add高级选项

上面的安装方式是从registry.cordova.io库中按照id获取插件,这是一个非常通用的做法。你可以在安装时指定版本,比如:

cordovaplugin add [email protected]

cordovaplugin add [email protected]

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

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

cordovaplugin add https://github.com/apache/cordova-plugin-console.git

当然你需要先安装git。

Merge目录

前面提到,一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容,又该怎么办呢?

项目根目录下有一个merges目录。我们以一个实例来讲解:

1) 修改www\css目录下的index.css文件,设置event.received的样式为红色:  background-color:#FF0000;

2) 修改platforms\android\assets\www\css中的index.css文件,设置.event.received的样式为蓝色:background-color:#0000FF;

3) 在merges\android目录下新建一个css目录。

复制www\css中的index.css文件到该目录下。

修改该目录下的index.css文件中的.event.received的样式为绿色:background-color:# 00FF00;

仿真器中运行,你会发现最终呈现的结果为绿色。由此我们可知:

1) Merges目录中没有对应文件时,platform下的文件会被跟目录(www)下的文件覆盖。(即:如果Merges目录中不存在index.css文件,最终颜色将为红色)

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

帮助命令

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

cordovahelp

更新命令

以下语句更新cordova:

npmupdate -g cordova

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

cordovaplatform update android

注意:

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

时间: 2024-08-28 12:03:29

跨平台框架Cordova 命令行简介(CLI)的相关文章

解决cordova命令行方式下build或者run的时候报错问题

phonegap3.0之后就将项目的生成方式做了很大的更改,原来是在eclipse里面修改生成并编译运行,但是3.0之后它的目录结构发生了很大变化,只修改主目录下面的index.html如果不build的话有时候是不起作用的,因为它的platform文件夹中还有各个平台的目录.比如安卓和IOS,在主目录www下面修改index.html之后必须要build才能生效,否则很多时候你会发现修改了不起作用,这是因为在assets目录下还有个www文件夹,真正运行的是这个文件夹下面的index.html

核心系统命令实战 第一章Linux命令行简介

第一章Linux命令行简介 1.1 Linux命令行概述 1.1.1 Linux 命令行的开启和退出 开启:登陆账号密码进入系统 退出:exit/logout  快捷键:Ctrl+d 1.1.2 Linux命令行提示符介绍 (1)提示符由PS1环境变量控制.实例代码如下: [[email protected] ~]# set | grep PS1 PS1='[\[email protected]\h \W]\$ ' 这里的PS1='[\[email protected]\h \W]\$ ',可以

关于windows环境下cordova命令行无法启动adb.exe的解决办法

使用phonegap开发手机APP,常常需要更改代码之后进行调试,使用安卓模拟器每次启动非常缓慢,而且不能保证最终在真机上的效果.所以一般都采用真机进行调试. 搭建真机的调试环境这里就不再赘述了,网上有很多教程.这里主要讲一下本人在nodejs命令行方式下进行run的时候的报错问题,当输入cordova run android的时候,最终APP没有被安装到手机上,查看报错信息,显示如下: 按照错误信息进行判断,应该是adb.exe没有启动起来,于是找到adb.exe双击启动,再次回来run发现依

scrapy框架的命令行解释

scrapy框架的命令解释 创建爬虫项目 scrapy startproject 项目名例子如下: scrapy startproject test1 这个时候爬虫的目录结构就已经创建完成了,目录结构如下: |____scrapy.cfg |____test1 | |______init__.py | |____items.py | |____middlewares.py | |____pipelines.py | |____settings.py | |____spiders | | |___

golang开发:类库篇(三)命令行工具cli的使用

为什么要使用命令行 觉得这个问题不应该列出来,又觉得如果初次进行WEB开发的话,可能会觉得所有的东西都可以使用API去做,会觉得命令行没有必要. 其实,一个生产的项目命令行是绕不过去的.比如运营需要导出报表.统计下付费用户.服务不稳定修改下订单状态等等,再者,命令行的工具基本都是内部使用,调试日志可以随意点,退一万步来说,即使有问题了,还可以再次修改.不像API是是随机性的,有些业务发生错误和异常是随机的.不可逆的. 怎么使用cli 这个主要看下使用案例就一目了然了. 首先下载类库包 go ge

Python爬虫从入门到放弃(十三)之 Scrapy框架的命令行详解

这篇文章主要是对的scrapy命令行使用的一个介绍 创建爬虫项目 scrapy startproject 项目名例子如下: localhost:spider zhaofan$ scrapy startproject test1 New Scrapy project 'test1', using template directory '/Library/Frameworks/Python.framework/Versions/3.5/lib/python3.5/site-packages/scra

Linux命令行简介

1 Linux系统命令操作语法的格式 命令_[参数选项]_[文件或路径]    其中 _ 至少一个空格    如:rm -f /etc/hosts    其中/etc/hosts完整路径不带空格   中括号表示可选的,即命令的参数和路径文件都是可选的,参数选项表示使用一个命令的不同功能,比如,可以删除一个文件和创建一个文件 2 # 是超级管理员的提示符root对应的提示符   $   普通用户oldboy对应的提示符   @  是一个提示符  ~ 当前用户所在的家目录 [[email prote

Python爬虫从入门到成妖之3-----Scrapy框架的命令行详解

创建爬虫项目 scrapy startproject 项目名 例子如下: E:\crawler>scrapy startproject test1 New Scrapy project 'test1', using template directory 'd:\\python36\\lib\\site-packages\\scrapy\\templates\\project', created in: E:\crawler\test1 You can start your first spide

linux 命令行简介

1.基本格式:[用户名@主机名 目录]#|$ 需要执行的命令示例: 说明: 1.#或者$只出现一个,#表示当前登陆的用户是超级用户,$表示当前登陆的是普通用户. 2.上例中的limonero表示当前登陆的用户是limonero用户,$表示这个用户是一个普通用户. 3.@后面的名称表示当前用户登陆的主机名称,即登陆的服务器的名称. 4.[]中最后一部分表示当前登陆的用户现在所处的目录,即在系统中的位置. 2.命令行格式的基本配置:使用PS1进行配置#查看当前格式的命令: set|grep PS1示