Cordova 简介

在介绍Cordova之前,必须先提一下PhoneGap。PhoneGap 是Nitobi软件公司2008年推出的一个框架,旨在弥补web 和iOS 之间的不足,使得web 和 iPhone SDK 之间的交互更容易。后来又加入了Android SDK 和BlackBerry SDK,再然后又陆续加入了更多的平台。

但是在2011年,Nitobi公司被Adobe收购,PhoneGap也被提交到Apache Incubator。由于Adobe现在拥有PhoneGap商标,PhoneGap v2.0版产品就更名为Apache Cordova。

据说Cordova是Nitobi团队当时坐落的街道名称,用此名来纪念Nitobi团队的贡献。Apache Cordova是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎。



上图是目前Cordova支持的平台,摘自Cordova官网,它们分别是Android、iOS、Windows Phone、BlackBerry、ubuntu、火狐、LGwebOS、FireOS。

Cordova工程结构

从下面这幅图可以看出Cordova工程的结构,以及与Native API 之前的关系。

Get Started Fast

官网中也把Cordova 的使用划分了一些步骤。按照这五个步骤,可以很容易的创建一个Cordova Demo 工程起来,但是实际的使用要比这个Demo 工程复杂的多。

* 1. 安装Cordova *

Cordova 命令行需要运行在 Node.js  上,在 NPM 也可用。我们可以按照 platform specific guides 去安装别的依赖平台。因此,在安装Cordova之前,要先安装Node.js 和 NPM(可以参考文章Mac 下安装Node.js)。打开命令行提示符(Windows 下) 或者 终端 (Mac 下),然后输入 npm install -g cordova 即可安装Cordova。

如果安装失败,看到下面的错误提示信息,说明我们要用管理员身份安装。

以管理员身份安装Cordova的命令:

sudo npm install -g cordova

安装过程可能比较慢,安装成功后,可以看到类似如下的目录结构,并且没有错误信息:

* 2.创建一个工程 *

用命令行工具创建一个空的Cordova工程。首先跳转到 你希望保存新工程的文件夹(命令是 cd 文件夹路径),然后输入命令 cordova create 工程名

当然,我们也可以直接 输入命令 cordova create 文件夹路径/工程名,在某个文件夹下直接创建工程。

查看更多的创建工程命令,可以输入命令 cordova help create

我在终端中输入如下命令:

cordova create /Users/harvey/Desktop/Other/MyApp

然后在Other 文件夹中就创建了一个叫MyApp的文件夹:

目录结构如下:

* 3.添加平台 *

创建完Cordova 工程之后,跳转到工程文件夹(命令是 cd 文件夹路径)。

我这里使用的命令是:

cd /Users/harvey/Desktop/Other/MyApp

然后在这个文件夹中,我们需要添加一个 App 需要支持的平台。 添加一个平台,需要输入命令:

cordova platform add <platform name>

例如我们需要支持浏览器,那么就输入:

cordova platform add browser

如果我们需要支持iOS,那么就输入:

cordova platform add ios

注意ios 要小写。

查看Cordova可以支持的平台,可以输入 :

cordova platform

我输入cordova platform之后,终端显示的结果:

HarveydeMac-mini:MyApp harvey$ cordova platform
Installed platforms:
  browser 4.1.0
  ios 4.2.1
Available platforms: 
  amazon-fireos ~3.6.3 (deprecated)
  android ~5.2.0
  blackberry10 ~3.8.0
  firefoxos ~3.6.3
  osx ~4.0.1
  webos ~3.7.0

Installed platforms 是我已经安装过的平台,Available platforms 是还可以安装的平台。

* 4.运行 App *

使用命令行工具,运行App的命令是:

cordova run <platform name>

例如,我想在浏览器中运行 App,我就在终端里输入:

cordova run browser

然后,就会打开浏览器,就会运行App。下面是我的命令和运行效果图:

当然,如果我们想要在iOS 上运行 App,我们也可以输入:

cordova run ios

也可以到指定目录下打开iOS 工程文件

查看更多的关于运行App 的命令,可以输入 cordova help run

iOS下JS与OC互相调用(七)--Cordova 基础的更多相关文章

  1. iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

    上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...

  2. iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  3. iOS下JS与OC互相调用(四)--JavaScriptCore

    前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下, ...

  4. iOS下JS与OC互相调用(一)--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...

  5. iOS下JS与OC互相调用(二)--WKWebView 拦截URL

    在上篇文章中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互. 由于UIWebView比较耗内存,性能上不太好,而苹果在iOS 8中推出了WKWebView. 同样的用WKWebVie ...

  6. iOS下JS与OC互相调用

    背景情况: app项目中有几个界面是需要经常变动的(不仅是内容还有UI布局等),比如活动宣传界面就是属于这一类.但是由于AppStore提交审核也是需要时间的,就算审核快,也不至于每次都为了这点事频繁 ...

  7. iOS下JS与OC互相调用(八)--Cordova详解+实战

    扯两句,可以跳过 由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互.所以我基本上是从零开始研究和学习Cordo ...

  8. iOS下JS与OC互相调用(七)--Cordova 环境搭建

    Cordova大家可能比较陌生,但肯定听过 PhoneGap ,Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字.它是一个可以让 JS 与原生代码互相通信的一个库,并且提供了一 ...

  9. iOS下JS与OC互相调用(八)--Cordova简单实战

    新建工程,添加Cordova 关键类 新建一个工程TestCordova 然后添加:confug.xml.Private 和 Public 两个文件夹里的所有文件 然后build 发现报错 为什么有会 ...

随机推荐

  1. vector数组中STL习惯性用法

    参考:https://blog.csdn.net/lcamisak/article/details/79358060

  2. python入门编程之三级菜单编程

    菜单实现功能输入一层显示下一层菜单不论在哪层输入b返回上一层不论在哪层输入q退出菜单此代码通过利用字典的知识可以实现_Author_ = 'jc'data = { '北京':{ '昌平':{ '沙河' ...

  3. [Luogu 3674]小清新人渣的本愿

    Description 题库链接 给你一个序列 \(A\) ,长度为 \(n\) ,有 \(m\) 次操作,每次询问一个区间是否可以 选出两个数它们的差为 \(x\) : 选出两个数它们的和为 \(x ...

  4. [Codeforces 919E]Congruence Equation

    Description 题库链接 求满足 \[n\cdot a^n\equiv b \pmod{p}\] 的 \(n\) 的个数, \(1\leq n\leq x\) , \(a,b,p,x\) 均已 ...

  5. [SDOI 2015]约数个数和

    Description  设d(x)为x的约数个数,给定N.M,求 $\sum^N_{i=1}\sum^M_{j=1}d(ij)$ Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试 ...

  6. [BZOJ]1093 最大半连通子图(ZJOI2007)

    挺有意思的一道图论. Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:∀u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v ...

  7. BZOJ2989 数列(二进制分组)

    这题其实可以cdq分治做,但是如果强制在线的话,这里有个牛逼方法叫二进制分组. 它的基本思想是把修改操作按二进制分组,遇到修改就在尾部加一个,并与之前的合并,比如之前有23(16+4+2+1)个,加了 ...

  8. Linux学习之CentOS(二)--初识linux的一些常用命令(基础命令)

    初次学习linux系统,首先也得会一些linux的基本命令.至少要先学会开启和关闭系统吧!我称为 基础命令! linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器. ...

  9. Log4j使用详解

    1 Log4j配置说明 1.1 配置文件Log4j可以通过java程序动态设置,该方式明显缺点是:如果需要修改日志输出级别等信息,则必须修改java文件,然后重新编译,很是麻烦: log4j也可以通过 ...

  10. Unrecognized token 'XXXX': was expecting ('true', 'false' or 'null')

    原因是,返回或发送数据格式不规范. 当dataType指定为json后,1.4+以上的jquery版本对json格式要求更加严格.如果不是严格的json格式,就不能正常执行success回调函数. J ...