与 Cordova 或 PhoneGap 集成

Cordova

Apache Cordova 提供 API 和打包工具，可创建适用于 Android、iOS、BlackBerry 和 Windows Phone 设备的应用程序。Sencha Cmd 5+ 提供支持多个构建配置文件的构建系统。这非常适合原生打包。Cordova 原生打包器组件已更新，以充分利用此功能。

PhoneGap

PhoneGap 建立在 Cordova 之上，两者都可以访问 Cordova API。PhoneGap 和 Cordova 的不同之处在于其打包工具的实现方式。PhoneGap 在 Adobe PhoneGap Build 提供远程构建界面，让你可以在云中为单个平台打包和模拟应用程序。PhoneGap Native Packager 组件已更新，以充分利用此功能。

选择打包器

在 Cordova 和 PhoneGap 之间进行选择时，请务必注意以下几点

• Cordova 打包工具让你可以在你的机器上同时为多个平台构建。
• Cordova 会不断由开源社区更新，而 PhoneGap 更新则由 Adobe 协调。
• PhoneGap 提供远程构建应用程序，无需本地构建。

将 Sencha Cmd 与 Cordova 和 PhoneGap 配合使用

使用 Sencha Cmd 生成的每个应用程序都可以通过这些服务开启原生构建。Sencha Cmd 将处理所有重复性任务，例如构建你的应用程序，将其放在 Cordova 或 PhoneGap 的适当位置，以及运行适当的命令来构建、模拟或运行你的应用程序。

有关开始进行原生开发的更多信息，请参阅 Apache Cordova 平台指南。这些指南提供入门信息和使你的系统启动并运行所需的先决条件。

重要说明

1. packager.json 已被完全移除。如果你的项目仍包含此文件，你可以安全地将其移除。此文件仅由 Sencha 的旧版 Native Packager 使用。

2. 对于 Cordova 和 PhoneGap，Sencha Cmd 只能创建应用程序的 DEBUG 版本，而不是发布（适用于应用商店）版本。要创建发布版本，你必须使用打包器，例如 Android 的 Eclipse 或 IntelliJ，以及 iOS 的 Xcode。

3. Sencha Cmd Cordova 命令才能正常工作，你必须拥有 Java JRE 1.7。虽然 Windows 和 Mac OS X 上的 Sencha Cmd 6 在其默认安装程序中附带当前 JRE，但 Cordova 工具将找不到并使用 Sencha Cmd 的内部 JRE。

环境设置

在开发 Cordova 或 PhoneGap 应用程序之前，你需要使用以下软件设置你的环境

1. 安装 Java JRE

2. 安装 Node.js

3. 如果你想使用 Cordova 打包和模拟，请使用以下命令安装它

    npm install -g cordova
   

   如果你使用的是 Mac，你可能需要包含“sudo”才能完成安装。
   然后命令将是

    sudo npm install -g cordova
   

   注意：无论你是否安装 Cordova 来打包和模拟你的应用程序，Cordova API 都可供你的应用程序使用。Cordova 打包和模拟不会影响 Cordova 或 PhoneGap 应用程序中 Cordova API 的使用。

4. 如果你想使用 PhoneGap 打包和模拟，请使用以下命令安装它

    npm install -g phonegap
   

   如果你使用的是 Mac，你可能需要包含“sudo”才能完成安装。
   然后命令将是

    sudo npm install -g phonegap
   

   注意：你必须在免费的 Adobe PhoneGap Build 网站上注册并获取用户名和密码才能访问 PhoneGap 远程构建网站。

5. 下载并安装 Sencha Cmd。
   有关此过程的更多信息，请查看 Cmd 入门指南。

6. 检查并满足目标设备平台特定要求

   Android：下载并安装 Android SDK Manager。

   Blackberry：查看 BlackBerry Native SDK 并注册使用 BlackBerry Keys Order Form 对你的应用程序进行签名。

   iOS：在 Apple iOS 配置文件门户 上完成 iOS 配置的所有步骤（需要 Apple ID、密码和已购买的开发者许可证）。使用此网站获取证书、识别设备并获取 AppID。

   此外，下载并安装免费的 Xcode 软件。你可以在设备上安装 iOS 应用程序之前使用 Xcode 模拟器调试你的 iOS 应用程序。Xcode 仅适用于装有 Lion、Mountain Lion 或 Mavericks OS X 的 Mac。

config.xml

当你创建 PhoneGap 或 Cordova 应用程序时，它们都会为你的项目创建一个 config.xml 文件。

Cordova 将 config.xml 存储在你的“app_root/cordova”文件夹中，而 PhoneGap 将 config.xml 文件存储在你的“app_root/cordova/www”文件夹中。这是一个问题，因为 www 文件夹是已编译构建的目标位置。很可能这个 www 文件夹会被删除并清除 config.xml 文件。

为了在 Sencha Cmd 中解决此问题，我们在创建 PhoneGap 应用程序时将 config.xml 文件复制到 PhoneGap 项目的根目录。每次进行构建时，我们都会将其连同已编译的应用程序一起复制回 www 文件夹。这意味着无论使用哪个框架，用户都可以预期 config.xml 文件位于 Cordova 或 PhoneGap 文件夹的根目录中。

有关配置 PhoneGap 和 Cordova 的更多信息，请查看以下资源

• PhoneGap 示例 config.xml 文件
• 配置参考

开发 Cordova 应用程序

使用 Cmd 生成命令创建应用程序，如下所示

 sencha -sdk /path/to/Framework generate app MyApp /path/to/MyApp

在开发 Ext 6+ 通用应用程序时，生成的应用程序将在 app.json 中包含一个 builds 块。当应用程序已包含 builds 块时，sencha phonegap/cordova init 命令将无法添加修改 app.json。要添加 Cordova 支持，请按如下方式修改应用程序的 app.json builds 块

"builds": {
    "classic": {
        "toolkit": "classic",
        "theme": "theme-triton"
    },

    "modern": {
        "toolkit": "modern",
        "theme": "theme-cupertino",
        "packager": "cordova",
        "cordova": {
            "config": {
                "platforms": "ios",
                "id": "com.mydomain.MyApp"
            }
        }
    }
}

导航到新生成的项目文件夹并运行以下命令之一（APP_ID 和 APP_NAME 参数可选）。

sencha phonegap init com.mycompany.MyApp MyApp

或

sencha cordova init com.mycompany.MyApp MyApp

在上述命令完成后，您现在应该在项目文件夹中看到一个 phonegap 或 cordova 目录。

您还应该在项目的 app.json 文件中看到一个 PhoneGap 或 Cordova 块。app.json 位于项目的根目录中。您可以在此处设置要为其构建的平台。

类似于以下内容的构建对象现在应该出现在您的 app.json 文件中。

"builds": {
    "native": {
        "packager": "cordova",
        "cordova" : {
            "config": {
                "platforms": "ios"
                "id": "com.mydomain.MyApp"
            }
        }
    }
}

让我们来讨论一下上面的代码片段。

构建名称

值得注意的是，单词“native”只是构建的名称，可以是您喜欢的任何内容。构建名称必须是一个字符串，只包含字母数字字符，没有空格。例如，您可以使用“ios”、“android”、“iphone”、“ipad”等构建名称。

注意：虽然您可以为构建名称选择任何内容，但 Sencha Cmd 保留“production”、“testing”和“development”名称，不应在此上下文中使用这些名称。

平台

然后，您可以将平台对象设置为任何平台或平台组合。对于 Cordova，您可以指定一个空格分隔的列表，例如“ios android”。

ID

在首次生成 Cordova 应用程序时将使用“id”属性。这将是应用程序的标识符。也就是说，您需要确保正确选择此项。如果您需要更改它，您需要从项目中删除 Cordova 文件夹，并在更改 ID 属性后让 Cmd 重新生成它。这对 iOS 应用程序尤其重要，因为它必须与您的 Bundle Identifier 匹配。

从终端或命令行运行以下命令

sencha app build {build-name}

其中 {build-name} 是 app.json 文件的构建对象中定义的名称之一。例如，如果您将构建称为“android”，则命令将为

sencha app build android

就是这样！Sencha Cmd 现在将创建一个 Cordova 应用程序，并通过 app.json 中的 platforms 属性构建您指定的平台。

Sencha Cordova 命令

您可以使用 4 个命令与 Cordova 和此新构建对象配合使用。

构建

sencha app build {build-name}

“build”将构建您的 Sencha 应用程序，然后构建一个原生应用程序。

运行

sencha app run {build-name}

“run”将构建您的 Sencha 应用程序和您的原生应用程序。然后它将尝试在连接的设备上运行它。

模拟

sencha app emulate {build-name}

“emulate”将构建您的 Sencha 应用程序和您的原生应用程序。然后它将尝试在模拟器中运行它。

准备

sencha app prepare {build-name}

“prepare”将构建您的 Sencha 应用程序，然后将构建的应用程序准备到原生应用程序中。但是，它不会构建原生部分。如果您需要在 sencha 编译后和原生构建之前向应用程序中注入内容，这将非常有用。

开发 PhoneGap 应用程序

PhoneGap 与 Cordova 非常相似。事实上，如果您不是通过 PhoneGap 云服务进行构建，则该过程几乎完全相同。

下面是 `app.json` 的代码段，它将为您提供一个与上面 Cordova 项目相同的 PhoneGap 项目。

"builds": {
    "native": {
        "packager": "phonegap",
        "phonegap" : {
            "config": {
                "platform": "ios",
                "id": "com.mydomain.MyApp"
            }
        }
    }
}

只有几个细微但重要的差异。

• 名称从“cordova”更改为“phonegap”。

• “platform”是单数，而不是“platforms”。PhoneGap 仅允许您一次构建一个本地平台，而 Cordova 允许同时构建多个平台。

一旦您认识到这些细微差异，它就与上面的命令相同。您可以简单地运行 `sencha app build native` 或 `sencha app run native`，您将与 Cordova 处于同一条路径上。

Sencha PhoneGap 命令

您可以使用 PhoneGap 和此新构建对象 3 个命令。PhoneGap 不支持 Cordova 中的 `prepare` 命令。如果您正在使用 PhoneGap，`sencha app prepare native` 将引发错误。其他三个与上面的 Cordova 命令相同。

构建

sencha app build {build-name}

“build”将构建您的 sencha 应用程序，然后构建一个原生应用程序。

运行

sencha app run {build-name}

“run”将构建您的 sencha 应用程序和您的原生应用程序。然后它将尝试在连接的设备上运行它。

模拟

sencha app emulate {build-name}

“emulate”将构建您的 sencha 应用程序和您的原生应用程序。然后它将尝试在模拟器中运行它。

开发远程 PhoneGap 应用程序

在云中构建您的 PhoneGap 应用程序有很多优势。您无需经历为您的机器下载所有 SDK 和工具的正常麻烦。您可以简单地将您的 Web 应用程序发送到 PhoneGap 服务器，Adobe 将为您生成一个原生应用程序。

在您开始使用 Sencha Cmd 和远程构建之前，您需要访问 http://build.phonegap.com 并注册一个免费帐户。

您可以通过简单地上传包含 `index.html` 文件的 zip 文件来测试构建过程。然后，PhoneGap 远程构建将为您打包它。

如果您要为 iOS 构建，您需要按照网站上的说明添加适当的凭据来构建您的应用程序。

一旦您确信您的帐户已设置好，并且您已将所有正确文件上传到 Adobe，您就可以快速将远程构建添加到您的 Sencha 工作流中。

让我们看一下用于远程部署的构建对象。

"builds": {
    "native": {
        "packager": "phonegap",
        "phonegap" : {
            "config": {
                "platform": "ios",
                "remote": true,
                "id": "com.mydomain.MyApp"
            }
        }
    }
}

如您所见，从本地构建切换到远程构建非常简单。您需要做的就是将远程标志添加到您的 `app.json` 构建块中。

下一步是提供您的用户名和密码，以便 Sencha Cmd 可以自动将您登录到 PhoneGap 远程服务器并上传您的项目。

为此，我们建议向您的应用程序的根目录添加一个 `local.properties` 文件。出于安全目的，此属性文件应被所有形式的版本控制忽略。

向该文件添加以下行

[email protected]
phonegap.password=s3nch@isgr3@t

一旦您配置了您的用户名和密码，发送构建就变得简单了。只需运行 `sencha app build native`，您的应用程序将被编译并发送到云端，以便 Adobe 生成您的原生应用程序。

构建完成后，您可以通过 PhoneGap 门户访问最终的包文件，以便在设备上进行测试，或上传到适用的应用商店。