Sencha Cmd是一套跨平台的命令行工具，用于支持整个ExtJS开发的生命周期。它包含以下功能：

1. 代码生成工具：可以生成整个应用程序，并且使用MVC模式扩展应用程序
2. JS编译器：此编译器理解Sencha的ExtJS/Touch框架，可以减少应用程序加载时间
3. Web服务器：一个轻量级的，开发用Web服务器
4. 包管理系统：分布式的包管理系统，可以方便的集成其它用户开发的、发布到Sencha Package Repository的包（例如ExtJS主题）到当前应用程序
5. 工作区管理：辅助跨越多个应用的框架、包、代码共享
6. 构建脚本：自动生成应用的构建脚本，并且暴露before、after扩展点
7. 支持与Cordova/Phone集成
8. 图形捕获：为支持遗留浏览器，可以将CSS3特性转换为图片
9. 优化工具：强大的代码选择工具，用于微调、确定哪些被包含在最终的构建中；确定跨越多个页面的公共代码并共享
10. 灵活的配置系统
11. 日志系统：详尽的日志，让你可以了解命令的内部工作步骤

# 一般命令调用格式
sencha [category] [command] [options...] [arguments...]
# 帮助
sencha help [module] [action]

这类子命令执行多种应用程序的构建处理：

# 仅仅更新scaffold：包括.sencha子目录中的内容，以及app.js等文件
sencha app upgrade
# path-to-new-framework为可选，用于在更新scaffold的同时更新你使用的ExtJS的版本
sencha app upgrade [ path-to-new-framework ]

sencha app init --ext=/path/to/extjs/ AppName --modern

sencha app install --frameworks=/path/to/extjs

# 基于开发环境构建
sencha app build development

生成模型、控制器或者其它组件，甚至整个应用程序：

sencha generate app -ext -classic AppName ./AppPath
sencha -sdk /home/alex/JavaScript/extjs/6.2.0 generate app -modern AppName ./AppPath

sencha generate controller Central

# 在应用根目录执行
# 生成一个名为User的模型，包含3个字段
sencha generate model User id:int,name,email

sencha generate package pkgname

# 在view/foo子目录下生成Thing视图，以及视图模型ThingModel、视图控制器ThingController
sencha generate view foo.Thing

这一类子命令用于管理包的远程仓库：

sencha repository add sencha http://cdn.sencha.com/cmd/packages/

# 检查新版本
sencha upgrade --check
# 执行升级
sencha upgrade
# 无人值守的升级
sencha upgrade --unattended
# 包含beta版本
sencha upgrade --check --beta 

可以使用下面的命令生成一个Universal应用的脚手架：

sencha -sdk /home/alex/JavaScript/extjs/6.2.0 generate app MyApp MyApp

.
├── app                   # 当前应用有关文件的目录
│   ├── Application.js    # 当前应用的实现类，扩展Ext.app.Application
│   ├── model             # 视图模型、模型存放目录
│   ├── store             # 存储存放目录
│   └── view              # 视图控制器、控制器存放目录
├── app.js                # 应用入口点定义
├── app.json              # 应用描述符文件
├── bootstrap.js          # 自举文件，其中包含微加载器
├── build                 # 构建结果存放目录
│   ├── development       # 构建环境：development的构建结果
│   └── temp
├── build.xml
├── classic               # 针对classic toolkit的源代码
│   ├── sass
│   └── src               # 组件，主要是UI组件
├── ext                   # 复制来的ExtJS SDK完整目录
├── index.html            # 入口点网页
├── modern                # 针对modern  toolkit的源代码
│   ├── sass
│   └── src               # 组件，主要是UI组件
├── overrides             # 对组件的重写存放在此
├── packages              # 依赖的包存放在此
├── resources             # 资源文件存放在此
├── .sencha
│   ├── app
│   │   ├── defaults.properties   # 构建属性的默认值和说明
│   │   ├── development.defaults.properties # 针对构建环境development的默认构建属性
│   │   ├── development.properties # 针对构建环境development的构建属性
│   │   ├── ext.properties  # 针对ExtJS的构建属性
│   │   ├── sencha.cfg      # Sencha Cmd配置文件
└── workspace.json        # 工作区描述符文件

执行下面的命令构建当前应用：

sencha app build

该命令会构建你的HTML页面、JS代码和主题到build目录中。

Sencha Cmd根据你的app.json，生成自举脚本（bootstrap）。自举脚本向动态类加载器（Ext.Loader以及微加载器）传递必要的信息，后者负责加载程序代码。自举脚本不会被你的JS代码的变动影响，因此你需要执行编辑 - 保存 - 重新载入 这样的工作流程。

要保证自举脚本与最新的源码文件匹配，可以基于以下两种途径之一：

1. 使用

   sencha app watch

    ，该命令启动一个Web服务器，并且监控源码，在源码改变后立即执行一次开发环境构建（development build）。该方式支持Fashion的Live Update功能
2. 手工构建并更新：
   

   # 除了更新JS部分，还继续样式的编译，并生成CSS
   sencha app build development
   # 仅仅更新bootstrap与JS相关的部分
   sencha app refresh

Cmd 6引入了此组件，用于支持快速开发ExtJS 6主题。联合使用app watch可以启用所谓实时更新（Live Update）的特性。

实时更新利用Fashion来编译Scss，并且将其生成的最新CSS注入到浏览器页面。Fashion基于JavaScript实现，不需要Ruby的支持。

Fashion扩展了Sass语言，添加了新的特性，以便Sencha Inspector之类的工具可以可视化的查看、编辑主题、应用中定义的变量。

配置app.json以启用实时更新：

"development": {
    "tags": [
        "fashion"
    ]
},

也可以不指定上述配置，直接修改URL来启用实时更新：

?platformTags=fashion:1

启用实时更新时，加载到浏览器的是Sass而非生成的CSS，当Sass发生变化时，Fashion会立即编译之并更新页面上的CSS。

动态变量是Fashion对Sass的语言扩展。在Fashion中动态变量非常重要，动态变量类似于普通变量，但是其值被

dynamic()

$bar: dynamic(blue);
$foo: dynamic($bar);  // 变量$foo依赖于$bar
$bar: dynamic(red);

@debug $foo;  // $foo的值为red而不是blue

可以注意到，动态变量的值并非在逐行处理过程中确定的。对动态变量的处理分为赋值、估算两个阶段。

赋值阶段的处理类似于普通变量，按照级联的顺序赋值。对动态变量的赋值只能在文件范围（位于任何控制块的外面）进行：

$bar: dynamic(blue);

@if something {
    $bar: dynamic(red); // 非法
}

$bar: dynamic(if(something, red, blue)); // 合法

这一限制是动态变量估算、提升行为（hoisting behaviors）所需。

在声明之后，再次对动态变量赋值，必须要附带dynamic()：

$bar: dynamic(blue);
$bar: red;  // bar被赋值为red
$bar: green !default;  // 重新赋值为green
@debug $bar;   // green

在该阶段，根据依赖顺序（而不是声明顺序）确定动态变量的实际值，例如：

$bar: dynamic(mix($colorA, $colorB, 20%));
$bar: dynamic(lighten($colorC, 20%));

由于对$bar进行了再次赋值，$bar依赖于$colorC，因此仅当$colorC的值被估算出来后，$bar的值即可确定，至于$colorA、$colorB何时估算，与$bar无关。

为了实现估算阶段的逻辑，Fashion收集所有动态变量，在执行任何Sass代码之前统一的估算它们。这意味着类似于JavaScript变量，Fashion动态变量也是被提升到作用域最前面的。

当一个变量用于给动态变量赋值，其本身也被升级为动态变量：

$foo: blue;   // 尽管$foo作为普通变量声明，但是由于动态变量$bar依赖于它，因此$foo被升级为动态变量
$bar: dynamic($foo);

你可以通过编写JS代码来扩展Fashion，要在Sass中包含这些扩展代码，可以：

require("my-module");
require("../path/file.js");

在内部，Fashion使用ES6的System.import加载标准的JS模块。

一个扩展的代码可以如下：

// ES6以前的版本
exports.init = function(runtime) {
    runtime.register({
        magic: function (first, second) {
        }
    });
};
// ES6
module foo {
    export function init (runtime) {
        runtime.register({
            magic: function (first, second) {
            }
        });
    }
} 

编译器是Sencha Cmd的主要组件。此编译器并不类似于：

1. YUI压缩器
2. Google Closure编译器
3. UglifyJS

上述工具解决JS开发者面临的不同问题，但是它们不能理解Sencha框架，例如Ext.define用于定义类。

编译器用于提供框架相关的优化、诊断，一旦代码通过了此编译器，其它一般性的工具可以继续处理它。这类优化可以极大的改善ExtJS的加载时间，特别是针对遗留浏览器。

为了编译器能够最优化的操作， 你必须遵循一系列的编码约定，这样编译器才能理解你的代码，进而执行优化操作。

Cmd生成的动态加载器，以及之前的JSBuilder，都假设代码按照一定的规则组织。你应该保证：

1. 每个JavaScript源文件应该在全局作用域包含一个Ext.define 语句
2. 源文件的文件Base名必须和ExtJS类的Simple name匹配
3. ExtJS类的命名空间应当映射为源码子目录
4. 为了让编译器能够自由的在类级别选择代码，应当确保一个类对应一个文件

第2、3两条类似于Java的包与文件系统的映射规则。

编译器能够识别Ext.define的以下关键字（keywords）并进行优化处理：requires、uses、extend、mixins、statics、alias、singleton、override、alternateClassName、xtype

除了Ext.define最常用的调用方法——第二个参数传递简单对象以外，编译器也能够识别以下几种调用变体：

// 指定第二个参数为函数
Ext.define('Foo.bar.Thing', function (Thing) {
    return {
        // 这里声明关键字
        extend: '...',
    };
});
// 指定第二个参数为函数调用
Ext.define('Foo.bar.Thing', function () {

    return {
        // 这里声明关键字
        extend: '...'
    };
}());

从ExtJS 4.1/Touch 2.0开始，Ext.define能够管理重写。在历史版本中，重写用于打补丁以解决BUG或者增强功能。在引入动态加载器后，情况变得复杂，因为

Ext.override

现在，编译器能够理解重写，以及它们对依赖、加载顺序的影响。在未来的版本中，编译器在消除dead code（被override替换）时会更加激进。遵循本节的规则，你可以在未来版本获得益处。

标准的重写代码范例如下：

// 尽管这里选定的名字空间是任意的，但是最好遵循下文说明的规则
Ext.define('MyApp.patches.grid.Panel', {
    override: 'Ext.grid.Panel',
    ...
});

通过重写来打补丁是最常见的应用。你应当把所有补丁的命名空间与它针对的目标类的命名空间对应，例如MyApp.patches对应Ext。

除了打补丁，重写还可以用做不完整类（Partial Classes）。当你使用Sencha Architect之类的代码生成器时，一个类通常分类两个部分：机器生成部分、人工编写部分，这种划分有助于机器部分的重新生成。不完整类的用法示例：

// 自动生成的类
Ext.define( 'Foo.bar.Thing', {
    // NOTE: This class is generated - DO NOT EDIT...
    requires: [
        'Foo.bar.custom.Thing'
    ],
    method: function () {
    },
} );
// 重写，作为部分类
Ext.define( 'Foo.bar.custom.Thing', {
    override: 'Foo.bar.Thing',
    method: function () {
        this.callParent(); // 调用自动生成的方法
    },
} );

重写的最后一种用法是作为切面（Aspect） 。OOP会导致的一个问题就是过度肥胖的基类，这是因为它包含过多的公共逻辑。使用override，可以分离出其中的逻辑，而仅仅在需要使用的时候，才require之：

// 作为切面的重写
Ext.define('Foo.feature.Component', {
    override: 'Ext.Component'
});
// 作为切面的重写，与Foo.feature.Component提供一个产品族
Ext.define('Foo.feature.grid.Panel', {
    override: 'Ext.grid.Panel',

    requires: [
        'Foo.feature.Component' // 由于重写不产生继承关系，这里必须显式require
    ]
});


// 需要使用上述切面的客户代码：

requires: [
    'Foo.feature.grid.Panel'
]
// 或者
requires: [
    'Foo.feature.*'
]

注意：在重写时，你可以调用

callSuper()

除了JavaScript、CSS、HTML以外，Web应用程序往往包含很多代码无关的资源文件（也叫资产，Asset）——图片、视频、数据文件。Cmd将这些资产分类并提供多种管理它们的选项。

资源文件一般都放在名为resources的目录下，这些目录可能来自：

1. 对于单Toolkit应用，位于应用根目录，例如MyApp/resources
2. 对于Universal应用，位于应用根目录，以及各Toolkit下，例如MyApp/resources、MyApp/classic/resources
3. 主题附带的资源文件，位于主题的根目录，例如theme-neptune/resources
4. 软件包附带的资源文件，位于软件包的根目录

你可以应用程序描述符app.json中的resources数组，用来定制应用程序资源的来源：

"resources" [{
    "path": "resources",   // 改变此配置以便在其它目录中存放资源
}]

对于单Toolkit应用，仅该数组的第一个元素作为实际的资源路径，其它元素、第一个元素的output设置都被忽略。 

对于Universal应用，该数组可以指定多个元素，并且使用output来指定使用哪个资源池：

"resources": [{
    "path": "resources",
    "output": "shared"   # 使用shared资源池
}, {
    "path": "${toolkit.name}/resources"   # 使用默认资源池
}],

这样，可以被多个Toolkit共享的资源，就可以放在（默认）应用根目录的resources目录下，而Toolkit独有的资源则放在与Toolkit同名的目录的resources子目录下。

对于包，支持像Universal应用那样声明多个资源目录、使用哪个资源池。

app.json的顶级output元素， 声明在构建后的应用程序文件被输出到何处：

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    // 例如 ./workspace/build/production/MyApp
},

对于Universal应用，可以定义资源池（resource pools）：

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    // 资源池定义
    "resources": {
        // 默认资源池，对应buildId下的resources目录
        "path": "${build.id}/resources",
        // 名为shared的共享资源池，对应应用程序的根目录下的resources子目录
        "shared": "resources"
    }

},

应用、主题、包中的资源文件，都输出到某个资源池中：

1. 单Toolkit应用、主题中的资源文件，输出到默认资源池
2. Universal应用，默认的，应用根目录下resources输出到共享资源池；toolkit.name/resources输出到默认资源池
3. 包的资源输出到资源池的package.name子目录下。这是应用程序构建为包提供的沙盒

多个不同来源的资源文件，可能存在路径名相同的情况，此时会按照一定的规则覆盖：

1. 由于主题支持继承，因此子主题中的同名资源，自动覆盖父主题中的资源
2. 在应用的resources目录中（如果是Universal应用，则必须是toolkit.name/resources目录中）的文件，可以覆盖同路径的来自主题、包的资源文件

与应用类似，包也具有自己的描述符package.json：

// 构建输出
"output": "${package.dir}/build",
// 资源路径
"resources": [{
    "path": "resources"
}]

为了让非Cmd应用使用包，可以单独构建之：

sencha package build

为了防止不同包中同名资源被意外的覆盖，应用程序构建（App build）为包中的资源提供沙盒，即，为每个包的资源提供resources的子目录，子目录以包名为名称。

由于应用程序资源、包资源路径处理方式的不同，因此在CSS中引用时，需要注意。Cmd提供了API来获取资源的正确路径：

.arrow-button {
    // 不使用资源池，或者使用默认资源池时：
    background-image: url(get-resource-path('images/arrow.png'));
    // 使用资源池时：
    background: url(get-resource-path('images/foo.png', $pool: 'shared'));
}

在JavaScript中，也有类似的API：

image.setSrc(
    // 第二个参数为资源池的名称
    Ext.getResourcePath('images/arrow.png', null, 'arrow-button') 
); 

Sencha Cmd应用的packages目录包含local、remote两个子目录，分别存放本地、远程包。

你可以在app.json中使用requires声明对包的依赖。sencha app build、sencha app refresh命令会自动把包集成到应用程序中。

执行下面的命令可以生成一个本地包：

sencha generate package common

此包的内容放置在packages/local/common目录中。此包的packages.json中会自动添加

local: true

远程包的管理是基于包仓库（package repositories）进行的，Cmd会自动生成一个本地的包仓库，用于缓存、发布包。

执行下面的命令，可以查看可用的远程仓库列表：

sencha repository list

sencha repository add

sencha repository remove

sencha-*、ext-*、touch-*、cmd-*这些前缀的包名被内部使用。

可以指定当前包的版本号，以及它和什么样的历史版本兼容：

{
    // 当前版本
    "version": "n.n.n",
    // 兼容的最低版本
    "compatVersion": "2.4.2",
}

在应用描述符的requires里，可以附加版本要求：

"requires": [ "ext-easy-button@1.0" ]

Cmd引入工作区的概念，以便管理多个需要共享框架、代码、样式、资源的应用程序。

构建一个大型应用程序的步骤与构建一个单页应用程序的起始步骤一样。一旦应用程序扩展到多个页面，以下常见问题将会出现：

1. 如何共享的使用同一框架
2. 如果跨页面共享代码
3. 如果共享第三方包

为了解决这些问题，Cmd引入了工作区的概念。一个工作区是包含了多个页面（在Sencha的术语里叫应用，Application，因为应用一般都是单页面的，一个应用只进行一次Ext.application调用）、框架（不同版本）、包以及其它共享代码/文件的目录。工作区的根目录通常会纳入版本控制。

如果在工作区内组织各页面的目录并不重要，但是通常把它们的目录作为工作区根目录的直接子目录。

执行下面的命令可以创建一个工作区：

sencha generate workspace /path/to/workspace

# 生成的目录结构如下：
.
├── packages
├── .sencha               # Sencha Cmd相关文件
│   ├── .cvsignore
│   ├── .gitignore
│   └── workspace         # 工作区相关文件
│   ├── plugin.xml
│   └── sencha.cfg        # Sencha Cmd配置
└── workspace.json        # 工作区描述符

所谓微加载器（Microloader）是Sencha的数据驱动的JavaScript/CSS动态加载器。微加载器由Cmd提供，并作为生成的应用程序的一部分。

ExtJS 6的微加载器实现与ExtJS 5或者Touch不同，它增强了一些功能，这些功能可以在app.json中配置。执行

sencha app upgrade

Cmd会把app.json转换为manifest供微加载器在运行时使用。你也可以在运行时调用

Ext.manifest

有三种方式来指定微加载器使用什么Manifest：

1. 嵌入式Manifest，配置：
   

   "output": {
       "manifest": {
           "embed": true
       }
   }

    可以在构建期间把Manifest嵌入到bootstrap.js文件中

2. 命名Manifest，你可以指定从哪个文件中加载Manifest，默认app.json：
   

   <script type="text/javascript">
       var Ext = Ext || {};
       Ext.manifest = 'foo';  // 从./foo.json加载
   </script>
   <script id="microloader" data-app="f72c0f68" type="text/javascript" src="bootstrap.js"></script>

3. 动态指定Manifest，你可以动态的设置Ext.manifest为任意字符串为应用描述符文件的basename

微加载器负责解析app.json并生成manifest，大概步骤如下：

1. 读取app.json，其中内容被后续步骤解析
2. 获取app.json中与当前构建环境（production/testing/development）匹配的设置，作为基础manifest
3. 获取app.json中与当前构建配置匹配（builds.***）的设置，覆盖上面的manifest
4. 读取app.json中与当前Toolkit匹配（classic/modern）的设置，覆盖上面的manifest
5. 读取app.json中与当前packager匹配的设置，覆盖上面的manifest
6. 开始处理依赖包，如果package.json中声明了js、css，则它们按照包的依赖顺序，插入上面manifest['js']或者manifest['css']数组的最前面。package.json中其它内容被置入manifest的packages属性中

Cmd生成的脚手架代码中已经引用的微加载器：

<script id="microloader" data-app="12345" type="text/javascript" src="bootstrap.js"></script>

其中data-app为应用的UUID，该ID会在LocalStorage中作为Key使用，避免多个页面的数据混乱在一起。

由Cmd自动生成的app.json叫做应用描述符，该描述符会被微加载器使用，并且在运行时暴露为 Ext.manifest。你可以定制其中的很多配置项，以改变应用的行为。下表列出最常用的配置项：

"theme": "ext-theme-crisp"

"classpath": [
    "app",
    "${toolkit.name}/src"
] 

"js": [{
    "path": "app.js",
    "bundle": true
}]

"js": [{
    "path": "library.js",
    "includeInBundle": true // 包含在concatenated classes中，如果false，则此文件在构建结果中存在，由微加载器独立加载
},{
    "path": "app.js",
    "bundle": true  // 只能有一个元素定义此属性，设置为true则此文件作为concatenated classes容器
}]

"css": [
    {
        "path": "${build.out.css.path}",
        "bundle": true,
        "exclude": [
            "fashion"
        ]
    }
],

"output": {
    "page": {
        "path": "../page.jsp",
        "enable": false // 仅仅说明页面URL是哪个，但是不赋值源文件到输出
    }
}

"output": {
    "appCache": {
        // 启用缓存
        "enable": true
    },
    "appCache": {
        // 哪些使用缓存
        "cache": [
            "index.html"
        ],
        // 哪些必须联网获取
        "network": [
            "*"
        ],
        // 哪些在联网获取失败时使用缓存
        "fallback": []
    }
},

"js": [
    {
        "path": "app.js",
        "bundle": true,
        "update": "delta"
    }
],

"css": [
    {
        "path": "app.css",
        "update": "full"
    }
]

"cache": {
    "enable": true
}

"cache": { "deltas": true }

Ext.application( {
    name: 'MyApp',
    mainView: 'MyMainView',
    // 监听缓存更新事件
    onAppUpdate: function () {
        Ext.Msg.confirm( '应用程序已更新',
            function ( choice ) {
                if ( choice === 'yes' ) {
                    window.location.reload();
                }
            }
        );
    }
} );

"builds": {
    "classic": {
        "theme": "ext-theme-classic"
    },
    "gray": {
        "theme": "ext-theme-gray"
    },
    "access": {
        "theme": "ext-theme-access"
    },
    "
}

"locales": [ "en", "he" ]

"tags": ["ios", "phone", "fashion"]
// 或者
"tags": {
    "ios": true,
    "phone": true,
    "desktop": false,
    "fashion": true
}

PhoneGap基于Cordova构建，并提供一些辅助工具，例如远程构建服务。

基于Sencha Cmd构建时，仅能构建DEBUG版本的Cordova/PhoneGap应用，要构建能够在应用商店下载的APP你需要使用Android Studio/XCode。

首先，按照一般性步骤创建Cmd应用：

mkdir MyApp && cd MyApp
sencha app init --ext=/home/alex/JavaScript/extjs/6.2.0 MyApp --universal

当开发ExtJS 6 Universal应用时，则上述生成的应用结构的app.json中已经包含了builds块，这种情况下sencha cordova/phonegap子命令无法修改此块，因此你需要手工的修改：

"builds": {
    "classic": {},
    "modern": {
        "toolkit": "modern",
        "theme": "theme-triton",
        // 如果使用Cordova，可以添加：
        "cordova": {
            "config": {
                "platforms": "ios",
                "id": "cc.gmem.myappid"
            }
        },
        // 如果使用PhoneGap，可以添加：
        "packager": "phonegap",
        "phonegap": {
            "config": {
                "platform": "ios",
                "id": "cc.gmem.myappid"
            }
        }
    }
},

然后进入工程目录，初始化Cordova/PhoneGap支持：

sencha phonegap init cc.gmem.myappid  MyApp
# 或者
sencha cordova init cc.gmem.myappid MyApp

当开发ExtJS Modern应用程序时，上述命令会自动生成如下builds块：

// native仅仅是一个构建配置名（build-name），你可以将其修改为任意值
"native": {
    "packager": "cordova",
    "cordova": {
        "config": {
            "platforms": "ios android",  // 需要支持的移动平台
            "id": "cc.gmem.myappid2",    // 用于唯一识别应用程序的标识符
            "name": "MyApp2"             // 应用程序名称
        }
    }
}

上述命令执行完毕后，在工程目录会出现cordova或者phonegap子目录。 这些子目录的内容与普通Cordova/PhoneGap工程一致。

下面的Cmd子命令可以用于构建出Native软件包： 

# 首先构建Sencha应用程序，然后构建Native应用
sencha app build {build-name}
# 首先构建，然后尝试在连接上来的设备上运行程序
sencha app run {build-name}
# 首先构建，然后尝试在模拟器上运行程序
sencha app emulate {build-name}
# 构建Sencha应用程序，然后拷贝到Cordova/PhoneGap指定目录，准备后续的Native构建
sencha app prepare {build-name}

使用PhoneGap远程构建服务，可以避免很多麻烦的问题，例如下载SDK、工具，购买Mac电脑。你仅仅需要把自己的Web应用上传到PhoneGap服务器，Adobe就可以自动的把Native应用生成给你。在开始之前，你需要到PhoneGap网站申请一个免费账号。如果要构建iOS应用，你需要在PhoneGap网站上填写一系列的credentials信息。

要启用远程构建，需要配置app.json：

"builds": {
    "native": {
        "packager": "phonegap",
        "phonegap" : {
            "config": {
                "platform": "ios",
                "remote": true,  // 远程构建
                "id": "com.mydomain.MyApp"
            }
        }
    }
}

为了向Cmd提供你的PhoneGap网站账号信息，你需要在应用根目录创建一个local.properties文件：

phonegap.username=name@me.com
phonegap.password=passwd

远程构建完毕后，你可以到PhoneGap门户去下载安装包，或者将其发布到应用商店。 

"frameworks": {
    "ext62": "ext",
    "ext602": "ext-6.0.2"
}

"framework": "ext62"

# 自动生成frameworks子项，其键根据目录中ExtJS的版本号推导出，例如6.2.0 版本的键为ext62，6.0.2版本的键为ext602
sencha framework add /path/to/ext
# 手工指定键值  path为拷贝到工作区的哪个子目录，key为键，必须以ext或者touch开头
sencha framework add -key extFiveO -source /path/to/ext-5.0.0 -path ext50

sencha generate app -extFiveO AppName path/to/app

# --force 即使有应用程序在使用，也强制删除框架
sencha framework remove --force  extFiveO

# 从/path/to/ext目录升级以ext作为key的框架
sencha framework upgrade ext /path/to/ext
# 升级单个应用程序
sencha app upgrade ../ext62
# 升级整个工作区中所有应用程序、包中和Cmd相关的文件
sencha workspace upgrade 

sencha framework list

# 除了--modern，还可以 --classic 或者 --universal
sencha app init --ext=/path/to/extjs/ AppName --modern

sencha app build

sencha app install --frameworks=/path/to/extjs
# frameworks是 6.1引入的特性，允许你指向一个具有多个版本ExtJS的目录
# 当前使用的ExtJS版本定义在workspace.json中，Cmd会自动选择最匹配的版本

sencha workspace install --frameworks=/path/to/extjs 

"output": {
    "js": {
        "version": "ES6"
    }
}

The post Sencha Cmd学习笔记 appeared first on 绿色记忆.

由于PhoneGap和Apache Cordova在底层上的一致性，本文主要讨论PhoneGap提供的额外工具，其他主题请参考：

1. 基于Apache Cordova开发移动应用程序

一个框架，支持通过标准的基于JavaScript的API，来开发跨平台的移动应用。PhoneGap同时支持基于Web、基于Native两种风格的混合应用，它通过联合使用Native元素和Web元素，来达到更加Native的look and feel。通过PhoneGap底层的Apache Cordova框架，我们可以使用很多设备的原生特性，例如GPS、罗盘、摄像头。

基于PhoneGap的混合应用有以下额外的特点：

1. 不能完整调用原生API：只有受限的、通用的基础API被Cordova框架支持
2. 平台差异化不足，应用界面长得差不多

后者是PhoneGap的底层框架，PhoneGap是后者的一个distribution。两者提供的命令行工具很类似，使用一套插件体系。PhoneGap提供了一些额外功能，包括：

1. PhoneGap Developer App
2. PhoneGap Desktop App
3. PhoneGap Enterprise
4. 云端构建功能

PhoneGap依赖于Node.js、NPM（Node.js目前自带）、git，准备好后，运行：

npm install -g phonegap@latest

安装结束后，即可运行命令

phonegap 

PhoneGap为Windows、Mac OS X提供了图形化界面，使用它可以方便的创建新的PhoneGap应用。可以到这里下载Windows的安装包。

该工具价值不大，使用PhoneGap CLI可以很容易的代替之。

PhoneGap提供了一个移动APP——PhoneGap Developer App（以下简称PGDA），可以方便的在设备上预览、测试PhoneGap应用。不需要任何插件的支持或者编译步骤，该APP就可以支持设备Native特性的访问。

该APP有安卓、IOS、WP三个版本，可以到对应的商店下载安装。

PGDA本质上就是一个Phonegap应用程序，只是它具有从远程服务器上同步最新Web代码的能力。PGDA默认自带了Cordova内置插件，如果你要使用第三方插件，必须自己构建PGDA。

PGDA的源码托管在：https://github.com/phonegap/phonegap-app-developer

下载源码后，可以参考如下方式添加新插件支持，并构建（以Android为例）：

cd phonegap-app-developer
# 添加NFC插件的支持
cordova plugin add phonegap-nfc
#构建Android平台
cordova build android

构建完毕后，文件platforms\android\build\outputs\apk\android-debug.apk即为最新的PGDA安装包，安装到设备即可。 

打开PhoneGap桌面版本，点击左侧的+号，即可创建新的PhoneGap应用。输入路径、名称、ID后，即可创建工程。新创建的工程的结构如下：

亦可导入既有的PhoneGap应用，Apache Cordova应用也是支持的，可以导入。

点击项目右侧的右侧的运行按钮，会启动一个HTTP服务，侦听3000端口。

打开移动设备，点击PGDA图标，输入上述HTTP服务的地址和端口，点击Connect，看到DEVICE IS READY字样，说明设备和HTTP服务器连接成功。在此设备界面上：

1. 四指轻触：刷新视图
2. 三指轻触：回到PGDA主界面

现在，可以打开

www/index.html

<h1>PhoneGap</h1>

命令格式：

phonegap [子命令] [选项]

phonegap create [options] <path> [id [name [config]]]

phonegap create project-dir cc.gmem.phonegap.study PhonegpStudy

phonegap run [<platforms>] [options] [-- [platform options]]

# 列出可用模板
phonegap template list

phonegap serve [options]

phonegap remote [command]

利用Adobe提供的PhoneGap云端服务，只需要上传PhoneGap应用程序的资产文件（HTML、CSS、JavaScript），后续的构建工作可以在云端完成。使用云构建服务，可以：

1. 避免本地维护各套平台SDK、甚至安装多套操作系统的麻烦
2. 加快开发周期，在云端可以更快的构建，并且构建结果可以推送到测试人员预安装的App中

云构建服务分为免费、收费版本，免费版本仅支持一个私有（闭源、商业）App。

自动重新加载时，PhoneGap CLI会在控制台上打印信息：

[phonegap] 200 /__api__/autoreload

自动重新加载的前提条件是，页面引用cordova的JavaScript文件：

<script type="text/javascript" src="cordova.js"></script>

此外，某些版本上的模拟器不能正常reload，可能是兼容性问题。

我的手机是越狱后的iOS 6.1.2，在AppStore下载的PGDA 1.5.12，无法连接到通过

phonegap serve

到GitHub上逐个下载预构建版本并安装测试，发现：

1. 1.5.x：全部不能使用
2. 1.4.0：可以连接但无法自动重新加载
3. 1.3.0：能够连接，也可以autoreload

很无语……现在安装1.3.0正常使用。

The post PhoneGap学习笔记 appeared first on 绿色记忆.

1. 目标平台：本文中会反复出现该名词，目标平台是指移动操作系统+移动应用SDK构成的移动应用支撑环境。有时也称作移动平台，或简称平台
2. 构建平台：在其上运行Cordova工具，生成目标平台应用程序的宿主操作系统
3. PhoneGap：目前作为Apache Cordova的一个发行版，它们的命令行非常相似。PhoneGap提供了一些更高级的组件，例如云端构建、设备端工具（PhoneGap Developer App）

可以选择三种方式来开发移动应用，它们各有特点：

1. 为特定的设备、操作系统构建。需要熟悉设备SDK，甚至特殊的开发语言：Objective-C/Swift (iOS)；Java (Android)；C# (Windows)
2. 安装到设备，作为本地程序运行
3. 使用原生的API和控件
4. 通常必须经过应用市场的验证才能被客户使用
5. 可以离线使用
6. 性能优秀

1. 在任何移动浏览器中运行
2. 支持受限的使用设备特性
3. 基于标准的Web技术构建，包括HTML、CSS、JavaScript
4. 需要支持多种屏幕尺寸
5. 需要Web服务器的支撑，不支持离线使用
6. 性能较差

所谓混合应用，就是结合了前两者的特性和优势的应用，混合应用可以分为两种风格：

1. 基于Web的混合应用（Web hybrid mobile apps）：APP运行在一个很薄的Native容器+WebView中，该容器仅作为访问Native特性的桥梁，所有UI组件均基于Web技术构建
2. 基于Native的混合应用（Native hybrid mobile apps）：包含很多的Native控件，以及1-N个WebView。常常使用Native控件做导航、并在提供应用内容的WebView之间进行切换

混合应用具有以下特性：

1. 安装到设备，作为本地程序运行
2. 应用逻辑主要在WebView（嵌入的Web浏览器）中运行
3. 大部分代码是跨平台的
4. 支持访问原生特性
5. 由于应用内容主要使用基于设备内置浏览器引擎，因此性能比起原生应用差

Apache Cordova是一个开源移动应用开发框架，它允许你使用标准的Web技术——HTML5、CSS3、JavaScript ——来进行跨平台开发，避免使用各移动平台Native的编程语言和SDK。基于Cordova的应用程序被包装在各平台的Wrapper中，使用标准兼容的API访问设备传感器、数据和其它Native特性。

Apache Cordova 工程依赖于一个命名为config.xml的配置文件，该配置文件影响应用程序的工作方式（例如是否对横屏做出响应）。

应用程序本身实现为网页，默认情况下是本地的一个index.html文件，该文件可能引用任何Web资源，例如JavaScript、CSS。应用程序被包装在Native的Wrapper中，作为WebView运行。该WebView作为更大的混合（Hybrid ）应用的一个组件，或者占据整个UI。

插件接口（plugin interface ）允许Cordova和Native组件之间进行通信，插件接口以JavaScript的形式提供，从而允许在网页上调用Native代码。理想情况下，各平台的API应该一致，在3.0中，官方插件提供标准化的设备API，而第三方插件可能提供一些特定于特殊平台的API。Cordova官方提供了自定义插件的开发文档。

从3.0开始，新创建的Cordova工程默认不包含任何插件，所有插件都需要手工添加。

Cordova 应用的开发工作流有两种：

1. 以Cordova CLI为中心跨平台工作流：如果需要应用在尽可能多的平台上运行，可以使用这种方式，该方式需要很少的平台特定开发工作量。CLI是3.0引入的，可以同时为多个平台构建工程的工具，它是Cordova跨平台工作流的核心。CLI会创建Cordova工程的初始结构、把Web资产文件拷贝到各平台的子目录下、对各平台进行必要的配置，然后运行脚本生成二进制程序。CLI也提供了为应用添加插件的公共接口
2. 以平台为中心的工作流：如果需要构建特定单个平台的应用，以及需要在底层基于平台SDK对代码进行修改，可以使用该方式。典型的例子是开发Native-based混合应用，需要把WebView和其他Native组件集成时。使用这种方式开发时，可以通过Plugman来添加插件

推荐以第1种方式开始，使用CLI创建Cordova工程，在必要时切换到第2种方式。针对平台的低级别Shell工具可以在工程的

platforms/*/cordova

使用Cordova的命令行接口（CLI），可以完成新工程的创建、针对各平台进行构建、并部署到设备（或模拟器）中运行。

在安装和使用CLI前，必须下载和安装相关目标平台的SDK和相关工具，如果不安装，在调用CLI进行应用构建时会收到错误提示，例如：

#没有安装完整Android SDK机器上的报错信息
Running command: cmd "/s /c "...\cordova-study\platforms\android\cordova\build.bat""
[Error: Please install Android target: "android-22".

Hint: Open the SDK manager by running: D:\Android\sdk\tools\android.BAT
You will require:
1. "SDK Platform" for android-22
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
ERROR building one of the platforms: Error: cmd: Command failed with exit code 2
You may not have the required environment or OS to build this project

CLI支持的目标平台（构建平台）包括：

1. iOS（Mac）
2. Android (Mac, Linux, Windows)
3. BlackBerry 10 (Mac, Linux, Windows)
4. Windows Phone 8 (Windows)

可以看到如果要支持全部主要的目标平台，你需要在不同操作系统上运行CLI命令，这意味着你应该使用代码库（SVN/Git）来管理工程。

1. 安装Node.js
2. 安装Git客户端
3. 通过npm命令安装cordova模块：
   

   # 安装Cordova为全局模块
   npm install -g cordova
   #安装特定版本的Cordova
   npm install -g cordova@3.1.0-0.2.0
   
   #更新Cordova
   npm update -g cordova
   
   #显示版本信息
   cordova -v

执行下面的命令创建工程：

pushd D:\JavaScript\projects\cordova\5.4.1
# cordova-study在当前目录下创建的子目录，作为工程文件的容器
# cc.gmem.study.cordova 域名反转的包名，可能被生成的外部文件引用，例如Android包名
# CordovaStudy 应用程序的标题
# 第2/3个参数可以在config.xml中手工修改
cordova create cordova-study cc.gmem.study.cordova CordovaStudy

命令执行完毕后，生成如下目录结构： 

运行下面的命令添加对特定平台的支持：

#添加Android平台的支持
cordova platform add android
#输出如下：
Running command: cmd "/s /c "...\create.bat ...\cordova-study\platforms\android cc.gmem.study.cordova CordovaStudy --cli""
Creating Cordova project for the Android platform:
        #创建目标平台工程特定的文件
        Path: platforms\android
        Package: cc.gmem.study.cordova
        Name: CordovaStudy
        Activity: MainActivity
        Android target: android-22
Copying template files...
Android project created with cordova-android@4.1.1
#安装插件
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for android


#添加iOS平台的支持，需要在安装了iOS SDK的Mac OS X上执行
cordova platform add ios
#添加Windows Phone 8平台的支持，需要在Windows上运行
cordova platform add wp8


#下面的命令示例了如何移除平台的支持
cordova platform remove blackberry10

#添加指定版本的cordova平台支持，并保存到config.xml中
cordova platform add android@3.7.0 --save

运行上述命令后，Cordova工程的platforms、plugins子目录出现一些下载/生成的文件：

前面我们说过，创建新工程可以从CLI命令行开始，在必要时切换到特定平台的开发工作中去。在此，就可以进行切换了：只需要把platforms子目录导入到Eclipse、XCode等IDE即可，然后以IDE为中心完成后续开发。

如果继续执行以CLI为中心的工作流，则需要继续了解下面的小节。

执行下面的命令可以构建应用程序的二进制文件并打包：

# 构建所有平台
cordova build
# 构建特定平台
cordova build ios

上述build命令实际上包含了两个步骤： 

# 准备阶段，会把Cordova源码拷贝、合并到平台的对应目录中
# 一旦执行完该命令，就可以用特定平台提供的SDK进行修改、编译
cordova prepare ios
# 编译
cordova compile ios

运行下面的命令重新构建特定平台的应用，并部署到模拟器中：

# 运行下面的命令后，Cordova会自动启动模拟器，并把APK安装到上面
# 如果有模拟器正在运行，则使用既有的模拟器
cordova emulate android
# APK安装完毕后，将自动运行

 或者，将启用了调试模式的手机连接到当前计算机，然后运行：

cordova run android

你可以使用Web技术修改Cordova生成的应用骨架，来开发漂亮的页面。但是如果想使用设备底层特性，则必须添加插件，利用插件可以访问核心Cordova API。第三方/自己开发的插件可以用来访问特殊的设备特性，要访问通用设备特性使用Cordova提供的的插件就足够了。官方插件和第三方插件的列表位于http://cordova.apache.org/plugins/。

下面的命令用来搜索插件：

#同时包含bar和code的插件
cordova plugin search bar code

下面的命令用来列出当前工程已添加的插件：

cordova plugin ls

下面的命令用来移除已经添加的插件：

cordova plugin rm cordova-plugin-console

下面的命令用来给应用程序添加插件：

#依据插件ID添加
cordova plugin add plugin-id
#添加特定版本的插件
cordova plugin add plugin-id@latest
cordova plugin add plugin-id@1.2.0

# 设备基本特性
cordova plugin add cordova-plugin-device
# 网络连接信息
cordova plugin add cordova-plugin-network-information
# 电池状态
cordova plugin add cordova-plugin-battery-status
# 加速度计
cordova plugin add cordova-plugin-device-motion
# 横屏切换
cordova plugin add cordova-plugin-device-orientation
# 地理位置信息
cordova plugin add cordova-plugin-geolocation
# 摄像头
cordova plugin add cordova-plugin-camera
# 媒体截屏
cordova plugin add cordova-plugin-media-capture
# 媒体回放
cordova plugin add cordova-plugin-media
# 访问设备或网络上的文件
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
# 通过振动或者对话框通知用户
cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-vibration
# 访问通讯录
cordova plugin add cordova-plugin-contacts
# 国际化
cordova plugin add cordova-plugin-globalization
# 启动画面支持
cordova plugin add cordova-plugin-splashscreen
# 打开新的应用内浏览器窗口
cordova plugin add cordova-plugin-inappbrowser
# 调试控制台
cordova plugin add cordova-plugin-console

CLI根据需要为各平台添加插件代码。Plugman可以为单个平台添加插件支持。 

如果插件没有在默认源（registry.cordova.io ）注册，通过下面的命令添加：

# 从Git的master分支下载插件
cordova plugin add https://github.com/someone/aplugin.git
# 从特定标记或者分支下载插件
cordova plugin add https://github.com/someone/aplugin.git#r0.2.0
# 如果插件（以及plugin.xml）在Git仓库的子目录下，可以
cordova plugin add https://github.com/someone/aplugin.git#:/sub/dir
# 也可以从本地文件系统添加插件
cordova plugin add ../local_plugin_dir

前面提到过，在以CLI为中心的跨平台开发工作流下，不应当修改platforms子目录。那么，如果如何实现平台差异化呢？例如为不同平台提供不同的样式表.css文件，这是很合理的需求。

Cordova提供了一种合并机制，在工程顶级目录下，可以添加一个merges目录，其子目录是各平台的名称，例如

merges/android

merges/android/css/index.css

www/css/index.css

merges中的文件如果在www下没有对应物，会直接复制到特定平台的资产目录下。

命令格式：

cordova 子命令 [选项]

# 显示run子命令的帮助信息
cordova run --help

cordova compile [PROD] [TARGET] [EXP] [PLATS] [-- POPTS]

cordova prepare && cordova compile

cordova run --emulator

cordova serve [PORT]

phonegap serve

首先，参考文章：基于Eclipse ADT和Maven的Android开发 完整Android开发环境的搭建。

由于Android平台官方的开发工具现在是Android Studio，并且基于Gradle构建，所以最好搭建好Gradle环境和Gradle的Eclipse插件。可参考文章：Gradle学习笔记。

通过CLI创建Cordova工程后，一旦添加了Android平台的支持，就可以把platforms/android子目录作为工程导入到Eclipse ADT或者Android Studio。

以Eclipse ADT为例，操作步骤为：

1. File ⇨ Import
2. 在弹出的对话框中选择 Android ⇨ Existing Android Code Into Workspace，点击下一步
3. 把Root Directory定位到Cordova工程的platforms/android目录，选择其中的两个工程，如下图：
   
4. 点击完成，工作区出现两个新的ADT工程，导入完毕

这两个工程就是普通的ADT工程。其中cordovalib是cordova-android的依赖库。在cordova-android上点击右键 ⇨ Run as ⇨ Android Application，即可打包并部署到设备上运行。

上述方式导入的工程结构比较混乱，如果后续开发脱离Cordova进行，建议清理其中不需要的目录和文件。如果不习惯基于Gradle进行构建，可以创建或者转换为Maven工程。

安装了Gradle的Eclipse插件后，可以把platforms/android子目录转换为Gradle工程：

1. File ⇨ Import
2. 在弹出的对话框中选择 Gradle ⇨ Gradle Project，点击下一步
3. 在弹出的对话框中，把Root folder定位到platforms/android子目录，然后点击右侧的Build Model按钮。Gradle从Maven仓库下载一些构件到Gradle缓存目录，完毕后显示如下画面：
4. 点击完成。你可以自由的修改Eclipse工程的名称

如果习惯于使用Maven进行构建工作，可以参考下面的步骤，把platforms/android子目录转换为Maven工程：

1. 参考：基于Eclipse ADT和Maven的Android开发创建Android的Maven工程，设工程根目录为

   %MVN_PROJECT_ROOT%

    。删除自动生成的Activity、res目录，并转换为android-maven-plugin 4.3.0标准的工程结构
2. 如果使用SVN，在目录%MVN_PROJECT_ROOT% 上设置属性svn:ignore为：
   

   target
   bin
   .*
   cli

3. 通过CLI创建对应的（同名同包）Cordova工程，添加必要的插件，设工程根目录为

   %CORDOVA_PROJECT_ROOT%

    
4. 创建Maven工程指向Cordova工程的符号链接：
   

   mklink /D %MVN_PROJECT_ROOT%\cli %CORDOVA_PROJECT_ROOT%

5. 另外创建一个Android的Maven工程“cordova-android”，project.properties中设置

   android.library=true

    ，表示这是一个库工程。设工程根目录为

   %MVN_LIB_ROOT%

    
6. 修改

   %MVN_PROJECT_ROOT%\pom.xml

    ，添加cordova-android的依赖，例如：
   

   <dependency>
       <groupId>org.apache.cordova</groupId>
       <artifactId>cordova-android</artifactId>
       <version>4.4.1-SNAPSHOT</version>
       <type>apklib</type>
   </dependency>

7. 修改Cordova工程的

   %CORDOVA_PROJECT_ROOT%\cli\platforms\android\build-extras.gradle

    文件，添加以下Tasks：
   

   task syncdown_src(type : Copy){
       from 'src'
       into '../../../src/main/java'
   }
   task syncdown_assets(type : Copy){
       from 'assets'
       into '../../../src/main/assets'
   }
   task syncdown_res(type : Copy){
       from 'res'
       into '../../../src/main/res'
   }
   task syncdown_libsrc(type : Copy){
       def dest = '../../../../cordova-android/src/main/java'
       if(file(dest).exists()){
           from 'CordovaLib/src'
           into dest
       }
   }
   task syncdown_manifest(type : Copy){
       from 'AndroidManifest.xml'
       into '../../../src/main'
   }
   task syncdown( dependsOn: [syncdown_src, syncdown_assets, syncdown_res, syncdown_libsrc, syncdown_manifest] )

8. 每当添加Cordova插件，或者修改Cordova工程中其它源码文件后，定位到

   %MVN_PROJECT_ROOT%\cli

   目录，执行：
   

   @echo off
   call cordova prepare 
   pushd platforms\android
   call gradle syncdown
   popd

   这会让所有修改从Cordova工程目录，同步到其Android平台子目录，然后再同步到Maven工程对应目录中。 

Android平台特定的命令行工具位于

platforms/android/cordova

###  构建工程  ###

#Apache Cordova CLI方式
cordova build android

#Android平台命令行工具
platforms/android/cordova/build --debug   #生成调试信息
platforms/android/cordova/build --release #对应用进行签名
#其它参数
# --ant 使用Ant进行构建
# --gradle 使用Gradle进行构建，Cordova 4.0以后的默认值
# --nobuild 不进行构建
# --prepenv 不进行构建，但是拷贝必要的构建脚本
# --versionCode=# 指定本次构建的版本号
# --minSdkVersion=# 指定本次构建要求的最低Android SDK版本代码
# --gradleArg=# 指定传递给Gradle的命令行参数
# --buildConfig 指定包含了构建配置的JSON文件


###  部署到模拟器  ###
# 需要首先配置并启动一台Android模拟器

#Apache Cordova CLI方式
cordova emulate android

#Android平台命令行工具
platforms/android/cordova/run --emulator
platforms/android/cordova/run --target=targetId #指定特定ID的模拟器
#当执行run时，默认会自动构建，可以通过参数-debug --release --nobuild控制此行为
platforms/android/cordova/run --emulator --nobuild

#通过Eclipse部署
#也可以在Eclipse中，Run As - Android Application方式部署应用



###  部署到真实设备  ###

#Apache Cordova CLI方式
cordova run android

#Android平台命令行工具
platforms/android/cordova/run --device



###  其他Android平台命令行工具  ###
platforms/android/cordova/log    #记录APP详细的运行日志
platforms/android/cordova/clean  #清理工程文件

使用Android命令行build、run时，可以通过

--buildConfig

{
     "android": {
         "debug": {
             "keystore": "android.keystore",
             "storePassword": "android",
             "alias": "mykey1", 
             "password" : "password",
             "keystoreType": ""
         },
         "release": {
             "keystore": "android.keystore",
             "storePassword": "", //Release的密码可以不写，等待命令行提示
             "alias": "mykey2",
             "password" : "password",
             "keystoreType": ""
         }
     }
 }

自4.0开始Gradle是Cordova默认的构建工具。

下表列出Cordova提供的Gradle工程属性，可以用于定制构建： 

storeFile=relative/path/to/keystore.p12
storePassword=SECRET1
storeType=pkcs12
keyAlias=DebugSigningKey
keyPassword=SECRET2
#密码是可选的，如果不提供，构建时会进行交互式的提示

如果需要扩展Gradle构建逻辑，可以创建一个

build-extras.gradle

build.gradle

# 此文件的内容被放在build.gradle的开始处

# 设置工程扩展属性
ext.cdvDebugSigningPropertiesFile = 'android-debug-keys.properties'

# 这里指定的闭包，会在build.gradle结尾处执行， 因为build.gradle的最后包含如下代码：
# if (hasProperty('postBuildExtras')) {
#     postBuildExtras()
# }
ext.postBuildExtras = {
    android.buildTypes.debug.applicationIdSuffix = '.debug'
}

有两种方式来打包Cordova应用，并部署到Android设备或者模拟器上测试：

1. 使用Maven：

   package android:deploy android:run

    
2. 使用ADT：在apk工程上面点击右键 Run As ⇨ Android Application

注意，必须让你的设备或者模拟器链接到当前机器上。

这两种方式都比较慢，每次部署都需要数十秒，非常浪费时间。因此可以使用PhoneGap提供的设备端工具，该工具可以免部署的运行Cordova应用。

应用启动后，会自动启用一个WebView，加载config.xml中指定的起始页（默认index.html），让HTML页面占据整个屏幕空间。

例如，对Android平台，系统会执行MainActivity，该Activity是CordovaActivity的子类：

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // 加载HTML
        loadUrl(launchUrl);
    }
}

<!DOCTYPE html>
<html>
    <head>
        <!-- 内容安全策略 -->
        <meta http-equiv="Content-Security-Policy" 
            content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
                     style-src 'self' 'unsafe-inline'; 
                     media-src *">
        <!-- 禁止IOS的电话号码识别 -->
        <meta name="format-detection" content="telephone=no">
        <!-- 禁止Windows Phone 8+的触碰时高亮 -->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes -->
        <!-- 
            视口元标签：指定应用程序占用屏幕的多大空间，以及应用程序如何缩放（zoom） 
            minimum-scale、maximum-scale 最小/最大缩放比率 initial-scale 为初始缩放比率
            user-scalable 是否允许用户缩放
            width、height 界面的宽高
        -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Emulater is Ready</p>
            </div>
        </div>
        <!-- 
            该JS是 Apache Cordova 提供的，用于访问设备硬件（例如摄像头、GPS）的JavaScript API
            该JS只是一个占位符，没有对应的文件。该脚本在运行时由PhoneGap Developer App注入；或者在构建时由Cordova CLI注入
        -->
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

var app = {
    // 程序入口点
    initialize: function() {
        this.bindEvents();
    },
    // 绑定事件监听器，例如'load', 'deviceready', 'offline',  'online'
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    //事件deviceready是Cordova专有的，该事件发生后，Cordova提供的设备API加载完毕并可用
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // 修改DOM内容
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

Cordova应该是基于单页面应用设计的。所谓单页面应用，是指不存在URL导航的Web应用。单页面引用仅在最初加载一次页面，后续的更新通过JavaScript、Ajax完成。

单页面应用有利于增强移动应用的性能，因为避免了重复加载各种资产文件（脚本、图片）。单页面应用对Cordova有额外的好处，因为Cordova应用必须等待deviceready事件，URL导航导致重复的事件等待。

Cordova开发者往往错误的假设，移动设备能够达到和桌面应用一样性能。实际上，尽管移动设备已经长足发展了近十年，在电池、性能方面，仍然无法和桌面应用比较。注意以下几个方面：

1. click vs touch：click事件被大量误用。大部分移动设备添加300ms的延迟，用以区分touch和touch hold。使用touchstart、touchend可能有很大的性能改善——避免频繁的UI更新和其它行为
2. CSS 变换 vs DOM操控：硬件加速的CSS变换比起基于JavaScript的动画，性能有极大的优势
3. 网络延迟：尽量使用Cordova支持的本地存储机制，避免反复通过网络获取数据、资源

使用Cordova提供的offline、online事件的支持，你可以识别出离线状态，并正确的响应用户。注意，这两种事件并不是非常可靠，有时候你应当使用Ajax来判断设备是否真正的断开网络了。

注意：苹果的商店拒绝不能正确处理离线状态的APP上架。

有几种存储方案可以供Apache Cordova应用使用：

1. LocalStorage：同步的基于键值对的存储
2. WebSQL：基于SQL语句的API，支持Android、iOS
3. IndexedDB：支持Windows 8、Windows Phone 8
4. cordova-plugin-file插件：缓存数据到本地文件系统

测试Cordova应用时，你可以使用真实设备、模拟器，甚至是桌面浏览器。但是，在多种真实设备上测试是很有必要的： 

1. 模拟器（Simulator）不能模拟一些真实存在的情况：例如低电池时，应用会出现某个问题，这个问题在模拟器上难以体现
2. 模拟器（Emulator）和真实设备的行为存在不一致：某些模拟器会导致页面显示混乱，但是在真实设备上没有这种问题。4.1.2的AVD，运行5.4版本Cordova的HelloWorld应用，就存在页面显示混乱的情况。你可能需要禁用Host GPU加速
3. Simulator往往比真实设备快很多，而Emulator则慢很多
4. 在不同OS的设备上测试是有必要的，应用的行为可能不符合预期

使用PGDA可以避免编译、打包、部署到设备的繁冗步骤，在开发阶段能够节约很多时间。

使用XCode可以调试Cordova应用Native的那一部分。

使用Safari的web inspector，你可以Debug Webview和Cordova应用的JavaScript代码，仅支持OS X和iOS6+。通过OS X中的Safari连接到设备（或模拟器），可以使用Safari的dev tools调试Cordova应用。

与Safari类似，Chrome Dev Tools也可以用来调试Cordova应用。需要Android 4.4、API 19+、Chrome 30+才可以进行调试。使用WebKit proxy，Chrome Dev Tools也可以调试iOS应用。

Ripple是一个基于Web的移动设备环境模拟器，用于快速开发基于Apache Cordova、Blackberry WebWorks等框架的移动Web应用。

综合性的移动应用调试工具，支持在现代移动设备（iOS、Android）上调试混合应用，对PhoneGap、Cordova提供非常好的支持。

该工具实质上是对Chrome Dev Tools的包装和增强。

具体参见：使用GapDebug调试Phonegap应用

除非特别说明所有事件均在

document

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // 现在可以安全的使用Cordova设备API了
}

document.addEventListener("resume", onResume, false);
function onResume() {
   setTimeout(function() {
       alert(1);
   }, 0);
}

Cordova自带了一个最小化的API集合，工程可以通过插件添加额外的API。本节介绍Cordova核心插件的API。

本节中，使用样式区分不同的API类型：

1. 斜体：表示静态（static）成员
2. 下划线标注：类型定义（typedef）
3. 括号后缀：表示方法/函数

提供三个电池相关的事件，如上节所述

该插件定义了一个全局的

navigator.camera

camera.getPicture(
    onSuccess successCallback, 
    onError errorCallback, 
    CameraOptions options
)

options.sourceType == Camera.PictureSourceType.

successCallback

options.destinationType == Camera.DestinationType.

该插件确保

console.log()

console

位于Cordova工程根目录的配置文件config.xml，可以在全局上控制Cordova应用程序的行为：

1. 指定核心Cordova API特性
2. 启用Cordova插件
3. 进行平台相关的设置

config.xml指定的配置会影响所有应用程序和CordovaWebView实例。

当使用Cordova的命令行接口（CLI）构建工程时，该文件会被修改并拷贝到各平台的对应目录，例如

platforms/ios/AppName/config.xml

<?xml version='1.0' encoding='utf-8'?>
<!-- widget元素： id 当前应用程序的唯一标识，通常是域名倒写，在Android中对应了包名 version 主版本.次版本.补丁版本 -->
<widget id="cc.gmem.study.cordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <!-- 应用程序的正式名称，该名称会出现在设备的主屏幕，以及应用商店 -->
    <name>CordovaStudy</name>
    <!-- 应用程序描述和作者信息，会显示在应用商店 -->
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <!-- 指定应用的起始网页 -->
    <content src="index.html" />
    <!-- 指定应用使用的Cordova插件 -->
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <!-- 指定应用可以和哪些外部域名进行交互，默认值允许与任何外部服务交互 -->
    <access origin="*" />
    <!-- Intent白名单 -->
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <!-- platform元素只会拷贝到对应平台下的config.xml中 -->
    <platform name="android">
        <allow-intent href="market:*" />
        <!-- 平台特定的方向设置 -->
        <preference name="Orientation" value="sensorLandscape" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <!-- IOS：同时设置portrait、landscape模式 -->
        <preference name="Orientation" value="all" />
    </platform>
    <!-- 以键值对的形式定义若干选项，键大小写不敏感 -->
    <preference>
        <!-- 是否隐藏设备顶部的状态栏 -->
        <preference name="Fullscreen" value="false" />
        <!-- 支持Android、IOS。是否禁止拖拽滚动超过顶部或者底部，如果不需要“下拉以刷新”之类的功能，可以禁止 -->
        <preference name="DisallowOverscroll" value="false" />
        <!-- 支持Android、Blackberry。应用的背景色 -->
        <preference name="BackgroundColor" value="0xff0000ff" />
        <!-- 支持Blackberry。隐藏键盘上方额外的工具栏 -->
        <preference name="HideKeyboardFormAccessoryBar" value="false" />
        <!-- 锁定方向，禁止响应设备的转动。可选值landscape、portrait、default -->
        <preference name="Orientation" value="default" />
    </preference>
    <!-- 
        如果使用CLI，添加的插件不会反应到feature元素，但是如果使用针对特定平台的config.xml，
        可以设置feature元素，以启用设备级别的API或者外部插件
    -->
    <!-- 在Android平台上启用Device API -->
    <feature name="Device">
        <param name="android-package" value="org.apache.cordova.device.Device" />
    </feature>
    <!-- 在IOS平台上启用Device API -->
    <feature name="Device">
        <param name="ios-package" value="CDVDevice" />
    </feature>
    <!-- 添加钩子，以扩展Cordova的功能 -->
    <hook type="after_plugin_install" src="scripts/afterPluginInstall.js" />
    
    <!-- 指定应用程序图标，platform/width/height/density都是可选的，density为Android专有 -->
    <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
    <!-- 可以采用平台专有的方式指定图标 -->
    <platform name="android">
        <icon src="res/android/ldpi.png" density="ldpi" />
        <icon src="res/android/mdpi.png" density="mdpi" />
        <icon src="res/android/hdpi.png" density="hdpi" />
        <icon src="res/android/xhdpi.png" density="xhdpi" />
     </platform>
     <platform name="ios">
        <!-- iOS 8.0+ -->
        <!-- iPhone 6 Plus  -->
        <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
        <!-- iOS 7.0+ -->
        <!-- iPhone / iPod Touch  -->
        <icon src="res/ios/icon-60.png" width="60" height="60" />
        <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
        <!-- iPad -->
        <icon src="res/ios/icon-76.png" width="76" height="76" />
        <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
        <!-- iOS 6.1 -->
        <!-- Spotlight Icon -->
        <icon src="res/ios/icon-40.png" width="40" height="40" />
        <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
        <!-- iPhone / iPod Touch -->
        <icon src="res/ios/icon.png" width="57" height="57" />
        <icon src="res/ios/icon@2x.png" width="114" height="114" />
        <!-- iPad -->
        <icon src="res/ios/icon-72.png" width="72" height="72" />
        <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
        <!-- iPhone Spotlight and Settings Icon -->
        <icon src="res/ios/icon-small.png" width="29" height="29" />
        <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="res/ios/icon-50.png" width="50" height="50" />
        <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
     </platform>
     
     <!-- 指定启动画面，也可用使用Splashscreen插件，动态编程控制 -->
     <platform name="android">
        <!-- you can use any density that exists in the Android project -->
        <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
        <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
        <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
        <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

        <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
        <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
        <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
        <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
    </platform>

    <platform name="ios">
        <!-- images are determined by width and height. The following are supported -->
        <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
        <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
        <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
        <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
        <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
        <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
        <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
        <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
        <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
        <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
    </platform>
</widget>

<!-- 
    应用程序是否保持后台运行，甚至在pause事件发生之后 
    设置为fasle不会在pause事件后终止应用，而是仅仅当应用位于后台时，暂停CordovaWebView中代码的执行
-->
<preference name="KeepRunning" value="true"/>
<!-- 加载页面超时的毫秒数 -->
<preference name="LoadUrlTimeoutValue" value="20000"/>
<!-- 启动屏幕，位于res/drawable-*中的资源名称，不带扩展名 -->
<preference name="SplashScreen" value="splash"/>
<!-- 启动屏幕图片显示的毫秒数 -->
<preference name="SplashScreenDelay" value="3000"/>
<!-- 控制通过InAppBrowser打开的页面，是否可以和通过默认浏览器打开的页面访问同一localStorage和WebSQL -->
<preference name="InAppBrowserStorageEnabled" value="true"/>
<!-- 默认为null，如果设置，那么在加载第一个页面时，显示指定的标题、消息以及一个spinner。标题和消息使用逗号分隔 -->
<preference name="LoadingDialog" value="My Title,My Message"/>
<!-- 默认为null，与上一个配置类似，但是用于除了第一个页面的所有其它页面 -->
<preference name="LoadingPageDialog" value="My Title,My Message"/>
<!-- 默认为null，出错时显示的页面 -->
<preference name="ErrorUrl" value="myErrorPage.html"/>
<!-- 是否在屏幕顶部显示标题 -->
<preference name="ShowTitle" value="false"/>
<!-- 设置应用的日志级别：ERROR, WARN, INFO, DEBUG, VERBOSE -->
<preference name="LogLevel" value="ERROR"/>
<!-- 设置Activity的android:launchMode属性 -->
<preference name="AndroidLaunchMode" value="singleTop"/>
<!-- 设置User Agent，默认不设置 -->
<preference name="OverrideUserAgent" value="Mozilla/5.0 My Browser" />

从Cordova4.3开始，支持保存（save ）、恢复（restore ）平台支持版本、插件版本信息。

当使用

--save

cordova platform

cordova plugin

cordova prepare

执行下面的命令，即可保存特定版本的平台：

# 命令格式
cordova platform add <platform[@<version>] | directory | git_url> --save
# 命令举例
cordova platform add android --save
cordova platform add android@3.7.0 --save    #后续不带@version添加平台，自动使用 3.7.0版本
cordova platform add android@https://github.com/apache/cordova-android.git​ --save
cordova platform add C:/path/to/android/platform --save

# 保存所有平台的版本
cordova platform save

运行此命令后，config.xml中出现类似下面的条目：

<engine name="android" spec="~4.0.0" />

执行下面的命令，可以更新特定平台的版本： 

# 命令格式
cordova platform update <platform[@<version>] | directory | git_url> --save

# 命令举例
cordova platform update android --save
cordova platform update android@3.8.0 --save
cordova platform update /path/to/android/platform --save

执行下面的命令，即可保存插件版本到config.xml：

# 命令格式
cordova plugin add <plugin[@<version>] | directory | git_url> --save

# 命令举例
cordova plugin add cordova-plugin-console --save
cordova plugin add cordova-plugin-console@0.2.13 --save     #后续不带@version添加此插件，自动使用0.2.13版本
cordova plugin add https://github.com/apache/cordova-plugin-console.git --save
cordova plugin add C:/path/to/console/plugin --save

# 保存所有插件的版本
cordova plugin save

运行此命令后，config.xml中出现类似下面的条目：

<plugin name="cordova-plugin-console" spec="~1.0.0" />

执行下面的命令，可以更新特定插件的版本： 

# 命令格式
cordova plugin update <plugin[@<version>] | directory | git_url> --save

# 命令举例
cordova plugin update cordova-plugin-console --save
cordova plugin update cordova-plugin-console@0.2.13 --save
cordova plugin update /path/to/console/plugin --save

移动应用的隐私问题是每个移动App都需要关注的内容，用户需要它们的私人信息被合理使用，并不泄漏。下面是一些被广泛接受的建议：

1. 隐私策略（Privacy Policy）：使用平白的语言声明你的App的隐私策略
2. 敏感信息的收集：在获取敏感信息，例如通讯录、地理位置、摄像机信息前，获得用户的许可
3. 与第三方共享敏感信息：如果你的App获取的信息需要与第三方网站/应用共享，应当获得用户许可
4. 仅在必要的时候才收集隐私信息

本节包含一些开发Cordova应用时，处理安全问题的最佳实践。

1. 不要使用自签名的网站证书：如果你的服务器使用SSL，务必使用知名CA签发的数字证书
2. 避免使用IFrame引用外部网页（不受你控制的第三方网站）：位于白名单中的网页，如果运行在IFrame中，它是可以访问Native Cordova Bridge的。引用外部链接，最好使用InAppBrowser，外部链接不会有机会执行Cordova API
3. 关于域名白名单：Android API 10以下、WP8中的IFrame和XMLHttpRequest，都不受域名白名单控制，这意味着任何网页都可以调用Cordova接口
4. 不要缓存敏感信息，例如用户名、密码
5. 避免使用

   eval()

    ，除非你确切知道脚本的内容

域名白名单（Domain whitelisting）机制用来控制Cordova应用对外部域名的访问。默认的，新创建的App被允许访问所有外部域名，在产品发布时，你必须确定需要访问哪些域名，并进行白名单配置。

对于Android和iOS，上述安全策略通过插件cordova-plugin-whitelist实现，具有更好的安全性和可配置性，推荐使用：

<!-- 
    导航白名单（Navigation Whitelist）
    控制WebView可以被导航到那些URL，仅应用到顶级导航 
-->
<!-- 允许连接到google.com-->
<allow-navigation href="http://google.com/*" />
<!-- 允许使用HTTP/HTTPS或者其它任何协议连接到google.com的所有子域 -->
<allow-navigation href="*://*.google.com/*" />
<!-- 允许导航到任意网站-->
<allow-navigation href="*" />
<!-- 上面一条等价于这三条：-->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />


<!-- 
    Intent白名单（Intent Whitelist）
    控制App可以要求系统打开哪些URL，默认任何URL都不允许 
-->
<!-- 允许在一个浏览器窗口中打开网页 -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="http://google.com/*" />
<allow-intent href="*://*.example.com/*" />
<!-- 允许在短信应用中打开SMS链接 -->
<allow-intent href="sms:*" />
<!-- 允许拨打电话 -->
<allow-intent href="tel:*" />
<!-- 允许打开地图 -->
<allow-intent href="geo:*" />
<!-- 允许使用对应的App打开所有其它类型的URL -->
<allow-intent href="*" />


<!-- 
    网络请求白名单（Network Request Whitelist）
    控制哪些网络请求被允许：Ajax、images等
    注意，最好使用Content Security Policy（CSP），CSP更安全。这节的配置主要用于不支持CSP的老旧Webview
    默认Android允许访问https://ssl.gstatic.com/accessibility/javascript/android/，这确保TalkBack正常工作
-->
<!-- 允许对google.com执行Ajax、图片请求 -->
<access origin="http://*.google.com" />
<!-- 允许针对content URL的请求 -->
<access origin="content:///*" />
<!-- 允许任何请求 -->
<access origin="*" />

对于其它平台，Cordova应用依赖于config.xml中的

<access>

<!-- 允许访问google.com -->
<access origin="http://google.com" />
<!-- 允许访问HTTPS版本的google.com -->
<access origin="https://google.com" />
<!-- 允许访问maps.google.com -->
<access origin="http://maps.google.com" />
<!-- 允许访问google.com的所有子域名 -->
<access origin="http://*.google.com" />
<!-- 允许访问所有网站 -->
<access origin="*" />

参见：HTML知识集锦

CSP用于控制图片、Ajax、

<video>

<meta>

<!-- 较为安全的默认值 -->
<meta http-equiv="Content-Security-Policy"
    content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

<!-- 允许同源和google.com的所有内容-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' google.com">

<!-- 
    允许所有内容，除了：
    对于CSS，仅允许同源的CSS文件，以及内联的样式
    对于脚本，仅允许同源的JS文件，内联的JavaScript脚本，以及eval()
-->
<meta http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

<!-- 仅允许同源的、通过HTTPS的Ajax请求 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">

<!-- 允许来自google.com的IFrame -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://google.com">

钩子是Cordova Application、Plugin添加的特殊脚本，用于定制化Cordova的命令。可以在hooks目录添加钩子，也可以在config.xml、plugin.xml中声明钩子。钩子按照下面的顺序串行执行：

1. 来自/hooks目录的Application钩子
2. 来自config.xml的Application钩子
3. 来自plugins/.../plugin.xml的插件钩子

目前支持的钩子类型有：

1. after_build
2. after_compile
3. after_clean
4. after_docs
5. after_emulate
6. after_platform_add
7. after_platform_rm
8. after_platform_ls
9. after_plugin_add
10. after_plugin_ls
11. after_plugin_rm
12. after_plugin_search
13. after_plugin_install  仅执行被安装插件声明在plugin.xml中的钩子
14. after_prepare
15. after_run
16. after_serve
17. before_build
18. before_clean
19. before_compile
20. before_docs
21. before_emulate
22. before_platform_add
23. before_platform_rm
24. before_platform_ls
25. before_plugin_add
26. before_plugin_ls
27. before_plugin_rm
28. before_plugin_search
29. before_plugin_install  仅执行被安装插件声明在plugin.xml中的钩子
30. before_plugin_uninstall  仅执行被卸载插件声明在plugin.xml中的钩子
31. before_prepare
32. before_run
33. before_serve
34. pre_package 仅支持Windows、Windows Phone平台

如果把钩子存放在hooks目录，必须遵从严格的命名规定：

hooks/钩子类型/脚本文件.js

hooks/after_prepare/cordova-syncdown.js

在config.xml、plugin.xml中声明钩子的方式如下：

<hook type="before_build" src="scripts/appBeforeBuild.bat" />
<hook type="before_build" src="scripts/appBeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />

一般使用NodeJS来编写钩子，Node模块定义的方式如下：

module.exports = function( ctx )
{
}

其中ctx包含很多上下文信息： 

{
  "hook": "after_prepare",
  "scriptLocation": "after_prepare/script.js",
  "cmdLine": "/path/to/cordova arguments",
  "opts": {
    "projectRoot":"/path/to/project",
    "cordova": {
      "platforms": ["android"],
      "plugins": ["com.plugin.withhooks"],
      "version": "0.21.7-dev"
    },
    "plugin": {
      "id": "com.plugin.withhooks",
      "pluginInfo": {
        ...
      },
      "platform": "android",
      "dir": "/path/to/project/plugins/com.plugin.withhooks"
    }
  },
  "cordova": {} //cordova object
}

修改$CORDOVA_PROJECT_ROOT/platforms/android/cordova/lib/build.js 中如下变量的值：

var distributionUrl = 'distributionUrl=../../../gradle-2.2.1-all.zip';

然后，把本地磁盘的 gradle-2.2.1-all.zip拷贝或者链接到$CORDOVA_PROJECT_ROOT/platforms 即可。执行

cordova prepare

让Gradle使用本地Maven仓库中的构件，避免不必要的下载动作

修改$CORDOVA_PROJECT_ROOT/platforms/android/build.gradle中的内容：

repositories {
    mavenLocal()
    //添加上面一行的内容
    mavenCentral()
}

The post 基于Apache Cordova开发移动应用程序 appeared first on 绿色记忆.