@capacitor/watch

CapacitorLABS - 此项目是实验性的。不提供支持。如有需要，请打开问题。

Capacitor Watch 插件允许您在您的网页代码中定义一个手表的 UI，并在配对的手表中显示。

目前仅支持 iOS。本指南假定您已将 iOS 添加到您的 capcacitor 项目中。

注意 - 所有这些仅适用于真正的苹果手表。模拟器不允许像真实设备一样的应用程序<->手表通信。

安装

步骤 1

将手表插件添加到您的 capacitor 项目中，然后打开 Xcode 项目

npm install @capacitor/watch
npx cap sync
npx cap open ios

步骤 2

转到添加功能

添加 '后台模式' 和 '推送通知' 功能。然后在后台模式选项中，选择 '后台获取'、'远程通知' 和 '后台处理'。您的应用程序目标应如下所示

步骤 3

打开 AppDelegate.swift 并将其添加到文件顶部的 import WatchConnectivity 和 import CapactiorWatch，然后在 application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) 方法中添加以下代码

assert(WCSession.isSupported(), "This sample requires Watch Connectivity support!")
WCSession.default.delegate = CapWatchSessionDelegate.shared
WCSession.default.activate()

步骤 4

在 Xcode 中选择“文件”->“新建”->“目标”，然后选择 watchOS 选项卡和“应用程序”

点击“下一步”，然后填写如下选项

此对话框可能有些令人困惑，关键是您的 'Bundle Identifier' 必须是 [your apps bundle ID].watchapp 才能使手表向应用程序配对工作。您还必须选择 SwiftUI 作为界面和 Swift 作为语言。该项目应该是 App。

步骤 5

我们将添加使电容手表在手表应用程序中工作的代码。

如果您使用的是Xcode 15 Beta 4或更高版本，则需要从您的node_modules中添加电容手表Swift包

首先，转到项目包依赖关系

然后选择'添加本地'

然后导航到node_modules/@capacitor/watch/CapWatch-Watch-SPM文件夹，并点击'添加包'

然后，在右侧的列中选择您的手表应用程序作为目标，并点击'添加包'

完成此操作后，您的包依赖项应如下所示

在Xcode 14中，您需要在此处（https://github.com/ionic-team/CapacitorWatch/tree/main/packages/iOS-capWatch-watch/Sources/iOS-capWatch-watch）复制所有文件到您的手表项目中，并确保选择的目标是您的手表应用程序。它应该如下所示

步骤6

然后打开手表应用程序的'Main'文件，该文件应为watchappApp.swift。在@main语句之上添加行import WatchConnectivity。然后将说ContentView()的行替换为以下内容

CapWatchContentView()
    .onAppear {
        assert(WCSession.isSupported(), "This sample requires Watch Connectivity support!")
        WCSession.default.delegate = WatchViewModel.shared
        WCSession.default.activate()
    }

完成后的文件应如下所示

步骤7

将'后台模式'功能添加到手表应用程序的目标中，并启用'远程通知'

现在您可以为Capcacitor Watch开发しました！

开发工作流程

您仍可以像普通的电容应用程序一样开发您的iOS应用程序，但要使它运行在手表上，您需要更改Xcode中的目标和目的地。您可以使用Xcode中顶部中心的'目标下拉菜单'来更改此设置。

此栏的右侧允许您选择目标设备或模拟器。您需要选择与手机配对的智能手表，然后单击'运行'按钮或使用'cmd+r'快捷方式运行。

在同步手表和手机应用程序时可能存在一些挑战。有时您将在xcode控制台中收到一个错误，该错误表示配套应用程序不存在。在这种情况下，最佳解决方案是在两个设备上重新构建和重新安装应用程序。

构建手表UI并将其发送到手表

您将使用长字符串来定义手表UI。换行符分隔组件。当前此插件仅支持垂直滚动的文本或按钮组件。

定义您的UI后，您可以使用updateWatchUI()方法将UI发送到手表

async uploadMyWatchUI() {
    const watchUI = 
        `Text("Capacitor WATCH")
         Button("Add One", "inc")`;

    await Watch.updateWatchUI({"watchUI": watchUI});
}

这将产生以下结果

与手表通信

本文对原生方法和其影响提供了很好的总结：https://alexanderweiss.dev/blog/2023-01-18-three-ways-to-communicate-via-watchconnectivity

在手机端，你可以使用 Capacitor 背景运行器插件（https://github.com/ionic-team/capacitor-background-runner）来实现这些方法。目前，手表插件主要处理 didReceiveUserInfo 方法，并且你可以通过以下 runner.js 中的代码在后端应用中接收来自手表的实时事件：

addEventListener("WatchConnectivity_didReceiveUserInfo", (args) => {
  console.log(args.message.jsCommand);
})

你还可以为前台处理实现 runCommand 事件监听器。

Watch.addListener("runCommand", (data: {command: string}) => {
  console.log("PHONE got command - " + data.command);
})

命令是手表 UI 中 Button() 定义的第 2 个参数。这可以是任何字符串。

更新手表数据

你可以通过使用 $ 变量和更新 updateWatchData 命令来向 Text() 元素添加变量

Text("Show my $number")

此示例将执行时更新 $number 变量

var stateData = {
  number: 0
}

async function counterIncrement() {
  stateData.counter++  
  await Watch.updateWatchData({"data": convertValuesOfObjectToStringValues(stateData)})
}

手表上的持久性

Capacitor Watch 会通过 updateWatchUI() 保留你发送的最后一个 UI。从 updateWatchData() 保留的状态不会持久化。