（一）Cordova 概述

  因公司项目需要快速开发产品的APP，也因为没有专业原生的APP开发人员（有WAP页面的），后来选择了利用Cordva这个框架来快速实现。历时将近一个月，本人负责IOS的实现，现将整个实践过程大致记录下来，后续几篇会记录不同阶段的不同实现内容。

Cordova 前世今生

  随着APP开发需求的扩大，而iPhone开发的Object-C 对于Web开发又比较陌生，为了使web开发者可以通过HTML＋CSS＋JavaScript和本地应用程序（如摄像头和通讯录）交互更加便利，Nitobi公司开发了PhoneGap框架。

Adobe 2011年10月4日宣布收购了Nitobi Software 。
PhoneGap 被 Adobe 收购了 ，后来抽离出核心代码贡献给了 Apache Software Foundation，Apache 将这个项目命名为Cordova

Cordova是贡献给Apache后的开源项目。Cordova 相当于PhoneGap的核心引擎，你可以把它们的关系想象成类似于Webkit和Google Chrome的关系。

Cordova名字的由来： PhoneGap 由一个叫 Nitobi 的公司发起 ，曾经改名为 "Callback"，接着又改名为 "Cordova"，因为 Nitobi 的办公地点曾设在在一条叫 Cordova 的街道

Cordova 简介

Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。

• 官方网站 http://cordova.apache.org
• 中文网站 http://cordova.axuer.com

使用Apache Cordova的人群:

• 移动应用开发者，想扩展一个应用的使用平台，而不通过每个平台的语言和工具集重新实现。
• web开发者，想包装部署自己的web App将其分发到各个应用商店门户。
• 移动应用开发者，有兴趣混合原生应用组建和一个WebView(一个特别的浏览器窗口) 可以接触设备A级PI，或者你想开发一个原生和WebView组件之间的插件接口。

Cordova 架构图

image

• WebView

  WebView 是App 原生当中的浏览器组件，Cordova本质就是一个（混合编程）Hybrid框架。对原生和web直接交互的一些封装。对外提供了一套接口。

• WebApp

  WebApp是web编程的所有文件内容存放的地方。包括html,js,css等。
  Cordova实现是通过调用原生的webview,然后默认加载本地的 index.html页面。index.html中引用其他的本地的css,javascript,images,media和其他等一些必要等资源文件。
  这里其中有一个最重要等文件 config.xml。定义了运行过程中很重要的一些参数。

  如果直接通过Web访问一个服务器的页面，一个是访问效果非常差，受限于网速，另一个就是和原生的交互问题。而将资源放在WebApp下，等于是在App本地访问页面，展示效果更接近于原生。

Cordova 安装

1. 安装 node.js

   在网站 https://nodejs.org/en/download/ 下载适合系统的 node.js 版本,安装即可。

2. 安装 Cordova

   Windows系统可以打开 cmd窗口，Mac系统可以打开终端。
   命令行执行：

   $ npm install -g cordova

Cordova 创建项目，运行

1. 创建项目

   创建一个新的 cordova工程 <文件夹名> <包名>

   $ cordova create MyTest com.cordova.test helloword

   然后命令行所在目录，会生成一个MyTest的文件夹。生成文件如下：

create_new.jpg

2. 添加平台

   新创建的工程,然后需要进入目录，添加一个平台支持。
   添加ios支持

   cordova platform add ios

   查看所有支持的平台

   cordova platform

platform.jpg

3. 项目启动

   通过命令行启动App

   cordova run ios

   如果安装好了xcode,默认会启动一个模拟器.
   进入目录MyTest/platforms/ios下，通过xcode打开,跟普通的项目一样,如下图所示：

helloword_in_xcode.jpg

选择你自己真机运行所需要的 Signing 中的Team值。 然后可以启动项目。

运行界面如下：

helloword_start.jpg