Cordova 入门

名词    链接    描述
Cordova    http://cordova.apache.org/    Hybrid App中间件
ios-deploy    https://github.com/phonegap/ios-deploy    使用命令行部署iOS项目
PhoneGap    https://phonegap.com/    使用Web快速开发、打包Hybrid APP
Node.js    https://nodejs.org/en/    基于 Chrome V8 引擎的 JavaScript 运行环境。
npm    https://www.npmjs.com/    Node.js的包管理器
Git    https://git-scm.com/    分布式版本控制库
ionic    http://ionicframework.com/    基于Angular的H5框架
Angular    https://angularjs.org/    优秀的前端JS框架
PhoneGap100    http://www.phonegap100.com/    Hybrid App社区

1.1 移动端的开发模式
Native App
传统的原生APP开发模式,Android基于Java语言,底层调用Google的API;iOS基于OC或者Swift语言,底层调用Apple官方提供的API。体验最好。

Web App
移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指SPA(SinglePageApplication)模式开发出的网站。体验最差。

Hybrid App
混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,具有跨平台效果。

React Native App
Facebook开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。

React Native不属于Hybrid 开发。虽然同样是一处编写，处处运行，但是 Hybrid是 HTML 和原生代码混合实现，而React Native只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。

1.2 Cordova基本介绍
Cordova前身是PhoneGap,而PhoneGap是Nitobi软件公司2008年推出的一个框架，旨在弥补web和iOS之间的不足，使得web和iPhone SDK之间的交互更容易，后来又陆续加入了更多的平台。
2011年被Adobe收购，同年晚些时候，该项目核心代码被捐赠给Apache软件基金会（ASF），以保持透明和开放的发展，而Apache将其更名为Cordova。

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以 JavaScript 访问原生的设备功能，如摄像头、麦克风等。
Cordova还提供了一组统一的 JavaScript 类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
现在，Adobe PhoneGap™提供了其他Adobe服务的附加工具，包括PhoneGap Developer App，PhoneGap Desktop App，PhoneGap Build和PhoneGap Enterprise等工具。
但是Apache Cordova依然是支持Adobe PhoneGap™的引擎，类似于WebKit为Chrome或Safari提供引擎。可以理解为Adobe PhoneGap™是Apache Cordova™的应用发行版。

原理图如下

2 Cordova安装（Mac环境）
2.1 安装Node.js
要安装Cordova，需要先安装Node.js。在[Node.js官网][2]上下载并安装即可。
运行命令 正常输出信息则安装成功

node -v
1
npm -v
1
2.2 安装git
macOS和linux都自带git，使用命令

git --version
1
检查git,如果没有安装可以到[git官网][3]下载安装一个git客户端。

2.3 安装Cordova
在终端执行

sudo npm install -g cordova
1
等待一段时间即可安装完毕，使用

cordova -v
1
查看安装是否成功。

此外还有更新Cordova的命令

sudo npm update cordova -g
1
Cordova更新完成后，还需要更新平台（比如更新ios）

cordova platform update ios
1
3 创建Cordova 工程
3.1 创建项目
在终端中切换目录到工作目录下，执行以下命令

cordova create hello com.example.hello HelloWorld
1
参数说明：

名称    必填    描述
hello    必填    工程的文件夹名，会创建一个同名文件夹
com.example.hello    可选    应用程序的id名，与Xcode中类似，可以在 config.xml 中修改，如果不指定的话默认为 io.cordova.hellocordova
HelloWorld    可选    App的名称，也可在 config.xml 中修改
同时我们也可以通过npm平台在本地创建模板工程，可以在这里寻找.
找到想使用的模板后,使用该模板创建项目，方法是–template在create命令中指定标志，然后指定模板源。
从NPM，Git存储库或本地路径创建一个cordova项目：

$ cordova create hello com.example.hello HelloWorld --template <npm-package-name>
$ cordova create hello com.example.hello HelloWorld --template <git-remote-url>
$ cordova create hello com.example.hello HelloWorld --template <path-to-template>
1
2
3
3.2 添加平台
然后我们需要为我们的项目添加运行的平台，比如我们添加iOS和安卓，就可以执行以下命令：（下列命令都是在项目根目录下执行，cd到hello）

cordova platform add ios
1
cordova platform add android
1
同时，我们也可以使用下面的命令查看Cordova 支持的平台和项目已经添加的平台：

  cordova platforms ls
1
3.3 目录说明
项目已经创建完毕， 展现出来的目录结构如下图所示：

同时官方给出的目录结构是这样的：
myapp/
|– config.xml
|– hooks/
|– merges/
| | |– android/
| | |– windows/
| | |– ios/
|– www/
|– platforms/
| |– android/
| |– windows/
| |– ios/
|– plugins/
|–cordova-plugin-camera/

名称    描述
config.xml    cordova的配置文件
hooks    存放自定义Cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build
platforms    各个平台的项目，不要手动修改，因为在build的时候会被覆盖。
plugins    插件目录（Cordova提供的原生API也是以插件的形式提供的）
www    源代码目录，在Cordova prepare的时候会被copy到各个平台工程的assets\www目录中。 其中index.html为应用的入口文件。
node_modules    npm的依赖文件
merges目录 4+的版本取消了这个文件夹
存放各个平台特殊的文件，会和www进行合并编译，相同的文件merges下的文件优先。 比如：
merges/
|– ios/
| |– app.js
|– android/
| |– android.js
www/
| |– app.js
编译成iOS应用的话，包含merges/ios/app.js；而Android应用的话，包含www/app.js、merges/android/android.js

3 开发项目
3.1 工程目录和Cordova的生命周期
使用xcode打开platforms/ios/HelloWorld.xcworkspace 来打开项目，默认的Cordova工程看起来是这个样子：

可以看到 Staging 文件夹下面有个 www 文件夹和一个 config.xml 文件（黄色标注）。
而在 Staging 文件夹外也有个 www 文件夹和一个 config.xml 文件（红色标注的）。
实际上Staging 外的www文件夹就是cordova/hello下的， Staging 下的www文件夹是在platforms/ios里的， Staging 下的config.xml 金仅作用于iOS平台，主要是配置插件。
也就是说每次Cordova编译的时候，或者更新工程、安装插件时都会重新把红色里的文件覆盖到各个平台下的文件（黄色标注的）。而且如果同时只编辑单个平台工程文件夹下的html页面，也不符合一次编写，同时编译发布多平台的跨平台应用开发思想。
所以一般都是编辑外面的（红色标注）www文件夹里的文件，然后重新 build 工程。

初始工程在模拟器中运行效果如下：

Cordova提供APP状态的监测（iOS），包括:

名称    描述
deviceready    当Cordova加载完成会触发
pause    当应用程序进入到后台会触发
resumes    应用程序从后台进入到前台会触发

详细的事件以及支持列表如下：

我们将index页面修改为如下内容，展示APP的状态监测：

<!DOCTYPE html>
<html>
    <head>
        <title>Pause Example</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            //页面加载后添加各事件监听
            function onLoad() {
                document.addEventListener("deviceready", onDeviceReady, false);
                document.addEventListener("resume", onResume, false);
                document.addEventListener("pause", onPause, false);
            }

            //Cordova加载完毕
            function onDeviceReady() {
                alert("Cordova加载完毕！");
            }

            //进入后台
            function onPause() {
                console.log("应用进入到后台！");
            }

            //恢复到前台
            function onResume() {
                alert("应用回到前台运行！");
            }
        </script>
    </head>
    <body onload="onLoad()">
    </body>
</html>