与 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 原生打包器组件已更新，以充分利用此功能。

选择打包器

在 Cordova 和 PhoneGap 之间进行选择时，重要的是要注意以下几点

• Cordova 打包工具允许您在您的机器上同时为多个平台构建。
• Cordova 由开源社区不断更新，而 PhoneGap 更新由 Adobe 协调。
• PhoneGap 提供了一个远程构建应用程序，消除了本地构建的需要。

将 Sencha Cmd 与 Cordova 和 PhoneGap 结合使用

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

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

重要提示

1. packager.json 已完全移除。如果您的项目仍然包含此文件，您可以安全地将其删除。此文件仅由 Sencha 的旧版原生打包器使用。

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

3. 您必须拥有 Java JRE 1.7 才能使 Sencha Cmd Cordova 命令正常工作。虽然 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 管理器。

   Blackberry：查看 BlackBerry Native SDK 并注册以使用 BlackBerry Keys Order Form 签署您的应用。

   iOS：完成 Apple iOS provisioning profiles portal 上的 iOS 预配置的所有步骤（需要 Apple ID、密码和购买的开发者许可证）。使用此站点获取证书、识别设备并获取 AppID。

   此外，下载并安装免费的 Xcode 软件。您可以使用 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 generate 命令创建您的应用程序，如下所示

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

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

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

平台

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

ID

“id”属性将在首次生成 Cordova 应用程序时使用。这将是您应用程序的标识符。也就是说，您需要确保您已正确选择此项。如果您需要更改它，您需要从项目中删除 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 命令

您可以使用 Cordova 和这个新的构建对象使用 4 个命令。

构建

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 Remote Build 将会为您打包它。

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

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

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

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

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

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

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

将以下行添加到该文件

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

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

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