Cordova CLI源码分析

本系列文章分析基于node.js的命令行工具Cordova CLI，所以如果对node.js基础不是很了解，建议参考http://nodejs.gamesys.net/node-js提供的基础教程

文中提到的包和模块有区别，但是对于使用者来说是同一个概念。

一个node.js文件就是一个模块，可能是JavaScript代码，JSON或者编译后的C/C++扩展；包是模块基础上的扩展，是一个目录，至少包含一个package.json说明文件。

1、简介

Cordova CLI是一个基于node.js的命令行工具，用于编译、部署和管理跨平台的Cordova 混合应用程序。

Apache Cordova 使开发者运用Html， CSS，javascript就能够构建原生移动应用

支持平台

l Android

l BlackBerry 10

l iOS

l Windows Phone 7 & 8

运行环境

Node.js

各平台SDK

安装

[javascript]  view plain copy

1. npm install -g cordova  

默认安装路径

C:\Documents and Settings\xxx\Application Data\npm\node_modules\cordova\src

2、命令参数

全局命令

create <directory> [<id> [<name>]] 创建一个新的 cordova项目，三个参数分别是 保存路径，项目id，项目名称（反域名格式com.xxx.xxxx） 

项目命令

platform [ls | list] list all platforms the project will build to

platform add <platform> [<platform> ...] add one (or more) platforms as a build target for the project

platform [rm | remove] <platform> [<platform> ...] removes one (or more) platforms as a build target for the project

plugin [ls | list] list all plugins added to the project

plugin add <path-to-plugin> [<path-to-plugin> ...] add one (or more) plugins to the project

plugin [rm | remove] <plugin-name> [<plugin-name> ...] remove one (or more) added plugins

prepare [platform...] copies files into the specified platforms, or all platforms. it is then ready for building by Eclipse/Xcode/etc.

compile [platform...] compiles the app into a binary for each added platform. With no parameters, builds for all platforms, otherwise builds for the specified platforms.

build [<platform> [<platform> [...]]] an alias for cordova prepare followed by cordova compile

emulate [<platform> [<platform> [...]]] launch emulators and deploy app to them. With no parameters emulates for all platforms added to the project, otherwise emulates for the specified platforms

serve <platform> [port] launch a local web server for that platform's www directory on the given port (default 8000).

可选参数

-d或--verbose 添加调式信息输出

-v 或--version 输出cordova-cli版本信息

3、目录结构

运行cordova create hello hellotest com.xxx.hellotest

hello/

|--.cordova/

| | -- hooks/

| | -- config.json

|-- merges/

| | -- android/

| | -- blackberry10/

| | -- ios/

|-- www/

| `-- config.xml

|-- platforms/

| |-- android/

| |-- blackberry10/

| `-- ios/

`-- plugins/

刚创建完的merges，platforms，plugins都是空目录，而.cordova/config.json包含create创建时指定的参数{"id":"hellotest","name":"com.xxx.hellotest"}

（1）.cordova目录是辨别是否是cordova项目的重要标志，存储一些配置文件和信息；

（2）www目录下存放的是各个平台上一致的web文件，即每个平台使用相同代码，当调用prepare命令时，拷贝此目录下内容到platforms下原生目录；

     config.xml是符合W3C's Packaged Web Apps (Widgets) 标准的配置文件，通过修改config.xml中参数值，cordova-cli完成应用参数的修改

示例：

<?xml version='1.0' encoding='utf-8'?>

<widget id="hellotest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    <name>com.jinkai.hellotest</name>

    <description>

        A sample Apache Cordova application that responds to the deviceready event.

    </description>

    <author email="dev@callback.apache.org" href="http://cordova.io">

        Apache Cordova Team

    </author>

    <content src="index.html" />

    <access origin="*" />

    <preference name="fullscreen" value="true" />

<preference name="webviewbounce" value="true" />

<plugins>

     <plugin name="MyPlugin" value="MyPluginClass" />

</plugins>

<content src="index.html" />

</widget>

其中主要有以下几个参数：

<name> 展示给用户的应该程序名称

<widget> 中id属性指定包名（bundle identifier 或application id）

<widget> 中version属性版本

<access> 中 origin 属性，指定网络访问白名单

<preference>  用于存储一些键值对参数

<plugin> 定义原生插件，当运行时Cordova framework确保应用可以调用设备的API接口

<content> 定义web起始页，默认值是index.html

（3）merges目录下存放的是有平台差异的web文件，当调用prepare命令时，拷贝此目录下内容到platforms下原生目录，如果有同名www目录下文件存在，merges目录下文件将覆盖www下文件；

例如存在以下目录结构

merges/

|-- ios/

| `-- app.js

|-- android/

| `-- android.js

www/

`-- app.js

最终编译时，platforms目录下，android目录包含android.js和app.js,iOS目录包含app.js,这个文件与merges目录下ios/app.js一致，即merges目录下文件覆盖www目下文件

（4）platforms 各平台原生应用程序目录结构

（5）plugins 所有插件将会解压后放在此目录

（6）hooks 定义一系列回调函数

包含两类:项目指定和模块指定函数

4、Cordova CLI使用流程

（1）创建应用 cordova create （创建应用程序骨架）

cordova create hello hellotest com.jinkai.hellotest

（2）添加平台 cordova platform add 

cd hello

Mac支持平台

$ cordova platform add ios

$ cordova platform add android

$ cordova platform add blackberry10

Windows支持平台

$ cordova platform add wp7

$ cordova platform add wp8

$ cordova platform add android

$ cordova platform add blackberry10

查看支持平台

cordova platform ls

删除

$ cordova platform remove blackberry10

$ cordova platform rm android

（3）编译cordova build（在platforms目录下生成平台代码）

[javascript]  view plain copy

1. $ cordova build ios  

等价于顺序执行以下两个步骤

[javascript]  view plain copy

1. $ cordova prepare ios  
2. $ cordova compile ios  

（4）测试

[javascript]  view plain copy

1. $ cordova emulate android  

（5）添加插件

安装插件cordova plugin add

Basic device information (Device API):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Network Connection and Battery Events:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git

Accelerometer, Compass, and Geolocation:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

Camera, Media playback and Capture:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git    

Access files on device or network (File API):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

Notification via dialog box or vibration:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

Contacts:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

Globalization:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

Splashscreen:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

Open new browser windows (InAppBrowser):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Debug console:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

查看已安装插件plugin ls 或plugin list 或plugin

[javascript]  view plain copy

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

删除插件

[javascript]  view plain copy

1. $ cordova plugin rm org.apache.cordova.core.console          
2. $ cordova plugin remove org.apache.cordova.core.console    # same