下一步

对于了解如何使用 Cordova CLI 并使用插件的开发人员来说，您可能需要考虑接下来研究一些内容，以构建更好、性能更强的 Cordova 应用程序。以下文档提供了有关最佳实践、测试、升级和其他主题的建议，但并非旨在具有强制性。将其视为您作为 Cordova 开发人员成长的起点。此外，如果您发现可以改进的地方，请贡献！

Cordova 应用的最佳实践

1) SPA 是您的朋友

首先，您的 Cordova 应用程序应该采用 SPA（单页应用程序）设计。简单来说，SPA 是从网页的一次请求运行的客户端应用程序。用户加载一组初始资源（HTML、CSS 和 JavaScript），然后通过 XHR 请求进行进一步更新（显示新视图、加载数据）。SPA 通常用于更复杂的客户端应用程序。Gmail 就是一个很好的例子。加载 Gmail 后，邮件视图、编辑和整理都是通过更新 DOM 完成的，而不是实际离开当前页面加载一个全新的页面。

使用 SPA 可以帮助您以更有效的方式组织应用程序，但它也对 Cordova 应用程序具有特定的优势。Cordova 应用程序必须等待deviceready 事件触发，然后才能使用任何插件。如果您不使用 SPA，并且您的用户点击从一个页面跳转到另一个页面，您将不得不再次等待deviceready触发，然后才能使用插件。随着应用程序的规模越来越大，这一点很容易被遗忘。

即使您选择不使用 Cordova，在不使用单页架构的情况下创建移动应用程序也会对性能产生严重影响。这是因为页面之间的导航需要重新加载脚本、资产等。即使这些资产被缓存，仍然会存在性能问题。

您可以在 Cordova 应用程序中使用的 SPA 库示例包括

• React
• Vue.js
• Angular
• Ember.js
• Backbone.js
• Kendo UI
• Onsen UI

还有很多很多。

2) 性能注意事项

考虑以下问题以提高移动应用程序的性能

• 点击 vs. 触摸

  许多设备对点击事件施加 300 毫秒的延迟，以便区分轻触和轻触缩放手势。这可能会让您的应用程序感觉缓慢且响应迟钝。避免这种延迟是提高应用程序感知性能的最重要方法之一。

  有关轻触延迟的更多信息，请参阅 Google 开发者网站上的300 毫秒轻触延迟，消失不见。

  截至 2015 年，大多数 Android 和 iOS 设备不再施加延迟。对于 Android 和 iOS，请确保您的视口元标签已设置width=device-width值，否则您仍然会遇到轻触延迟。

• CSS 过渡 vs. DOM 操作

  使用硬件加速的 CSS 过渡将比使用 JavaScript 创建动画好得多。请参阅本节末尾的资源列表以获取示例。

• 网络

  移动网络的延迟，即使是良好的移动网络，也比您想象的要糟糕得多。一个每 30 秒吸取 500 行 JSON 数据的桌面应用程序，在移动设备上不仅会更慢，而且还会消耗大量电量。请记住，Cordova 应用程序有多种方法可以在应用程序中持久化数据（例如 LocalStorage 和文件系统）。将数据缓存到本地，并注意您来回发送的数据量。当您的应用程序通过蜂窝网络连接时，这一点尤其重要。

3) 识别和处理脱机状态

请参阅前面关于网络的提示。您不仅可能处于缓慢的网络中，而且您的应用程序也可能完全脱机。您的应用程序应该以智能的方式处理这种情况。如果您的应用程序没有这样做，人们会认为您的应用程序已损坏。鉴于处理起来非常容易（Cordova 支持监听脱机和在线事件），您的应用程序绝对没有理由在脱机运行时没有良好的响应。请务必测试（请参阅下面的测试部分）您的应用程序，并确保测试您的应用程序在从一种状态切换到另一种状态时的处理方式。

请注意，在线和脱机事件以及网络连接 API 并不完美。您可能需要依靠使用 XHR 请求来查看设备是否真正脱机或在线。归根结底，请务必添加某种形式的网络问题支持 - 事实上，Apple Store（以及可能的其他商店）会拒绝没有正确处理脱机/在线状态的应用程序。有关此主题的更多讨论，请参阅"这东西开着吗？"

处理升级

升级 Cordova 项目

Cordova 项目没有升级命令。相反，请从项目中删除平台，然后重新添加它以获取最新版本

cordova platform rm android
cordova platform add android

绝对至关重要的是，您要阅读更新版本中更改的内容，因为更新可能会破坏您的代码。查找此信息的最佳位置是存储库和 Cordova 博客中发布的发布说明。您需要彻底测试您的应用程序，以验证在执行更新后它是否正常工作。

注意：某些插件可能与 Cordova 的新版本不兼容。如果插件不兼容，您可能能够找到一个满足您需求的替代插件，或者您可能需要延迟升级项目。或者，修改插件使其在新版本下工作，并回馈社区。

插件升级

升级插件涉及与平台相同的过程 - 删除它，然后重新添加它。

cordova plugin rm some-plugin
cordova plugin add some-plugin

有关更多详细信息，请参阅管理版本和平台。

请务必查看更新后的插件文档，因为您可能需要调整代码以使其与新版本一起使用。此外，请仔细检查插件的新版本是否与项目的 Cordova 版本兼容。

始终测试您的应用程序，以确保安装新插件不会破坏您没有预料到的内容。

如果您的项目有很多需要更新的插件，创建 shell 或批处理脚本可能可以节省时间，该脚本可以使用一个命令删除和添加插件。

测试 Cordova 应用程序

测试您的应用程序非常重要。Cordova 团队使用Jasmine，但任何适合 Web 的单元测试解决方案都可以。

在模拟器上测试 vs. 在真实设备上测试

在开发 Cordova 应用程序时，使用桌面浏览器和设备模拟器/模拟器并不罕见。但是，在尽可能多的物理设备上测试您的应用程序非常重要

• 模拟器就是模拟器。例如，您的应用程序可能在 iOS 模拟器中正常工作，但在真实设备上可能失败（尤其是在某些情况下，例如内存不足状态）。或者，您的应用程序实际上可能在模拟器上失败，而在真实设备上却运行良好。
• 模拟器就是模拟器。它们不代表您的应用程序在物理设备上的运行情况。例如，某些模拟器可能会以乱码显示渲染您的应用程序，而真实设备则没有问题。（如果您遇到此问题，请在模拟器中禁用主机 GPU。）
• 模拟器通常比您的物理设备快。另一方面，模拟器通常更慢。不要根据应用程序在模拟器或模拟器中的运行情况来判断其性能。请根据应用程序在各种真实设备上的运行情况来判断其性能。
• 使用模拟器或模拟器无法很好地了解应用程序对触摸的响应。相反，在真实设备上运行应用程序可以指出用户界面元素的大小、响应性等方面的问题。
• 虽然能够在每个平台上只测试一台设备会很好，但最好在运行许多不同操作系统版本的许多设备上进行测试。例如，在您的特定 Android 智能手机上运行良好的内容可能在其他 Android 设备上失败。在最新的 iOS 设备上运行良好的内容可能在旧设备上失败。

当然，不可能在市场上的所有可能设备上进行测试。因此，明智的做法是招募许多拥有不同设备的测试人员。虽然他们无法发现所有问题，但他们很可能会发现您自己永远找不到的怪癖和问题。

调试 Cordova 应用程序

在大多数情况下，调试 Cordova 应用程序非常简单。

iOS 调试

Xcode

使用 Xcode，您可以调试 Cordova 应用程序的 iOS 原生端。确保调试区域正在显示（视图 -> 调试区域）。当您的应用程序在设备（或模拟器）上运行时，您可以在调试区域中查看日志输出。这是任何错误或警告将打印的地方。您还可以在源文件中设置断点。这将允许您逐行执行代码，并查看此时变量的状态。当断点命中时，变量的状态将显示在调试区域中。当您的应用程序在设备上启动并运行后，您可以调出 Safari 的 Web 检查器（如下所述）以调试 Web 视图和应用程序的 JS 端。有关更多详细信息，请参阅Apple 调试支持 文档。

使用 Web Inspector 进行 Safari 远程调试

使用 Safari 的 Web Inspector，您可以调试 Cordova 应用程序中的 webview 和 js 代码。这仅在 macOS 上有效。它使用 Safari 连接到您的设备（或模拟器），并将浏览器的开发者工具连接到 Cordova 应用程序。您将获得开发者工具的预期功能 - DOM 检查/操作、JavaScript 调试器、网络检查、控制台等等。与 Xcode 一样，使用 Safari 的 Web Inspector，您可以在 JavaScript 代码中设置断点，并在断点处查看变量的状态。您可以查看打印到控制台的任何错误、警告或消息。您还可以在应用程序运行时直接从控制台运行 JavaScript 命令。

要开始检查，首先在设备上启用它，方法是转到“设置 > Safari > 高级 > Web Inspector”。在您的桌面设备上，从“Safari > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单”启用开发者工具。在“开发”菜单中，您现在可以选择连接的设备和要检查的应用程序。

Chrome 远程调试

与 Safari 版本几乎相同，这仅适用于 Android，但可以在任何桌面操作系统上使用。连接后，您将获得与桌面应用程序相同的 Chrome 开发者工具体验，用于您的移动应用程序。更棒的是，Chrome 开发者工具具有镜像选项，可以显示在移动设备上运行的应用程序。这不仅仅是视图 - 您可以在开发者工具中滚动和点击，它会在移动设备上更新。

要检查，只需在桌面上的 Chrome 中打开 URL chrome://inspect。在这里，您将看到连接的设备和可检查应用程序的列表。您的设备必须设置为 USB 调试才能正常工作。有关设置的完整说明，请访问 https://developers.google.com/chrome/mobile/docs/debugging。

如果您可以在检查设备部分看到您的设备，但看不到 Cordova webview，您可能需要在 AndroidManifest.xml 的 <application> 节点中添加 android:debuggable="true"。

也可以通过 WebKit 代理使用 Chrome 开发者工具检查 iOS 应用程序：https://github.com/google/ios-webkit-debug-proxy/

用户界面

构建在移动设备上看起来不错的 Cordova 应用程序可能是一项挑战，尤其是对于开发人员而言。许多人选择使用 UI 框架来简化此过程。以下是一些您可能想要考虑的选项。

• Ionic - 这个强大的 UI 框架实际上有自己的 CLI 来处理项目创建。
• Ratchet - 由创建 Bootstrap 的人提供。
• Kendo UI - 来自 Telerik 的开源 UI 和应用程序框架。
• Onsen UI - 用于网站和 Cordova 应用程序的开源 UI 框架
• Topcoat
• ReactJS

在构建用户界面时，重要的是要考虑您要定位的所有平台以及用户期望之间的差异。例如，具有 iOS 风格 UI 的 Android 应用程序可能不会受到用户的欢迎。这有时甚至会被各种应用程序商店强制执行。因此，您必须尊重每个平台的约定，因此熟悉各种人机界面指南。

• iOS
• Android

特殊注意事项

虽然 Cordova 使跨平台开发变得更容易，但无法提供与底层原生平台的 100% 隔离，因此请注意限制。

平台怪癖

在阅读文档时，请查找概述多个平台上不同行为或要求的部分。如果存在，这些部分将位于标题为“Android 怪癖”、“iOS 怪癖”等部分。阅读这些怪癖，并在使用 Cordova 时注意它们。

加载远程内容

从远程加载的 HTML 页面（不在设备上本地存储的 HTML 页面）调用 Cordova JavaScript 函数是一种不受支持的配置。这是因为 Cordova 不是为此设计的，Apache Cordova 社区不会测试此配置。虽然它在某些情况下可以工作，但它既不推荐也不支持。远程内容调用本地本地函数的同源策略、使 Cordova 的 JavaScript 和原生部分保持同步（因为它们通过可能更改的私有 API 耦合）、远程内容的可信度以及潜在的应用程序商店拒绝都存在挑战。

在 webview 中显示远程加载的 HTML 内容应使用 Cordova 的 InAppBrowser。InAppBrowser 的设计是为了防止在其中运行的 JavaScript 访问 Cordova JavaScript API，原因如上所述。请参阅 安全指南。

保持更新

以下是一些了解 Cordova 最新信息的方法。

• 订阅 Cordova 博客。
• 订阅 开发者列表。注意 - 这不是一个支持组，而是一个讨论 Cordova 开发的地方。

获取帮助

以下链接是获取 Cordova 帮助的最佳场所

• GitHub 讨论 - Apache Cordova

  官方 Apache Cordova GitHub 讨论频道是我们的支持资源的最新补充，旨在将社区讨论和问题集中在我们 GitHub 代码库中。

  强烈建议使用此频道，因为它汇集了所有与 Cordova 相关的事物，并提供了保留讨论完整历史记录的优势。通过利用 GitHub 讨论，我们可以确保更好的连续性和可访问性，以便将来参考。

• Slack - Apache Cordova

  官方 Apache Cordova Slack 工作区是向社区寻求帮助并快速获得问题答案的绝佳资源。

  但是，请注意，我们的 Slack 工作区不保留消息历史记录。这限制了信息的长期可访问性。为了确保更好地保留您的问题，建议您在 GitHub 讨论中创建一个主题，并在 Slack 中分享链接和问题的摘要。

  这样，您就可以从 Slack 的即时响应中获益，同时还可以保留讨论并使其更易于将来参考。

• Stack Overflow - Apache Cordova

  在 Stack Overflow 上，可以使用“cordova”标签浏览所有 Cordova 问题。

  注意：StackOverflow 会自动将“phonegap”标签转换为“cordova”，以保留历史问题。

  Stack Overflow 拥有庞大而多元的社区，使其成为根据问题性质获得结果的绝佳选择。例如，即使您正在开发 Cordova 应用程序，如果您的问题更多地与 Web 或原生应用程序开发相关，那么使用此平台可能更合适。通过这样做，您可以将您的问题暴露给更广泛的社区，这些社区专门从事这些特定领域。

• Google Group - PhoneGap

  这个 Google Group 以前是 Cordova 的支持论坛，当时它被称为 PhoneGap。虽然该组目前处于非活动状态，但它仍然可以用于历史参考。

  建议使用其他平台，例如 GitHub 讨论、Stack Overflow 或 Slack 来获得支持并与 Cordova 社区互动。这些平台为协助和讨论提供了更多活动。