Cordova开发第一课环境准备

2015/01/09

戴维营教育原创文章，转载请注明出处。我们的梦想是做最好的iOS开发培训！

简介

Cordova是一个Adobe的开源的混合型(Hydrid)移动应用开发框架，现在由Apache基金会管理。它的前身是PhoneGap开源框架，现在这两个品牌都在使用，不过基本上除了名字以外，其它都相同。Cordova为HTML 5代码提供了对本地资源的访问能力，能够充分发挥HTML 5的跨平台能力和本地代码在性能以及资源访问上的优势。到目前为止，Cordova已经支持了所有的主流移动平台，可以减少企业在移动应用开发上的成本和时间。

支持的平台

Cordova已经支持所有的主流移动平台：

iOS (Mac)
Amazon Fire OS (Mac, Linux, Windows)
Android (Mac, Linux, Windows)
BlackBerry 10 (Mac, Linux, Windows)
Windows Phone 7 (Windows)
Windows Phone 8 (Windows)
Windows 8 (Windows)
Firefox OS (Mac, Linux, Windows)

开发环境的搭建(Mac平台)

Cordova提供了一套基于Node.js的命令行工具来完成工程的创建、代码管理和部署等功能。因此在安装这套命令行工具之前需要确保已经安装了Node.js。

1 . 使用Node.js的包管理工具安装Cordova命令行工具，使用-g参数将Cordova安装在全局路径下（/usr/local/share/npm）。

$ sudo npm install -g cordova

2 . 创建我们的第一个Cordova应用。

$ cordova create weather com.diveinedu.weather Weather
Creating a new cordova project with name "Weather" and id "com.diveinedu.weather" at location "/Users/apple/Desktop/OC_Project/weather"

其中weather为工程目录；com.diveinedu.weather为项目唯一标识，iOS平台为Bundle ID；Weather为项目名称。

$ cd weather/
$ tree
.
├── config.xml
├── hooks
│   └── README.md
├── platforms
├── plugins
└── www
    ├── css
    │   └── index.css
    ├── img
    │   └── logo.png
    ├── index.html
    └── js
        └── index.js

7 directories, 6 files

Mac下的tree命令需要通过brew或MacPort安装。

www目录下存放应用程序的主要内容。

3 . 添加iOS平台支持，在platform目录下生成相应的平台代码。

$ cordova platform add ios
Creating ios project...
$ tree
.
├── config.xml
├── hooks
│   └── README.md
├── platforms
│   └── ios
│       ├── CordovaLib
│       ├── Weather
│       │   ├── Classes
│       │   ├── Plugins
│       │   ├── Resources
│       │   │   ├── icons
│       │   │   └── splash
│       │   ├── Weather-Info.plist
│       │   ├── Weather-Prefix.pch
│       │   ├── config.xml
│       │   └── main.m
│       ├── Weather.xcodeproj
│       ├── cordova
│       ├── platform_www
│       │   └── cordova.js
│       └── www
│           ├── cordova.js
│           ├── cordova_plugins.js
│           ├── css
│           │   └── index.css
│           ├── img
│           │   └── logo.png
│           ├── index.html
│           └── js
│               └── index.js
├── plugins
│   └── ios.json
└── www
    ├── css
    │   └── index.css
    ├── img
    │   └── logo.png
    ├── index.html
    └── js
        └── index.js

25 directories, 120 files

Cordova支持所有的主流移动平台，可以使用下面的命令查看当前所支持的平台。

$ cordova platform ls
Installed platforms: ios 3.7.0
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos

当然，Cordova也支持移除所支持的平台。

$ cordova platform remove blackberry10
$ cordova platform rm android

4 . 构建应用 Cordova支持同时构建所有平台或单独构建某个平台。

$ cordova build
$ cordova build ios

上面的cordova build是以下命令的缩略形式，一旦执行完cordova prepare命令就可以使用平台SDK或工具进行开发了，www目录下的内容会被同步到每个平台目录下。

$ cordova prepare ios
$ cordova compile ios

5 .运行和测试 cordova提供命令在模拟器或真机上运行程序。

在模拟器上运行。

$ cordova emulate ios

－在真机上或模拟器上运行，如果通过USB连接了真机，直接运行，否则在模拟器上运行。

cordova run ios

6 . 插件管理 Cordova 提供了许多有用的插件来完成一定的功能，可以直接在命令行进行添加或删除。

搜索可用插件。

$ cordova plugin search bar code
com.phonegap.plugins.barcodescanner - Scans Barcodes

安装远程插件，可用同时添加多个插件，以空格隔开。

$ cordova plugin add org.apache.cordova.device

查看已安装的插件。

$ cordova plugin ls    # or 'plugin list'
[ 'org.apache.cordova.console' ]

卸载插件。

$ cordova plugin rm org.apache.cordova.console
$ cordova plugin remove org.apache.cordova.console    # same

可以添加处于远程Git仓库的插件。

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

添加本地插件

$ cordova plugin add ../my_plugin_dir

7 .通过merges目录提供平台特定的功能或设置。

$ ls
config.xml  merges      plugins
hooks       platforms   www

在merges目录下的文件结构与www相同，在cordova prepare命令后，www下面的文件会复制到所有平台，但是如果在merges的对应目录中存在相同的文件，则使用merges下的文件。

$ tree merges/
merges/
└── browser
    └── css
        └── overrides.css

2 directories, 1 file

$ tree www/
www/
├── css
│   ├── index.css
│   └── overrides.css
├── img
│   └── logo.png
├── index.html
└── js
    └── index.js

3 directories, 5 files

最后的结果是browser平台使用merges下的overrides.css，而其它平台还是使用www下的文件。

本文档由长沙戴维营教育整理。

戴维营学院（高级开发视频）: http://v.diveinedu.com