下一步

对于了解如何使用 Cordova CLI 并使用插件的开发人员来说，接下来可能需要考虑研究一些事项，以构建更好、性能更高的 Cordova 应用程序。以下文档就各种与最佳实践、测试、升级和其他主题相关的主题提供了建议，但并非规定性的。将此视为您作为 Cordova 开发人员成长的起点。此外，如果您看到可以改进的地方，请贡献!

Cordova 应用程序的最佳实践

1) SPA 是您的朋友

首先也是最重要的 - 您的 Cordova 应用程序应采用 SPA（单页应用程序）设计。简单来说，SPA 是一种客户端应用程序，它通过一次 Web 页面请求运行。用户加载一组初始资源（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 应用商店（可能还有其他商店）会拒绝未正确处理离线/在线状态的应用程序。有关此主题的更多讨论，请参阅 “Is This Thing On?”

处理升级

升级 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 友好的单元测试解决方案都可以。

在模拟器上与在真实设备上进行测试

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

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

当然，不可能在市场上所有可能的设备上进行测试。因此，最好招募许多拥有不同设备的测试人员。尽管他们不会发现所有问题，但他们很有可能会发现您永远无法单独发现的怪癖和问题。

调试 Cordova 应用程序

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

iOS 调试

Xcode

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

使用 Web 检查器进行 Safari 远程调试

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

要开始检查，首先在设备上的“设置 > Safari > 高级 > Web 检查器”中启用它。在您的桌面上，从“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 Discussions - Apache Cordova

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

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

• Slack - Apache Cordova

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

  但是，请务必注意，我们的 Slack 工作区不保留消息历史记录。这限制了信息的长期可访问性。为确保更好地保留您的问题，建议在 GitHub Discussions 中创建一个主题，并在 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 Discussions、Stack Overflow 或 Slack 等替代平台来获得支持并与 Cordova 社区互动。这些平台为提供帮助和讨论提供了更积极的作用。