与 Cordova 或 PhoneGap 集成

Cordova

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

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 版本，而不是 Release（用于应用商店）版本。要创建发布版本，您必须使用打包器，例如适用于 Android 的 Eclipse 或 IntelliJ，以及适用于 iOS 的 Xcode。

3. 您必须安装 Java JRE 1.8 才能使 Sencha Cmd Cordova 命令正常工作。虽然适用于 Windows 和 Mac OS X 的 Sencha Cmd 6 及更高版本可以通过其默认安装程序下载当前 JRE，但 Cordova 工具将找不到并利用 Sencha Cmd 的内部 JRE。

环境设置

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

1. 安装 Java

   支持 JRE 版本 8 到 OpenJDK 11。

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 软件。您可以使用 Xcode 模拟器在将 iOS 应用程序安装到设备之前对其进行调试。

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 文件
• 配置参考

生成您的 Sencha Command 应用程序并初始化您的 Cordova 或 PhoneGap 应用程序

使用 Cmd 的 generate 命令创建您的应用程序，如下所示

sencha -sdk /path/to/extjs-framework generate app MyApp /path/to/MyApp

像这样初始化您的 Cordova 或 PhoneGap 应用程序

Navigate to your newly generated project folder and run one of the following commands
(APP_ID and APP_NAME arguments optional).

sencha phonegap init com.mycompany.MyApp MyApp

or

sencha cordova init com.mycompany.MyApp MyApp

You should now see a phonegap or cordova directory in the project folder after the above
command completes.

开发 Cordova 应用程序

对于通用应用程序

如果您创建了一个 Ext JS 6+ 通用应用程序，则生成的应用程序将已在 app.json 中包含一个 builds 块。当您的应用程序已包含 builds 块时，sencha phonegap/cordova init 命令将无法修改您的 app.json。要添加 Cordova 支持，请修改应用程序的 app.json builds 对象以添加 Cordova 集成。以下示例展示了如何修改 modern 构建配置文件

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

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

您可以修改任何现有配置文件。您还可以创建一个新的配置文件并随意命名。以下是具有 Cordova 集成的自定义构建配置文件的示例

"cordova_android": {
    "packager": "cordova",
    "toolkit": "modern",
    "theme": "theme-neptune",
    "cordova" : {
        "config": {
            "platforms": "android",
            "id": "com.mycompany.test",
            "name": "test"
        }
    }
}

对于非通用应用程序

如果您没有生成通用应用程序，您将在 app.json 中看到一个 builds 对象。此文件是在您运行 sencha cordova init 命令时为您创建的。

您现在应该在项目的 app.json 文件中看到带有 PhoneGap 或 Cordova 集成的构建配置文件。请注意，app.json 位于项目的根目录中。

找到并确认您的 app.json 文件中存在类似于以下内容的构建对象。

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

使用自定义构建配置文件

如果您决定创建自己的自定义构建配置文件或正在使用生成的“native”配置文件，则需要在应用程序清单的创建中手动指定应使用哪个配置文件。为此，请执行以下操作

1. 打开项目根目录下的 index.html
2. 找到 Ext.beforeLoad 钩子
3. 在此钩子内的代码末尾附近，注意指示 Ext.manifest = profile 的行。
4. 添加代码以手动将您的自定义构建配置文件设置为钩子内的 profile 变量

    // Add this line
    profile = 'your_custom_profile_name here';

    // Add your code above this line
    Ext.manifest = profile;

注意 确保您在此处使用的配置文件在下一节中列出的 Sencha Command 命令中使用。

构建配置文件和构建名称

让我们稍微谈谈这些构建配置文件。

在后一个示例中，值得注意的是，“native”一词只是您构建的名称，可以是您喜欢的任何名称。构建名称必须是单个字符串，仅包含字母数字字符，不包含空格。例如，您可以拥有诸如“ios”、“android”、“iphone”、“ipad”等构建名称。如果您生成了通用应用程序，您将看到其他构建配置文件，例如“modern”和“classic”。您将在构建、模拟、打包等时使用构建配置文件的名称。

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

注意： 执行构建、模拟等命令时，必须指定要构建的构建配置文件。

平台

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

ID

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

构建您的 Cordova 应用

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

sencha app build {build-profile-name}

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

sencha app build android

就是这样！Sencha Cmd 现在将创建一个 Cordova 应用程序，并构建您通过 app.json 中的 platforms 属性指定的平台。请记住，您必须拥有相应的 SDK 和支持工具（例如 Android 的 Android Studio、Gradle 等以及 iOS 的 Xcode），才能成功构建。如果您缺少依赖项，Cordova 会很友好地向您解释。

Sencha Cordova 命令

您可以使用 Cordova 和这个新的 build 对象执行 4 个命令。

注意 {build-profile-name} 必须设置为您的 Cordova 构建配置文件的名称。

Build

sencha app build {build-profile-name}

“build”命令将构建您的 Sencha 应用程序以及为您的构建配置文件中指定的平台构建原生应用程序。

Run

sencha app run {build-profile-name}

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

Emulate

sencha app emulate {build-profile-name}

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

注意 如果您在使用 Android Studio / ADV / 模拟器进行连续部署时遇到问题，您始终可以记下此命令完成运行时生成的 APK 的路径。您可以使用 ADB 将其安装到您的模拟器上并运行它。要安装您的 apk，请执行以下命令

adb install /path/to/apk/app-debug.apk

Prepare

sencha app prepare {build-profile-name}

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

开发 PhoneGap 应用

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

如果您正在开发通用应用程序，您可以修改现有的构建配置文件以支持 PhoneGap，或者您可以创建自己的文件。您可以按照上面 Cordova 部分中列出的相同步骤操作。

这是一个 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 和这个新的 build 对象执行 3 个命令。PhoneGap 不支持 Cordova 中的 prepare 命令。如果您正在使用 PhoneGap，sencha app prepare native 将抛出错误。其他三个与上面的 Cordova 命令相同。

Build

sencha app build {build-profile-name}

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

Run

sencha app run {build-profile-name}

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

Emulate

sencha app emulate {build-profile-name}

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

开发远程 PhoneGap 应用

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

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

您可以通过简单地上传一个包含 index.html 文件的 zip 文件来测试构建过程。PhoneGap Remote Build 然后会为您打包它。

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

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

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

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

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

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

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

将以下行添加到该文件

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

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

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