该文章发布于2015年11月16日时,Cordova为V5.4.0。Cordova的更新迭代非常快,还是建议直接去官网学习。

Apache Cordova官方网站:http://cordova.apache.org/

Apache Cordova是PhoneGap贡献给Apache后的一款开源的移动开发框架,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。在2010年10月,Apache Cordova成为Apache Software Foundation(ASF)的顶级项目。

Cordova只是一个Webview的架子,,在UI方面他不会管你页面是什么样子,也不会提供给你任何UI方面的功能,所以UI方面还要借助于jQuery Mobile、Sencha Touch、App Framework(jQMoby)、KendoUI Mobile、Adobe Topcoat、jQTouch、Ionic Framework、Onsen UI等等。

Cordova不提供UI组件和MV*框架,只提供能够调用Native API的接口和可执行的运行环境。它的功能十分强大,通过系列的插件,可以使用JavaScript访问原生的设备功能,如摄像头、麦克风、GPS等。

一. Cordova的常用命令行操作

1. Cordova的安装

Cordova是Node.js的一款第三方依赖包,并托管到https://www.npmjs.com/中。通过npm下载即可:

$ npm install -g cordova

但是考虑到国内伟大的防火墙工程可能无法下载从http://www.npmjs.org/下载Cordova。幸运的是,国内有好几个镜像站点可以供我们使用,更新速度比较快的有淘宝镜像。具体下载方法如下:

(1)通过config命令:(临时指定镜像源)

$ npm config set registry https://registry.npm.taobao.org 
$ npm install -g cordova

2.命令行指定:(临时指定镜像源)

$ npm --registry https://registry.npm.taobao.org info underscore

3.编辑 ~/.npmrc,并加入如下内容:(永久指定数据源):

$ registry = https://registry.npm.taobao.org

国内镜像使用可参考:电脑换源 npm 国内镜像 cnpm

下载Cordova后,通过以下命令可查看当前的Cordova版本:

$ cordova -v

升级Cordova的方法如下:

$ npm update -g cordova

2. 创建Cordova APP新项目

下载完Cordova之后,就能创建一个新的Cordova APP实例程序:

$ cordova create MyApp com.example.myApp HelloWorld

(备注:如果想查看安装APP的进度,可以添加命令行选项 -d 。)

cordova create命令的参数如下:

  • 第一个参数是Cordova APP项目的文件目录,不可选;
  • 第二个参数是APP项目的域名标识,可选;
  • 第三个参数是APP应用的标题,可选。这个标题也可以后期在config.xml中进行修改。默认值是HelloCordova。

3. 为APP添加运行平台

例如,进入MyApp文件夹,为当前的MyApp项目添加浏览器运行平台。

$ cd MyApp
$ cordova platform add browser

在Mac中,可添加的平台有:

$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

在Windows中,可添加的平台有:

$ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

列出当前的cordova运行平台:

$ cordova platforms ls

删除当前的运行平台:

$ cordova platform remove blackberry10
$ cordova platform rm android

4. 在特定平台上运行APP

一定要执行过cordova platform add的特定平台,才能指定cordova run操作,在该运行平台上浏览效果。

例如,在浏览器中运行MyApp程序:

$ cordova run browser

此时,浏览器自动访问http://localhost:8000/,即可查看到如下界面,说明新建的默认APP项目已经可以跑起来了:

此处输入图片的描述

5. 编译Cordova APP

$ cordova build

还可以选择编译特定的运行平台代码:

$ cordova build ios

cordova build命令相当于一下两条命令的简写:

$ cordova prepare ios
$ cordova compile ios

7. 在模拟器和设备中运行APP

$ cordova emulate android
$ cordova run android

备注:cordova emulate命令行目前不支持Amazon Fire OS模拟器。

8. 帮助面板

$ cordova help

二. Cordova新项目的目录结构

新建的Cordova APP项目的目录结构如下:

MyApp/
|-- hooks/
    |-- README.md
|-- platforms/
    |-- browser/
    |-- platforms.json
|-- plugins/
    |-- cordova-plugin-whitelist/
    |-- browser.json
    |-- fetch.json
|-- www/
    |-- css/
    |-- img/
    |-- js/
    |-- index.html
|-- config.xml
目录名 描述
hooks 存放自定义cordova命令的脚本文件。
platforms 各个平台编译后的原生代码工程。备注:该目录在build时会被覆盖。
plugins 插件存放的目录。
www 源代码目录。其中index.html为应用的入口文件。

三. 添加插件

Cordova自4.0以后的版本就不再自带任何的API,就连core API 都必须通过插件安装显式写出来。

1 . 搜索插件:

$ cordova plugin search bar code

结果如下:(2015-11-16)

com.blackberry.community.barcodescanner
com.cordova.plugins.barcodescanner
com.delhivery.barcodescanner
com.gpdi.plugin.myplugin.myplugin
com.heytz.plugins.barcodescanner
com.heytz.plugins.barcodescanner.portrait
com.ishaijaffe.zxingintent
com.manateeworks.barcodescanner
com.mirasense.scanditsdk.plugin
com.phonegap.plugins.barcodescanner
com.virtualama.bs
de.martinreinhardt.cordova.plugins.barcodescanner
org.bloxlab.barcodescanner
org.cloudsky.cordovaplugins.zbar
org.pluginporo.barcode_scan_plugin
org.pluginporo.honeywell_scanner_plugin

2 . 添加Plugin:

$ cordova plugin add <cordova-plugin>

3. 常用插件种类:

(1)基础设备信息API:

$ cordova plugin add cordova-plugin-device

(2)网络连接和电池事件:

$ cordova plugin add cordova-plugin-network-information
$ cordova plugin add cordova-plugin-battery-status

(3)加速度计、方向指示和地理位置:

$ cordova plugin add cordova-plugin-device-motion
$ cordova plugin add cordova-plugin-device-orientation
$ cordova plugin add cordova-plugin-geolocation

(4)相机、多媒体播放和拍摄:

$ cordova plugin add cordova-plugin-camera
$ cordova plugin add cordova-plugin-media-capture
$ cordova plugin add cordova-plugin-media

(5)获取本地或网络文件:

$ cordova plugin add cordova-plugin-file
$ cordova plugin add cordova-plugin-file-transfer

(6)对话框提示或振动:

$ cordova plugin add cordova-plugin-dialogs
$ cordova plugin add cordova-plugin-vibration

(7)通讯录:

$ cordova plugin add cordova-plugin-contacts

(8)全球化:

$ cordova plugin add cordova-plugin-globalization

(9)启动画面:

$ cordova plugin add cordova-plugin-splashscreen

(10)打开新的浏览器窗口:

$ cordova plugin add cordova-plugin-inappbrowser

(11)调试控制台:

$ cordova plugin add cordova-plugin-console

列出所有的插件列表:

$ cordova plugin ls

删除插件:

$ cordova plugin rm cordova-plugin-console
或
$ cordova plugin remove cordova-plugin-console

安装指定版本的插件:

$ cordova plugin add cordova-plugin-console@latest
$ cordova plugin add cordova-plugin-console@0.2.1
本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/mobile/664