为您的 NativeScript 应用程序开发 watchOS 扩展

在本文中，我们将探讨如何为您的 NativeScript 构建的 iOS 应用程序开发一个 watchOS 伴侣应用程序。如果您按照本文的步骤操作，您将构建一个看起来像这样的简单 watchOS 应用程序。

注意：本文的最终代码可在 GitHub 上获取：https://github.com/ignaciofuentes/nativescript-acme-sample。

在我们开始之前，有两点需要强调。首先，用于 NativeScript 的 watchOS 伴侣应用程序必须使用 Xcode 使用原生代码构建。由于 Xcode 只能在 macOS 上运行，因此以下步骤只能在 Mac 上执行。

其次，NativeScript 的 watchOS 支持目前处于测试阶段，存在一些限制，例如只能使用 Objective-C（而不是 Swift）开发 watchOS 应用程序，并且无法在主应用程序和 watch 扩展之间共享原生代码。

话虽如此，现在可以为您的 NativeScript 应用程序构建一个功能完备的 watchOS 扩展，这确实令人兴奋，我鼓励每个人尝试一下此工作流程，看看它有多么简单。

让我们开始吧！

创建您的 watchOS 应用程序

开发 watchOS 应用程序的第一步是在 Xcode 中打开您的 NativeScript 应用程序，您可以双击项目的 platforms/ios/<projectname>.xcodeproj 文件来完成此操作。

注意：如果您的项目使用 Podfile，您还将有一个 platforms/ios/<projectname>.xcworkspace 文件，您应该打开该文件。

在 Xcode 打开后，转到菜单栏并选择文件 --> 新建 --> 目标...，这将打开下面的对话框。

在对话框打开后，切换到watchOS 选项卡，然后选择WatchKit 应用程序选项（如上图所示）。点击下一步。

在下一个屏幕中，为您的 watch 应用程序命名，然后点击完成。

注意：确保将语言保留为Objective-C，因为它是 NativeScript 目前支持的唯一用于 watchOS 开发的语言。

Xcode 会询问您是否要为新应用程序激活方案，您需要这样做，因为它将允许您运行 watchOS 应用程序，我们将在稍后进行操作。

完成这些步骤后，您现在就拥有了一个简单的 watchOS 应用程序，可以开始进行开发了。

构建您的 watchOS 应用程序

为您的 NativeScript 开发 watchOS 伴侣应用程序与为完全原生构建的 iOS 应用程序构建 watchOS 应用程序没有什么不同。因此，您在网上找到的任何有关 watchOS 开发的指南都适用于 NativeScript + watchOS 开发 — 唯一需要注意的是，您目前必须使用 Objective-C 开发 watchOS 应用程序。

以下是一些您可能觉得有用的资源：

• Apple 的官方 WatchKit 文档
• Ray Wenderlich 的 watchOS 教程
• Hacking with watchOS（高级课程）

在本文中，我们将创建一个世界上最简单的 watchOS 应用程序，这样您就可以尝试完整的开发工作流程。

为此，首先展开左侧 Xcode 边栏中的新 watch 应用程序，然后双击 Interface.storyboard 文件。完成后，您应该会看到下面的屏幕。

故事板是 Xcode 提供的用于可视化应用程序开发的机制。您可以在网上找到许多有关学习故事板的教程（这里有一个我喜欢的一个），但今天我们只关注如何将一些可视化组件添加到您的 watch 应用程序的主屏幕。

首先找到 Xcode 顶部看起来像圆圈中的正方形的图标。

此按钮打开一个对象资源管理器，您可以使用它将用户界面组件可视化地拖放到您的 watch 应用程序中。要了解其工作原理，请查看下面的 GIF 图。

继续将一些 UI 组件拖动过来，这样您就有了可以测试的最小功能。准备就绪后，参考下面的屏幕截图，了解如何在 iOS 和 watchOS 模拟器上选择和运行您的应用程序。

选择完合适的模拟器组合后，点击 Xcode 左上角的播放按钮构建并运行您的应用程序。构建完成后，您应该会看到您使用 NativeScript 构建的 iOS 应用程序以及您新构建的 watchOS 伴侣应用程序。

现在，您已经创建了一个可以在模拟器上测试的 watchOS 应用程序。还剩下一个问题需要解决：目前，您的 watchOS 应用程序位于您的 NativeScript 应用程序的 platforms 文件夹中，该文件夹在 NativeScript 中被视为生成的代码。因此，如果您将其保留在 platforms 中，将来的构建可能会完全删除您的 watchOS 应用程序。

考虑到这一点，您的最后一步是将 watchOS 应用程序移动到您的 NativeScript 应用程序的 App_Resources 文件夹中。

让您的 watchOS 应用程序与 NativeScript 一起工作

有关 watchOS 开发的 NativeScript 文档 提供了有关如何将您的 watchOS 应用程序从 platforms/ios 文件夹移动到 App_Resources/iOS 文件夹的详细步骤，因此您应该参考该文档以了解具体步骤，但我这里会提供一些快速提示。

第一次打开 platforms/ios 文件夹时，您会发现两个新文件夹：一个用于您的 watch 应用程序，另一个用于所谓的 watch 扩展。

watch 应用程序是应用程序 UI 所在的位置，例如故事板和资源，而扩展是 watch 应用程序的所有代码所在的位置。刚开始时，您只需要知道您需要这两个文件夹才能使应用程序正常工作。

提示：这个StackOverflow 线程 提供了有关 watch 应用程序和扩展之间差异的更多信息，如果您好奇的话。

按照 NativeScript 文档提供的步骤移动您的文件后，您将拥有一个看起来像这样的文件夹结构。

请注意新的 watchapp 和 watchextension 文件夹，它们是您要将 watch 应用程序和扩展从 platforms/ios 中复制粘贴到的位置。

还要注意新的 watchapp/<watch app name>/watchapp.json 和 watchextension/<watch extension name>/extension.json 文件，截至本文撰写时，它们应该包含以下内容。

watchapp.json

{
    "assetcatalogCompilerAppiconName": "AppIcon",
    "targetBuildConfigurationProperties": {
        "WATCHOS_DEPLOYMENT_TARGET": 4.1,
        "LD": "\"\""
    }
}

extension.json

{
    "targetBuildConfigurationProperties": {
        "LD": "\"\""
    }
}

最棒的是，完成此结构设置后，您就可以继续在 Xcode 中开发您的 watchOS 应用程序，而无需再次进行设置。

也就是说，您可以打开 ios/platforms/<app name>.xcodeproj（或 ios/platforms/<app name>.xcworkspace）文件，对您的 watchOS 应用程序进行更改，这些更改将自动保存到 App_Resources 文件夹中的 watch 应用程序中。您无需在完成初始设置后复制粘贴文件。

接下来做什么？

如果您完整地按照本文的步骤操作，那么您现在已经开发了一个简单的 watchOS 应用程序来补充您的 NativeScript iOS 应用程序，这真是太棒了 🙂

我将用一些重要的说明来结束本文。首先，GitHub 上的NativeScript ACME 示例应用程序 具有一个功能完备的 watch 应用程序，您可以随时参考。

其次，NativeScript 的 watchOS 支持处于测试阶段。因此，如果您对 watchOS 开发感兴趣，我们很乐意收到您的反馈。我们是否应该投入更多时间来完善此工作流程并添加更多文档？您是否想看到我们目前没有提供的功能？请在评论区告诉我们。