遇见表盘共享

展示你的 watchOS app 的复杂功能，并创建值得共享的表盘。了解如何在 watchOS 和 iOS app 内共享表盘，或将表盘发布在网络上，以供其它人查找和下载。我们还将探讨使用表盘预览图像的最佳方法，并向你展示如何创建流畅的安装体验。

资源

相关视频

WWDC20

下载

（你好 WWDC 2020）你好欢迎来到 WWDC （遇见表盘共享）你好我叫 Jared McGann 我是 watchOS 的工程经理今天我们想谈谈 Apple Watch 表盘共享是 watchOS 7 和 iOS 14 中的一项新功能表盘共享正是您所期望的与任何人共享一个表盘的功能按照你喜欢的方式进行配置表盘可以直接从手表共享通过长按你的表盘和轻点新的“共享”按钮选择一个收件人写一个消息就这样在信息中你会在手表上看到内联预览收件人也一样他们只需轻点预览系统就会提示他们将此表盘添加到手表上

你还可以从你的 iPhone 共享表盘只需打开 iOS Watch app 然后选择一个表盘然后点击在右上角熟悉的“共享”图标

你会看到一个共享键你可以选择如何共享你的表盘那么作为一个开发者如何利用表盘共享呢？好吧表盘可以直接从你的 app 共享并托管在网站上只需轻点几下你所配置的表盘就可以安装在客户的 Apple watch 上如果你在表盘上添加了复杂的功能用户在添加表盘时就会被提示安装你的 app

如果你的 app 在收件人所在地区不可用那么你的复杂功能就不会出现在表盘上值得一提的是一些新表盘在老款手表上是无法使用的耐克和爱马仕的表盘只能在各自的硬件上生成和添加表盘文件包含所有表盘配置包括颜色、风格、照片和复杂功能你可以在手表上配置的任何东西如果表盘有你的复杂功能该文件将包括一个示例条目以便它可以在收件人的设备上预览即使你的 app 尚未安装今年我们在 ClockKit 中推出了令人兴奋的新的复杂功能 API 表盘现在支持来自同一 app 的多种复杂功能如果你的复杂功能利用了用户信息代码字典或用户活动这些使用偏好可以包括在一个共享的表盘内例如如果一个共享表盘包括了 Dawn Patrol 的复杂功能用户信息代码字典可以用来指定显示的是哪个城市的冲浪情况要了解更多请观看“为 Apple Watch 创造复杂功能”的演讲

所以今年我们向 ClockKit 添加了新的 API 允许你提示客户在 app 中添加一个表盘使用本地 URL 调用 addWatchFace 到你预先配置的表盘文件并会提示客户将表盘添加到他们的 Apple Watch 中 watchOS 和 iOS 的 ClockKit 中都可以使用此 API 当你的复杂功能被添加到手表上后你的 app 将运行并响应 ClockKit 的时间轴请求此时你的 app 可以引用我前面提到的用户信息代码字典现在我想把话题交给 Joe 他将告诉我们如何把这个功能添加到一个现有的 app 中谢谢 Jared 你好我叫 Joe Dio 我是 watchOS 的软件工程师今天我将向大家展示如何在 iOS 和 watchOS app 中轻松采用新的表盘共享 API 我有一个叫做“咖啡追踪器”的 app 这个 app 可让你追踪每日咖啡因的摄入量这是我的 app 的主要视图在这里我可以查看我一天的咖啡因摄入量如果我点击底部的咖啡杯按钮它会打开饮料列表视图在饮料清单视图我可以看到含咖啡因的饮料清单如果我轻点其中一种饮料它就会加入到我一天的咖啡因摄入量中

我的 app 还有一个带有复杂功能的手表 app 可以显示你当前的咖啡因摄入量我认为我的 app 的复杂功能是超级有用的我想在我的 app 中与我的客户分享这些功能我认为在我的 iOS app 中实现表盘共享是实现这一点的好方法让我们看看如何实现这一点这是我将如何在这个 app 内实现表盘共享的概述首先我需要使用 app 的复杂功能生成表盘接下来我需要将表盘和表盘预览导入到我的 app bundle 中然后我将创建用户界面用于显示和添加表盘最后我将添加对旧手表的支持因此让我们看看如何做到这一点

我在使用电话首先我需要创建一个表盘分享所以我将打开 Watch app

我将打开表盘库

现在让我们来寻找一款能填补我们 app 的表盘

我喜欢模块化紧凑表盘的经典模块外观所以我会选择它我的 Watch app 有一个奇妙的矩形复杂图形在此表盘的底部看起来很棒

所以我选择咖啡追踪器复杂功能这看起来很棒但是我想把这个表盘变成我自己的所以我要为它选择一种颜色让这个表盘更像咖啡

核桃看起来就像一杯咖啡现在我要选择一个好的中间级的复杂功能

我认为这种呼吸复杂功能会帮助那些对咖啡因上瘾的人平静一点

看起来很棒我现在对我们的咖啡追踪表盘很满意我准备共享它在我们共享它之前请记住你的 app 需要已经发布到 App Store 然后你才能在你的 app 中共享这个表盘把它解决了我已经准备好共享我的表盘了我只需要轻点右上角的“共享”按钮

在共享视图中你可以看到“选项”按钮在这里你可以排除任何复杂功能或来自共享表盘的数据我的复杂功能配置是当使用用户信息代码字典轻击时总是记录一杯意式浓缩咖啡 Jared 在之前有提到但我不想让它成为我的客户的默认值我与他们分享这个表盘时所以我将选择“不包含数据” 作为我的复杂功能

其他一切看起来不错所以我将其保留当你通过电子邮件分享一个表盘你会得到一个表盘文件以及一个表盘的预览图像预览图以后会很有帮助我已经通过电子邮件将表盘发给自己并提取内容到我的下载文件中让我们来看一下在我的 Mac 上我已经打开了“下载”文件夹你可以看到我有表盘文件以及来自电子邮件的相关的预览我要添加这个表盘到我的 Xcode 项目

在 app 中共享表盘的另一个重要方面是显示表盘的预览在文件夹中你可以看到其中有一个预览图像我将在创建用户界面时使用这个预览图像我将把这个图像拖动到 Xcode 资产文件夹中现在我们有了图像我们终于准备好进行编码了我将从打开 DeviceModel 类开始

我创建这个类是为了检测手表是否与手机配对我将在我的视图中使用它来仅向拥有手表的用户显示我的表盘我还导入了 WatchConnectivity 框架它允许我在这个类中实现 WCSessionDelegate 协议通过实现这个协议我可以使用 WCSession 来确定客户是否有配对的手表我将在这个类中创建一个 isPaired 计算变量使用 WCSession 来指示手表是否配对

现在我有了 isPaired 变量让我们转到 DrinkListView

在此饮料清单的底部我想要一个导航链接到一个视图有人可以添加表盘然而我只想把这个导航链接显示给一个有配对 Apple Watch 的人所以我将使用我的 DeviceModel 类创建一个常数等于 DeviceModel 的 isPaired 变量现在我将使用我新创建的常量来确定这个视图是否应该显示一个到“创建表盘”视图的导航链接我现在要把账单和用户界面加进去

这是我们新创建的导航链接但现在 AddFaceView 里面没有任何内容所以让我们来看一下 AddFaceView

在 AddFaceView 中我需要显示表盘的预览和用于添加表盘的按钮我将为此添加用户界面

这显示了我导入的表盘的预览并创建了一个添加表盘的按钮当按钮执行它的动作块时它还显示一个活动指示器

我使用来自 Apple Design Resources 网站的一个资源创建了这个按钮现在这个按钮没有任何功能所以我将通过使用新的 addWatchFace 功能来修复它首先我将导入 ClockKit

现在我将创建一个用于调用 addWatchFace 的包装器函数

让我们看看这个代码看看如何使用新的 addFace 函数

首先我创建了一个 URL 指向我的 app bundle 中的表盘文件

接下来我使用新的 addFace 函数我通过创建一个实例来使用它 CLKWatchFaceLibrary 的功能然后我调用 addWatchFace 函数使用我展开的 watchFaceURL

在完成块中我们需要考虑添加表盘时可能发生的任何错误现在我只把错误打印出来现在让我们在按钮的动作块中调用这个方法

在这里你可以看到我使用刚刚创建并导入到项目中的表盘来调用 addFace 现在让我们看看 Add Watch Face API 在实际操作中运行此 app

我将打开饮料视图

在这里我们可以看到我的导航链接按钮位于底部我将轻点它来打开“添加表盘”视图这里我们可以看到“添加表盘”视图预览我们的表盘这个表盘看起来很有帮助因此我将轻点“添加表盘”按钮

现在我们进入了 Watch app 我将点击“添加到我的表盘”

现在表盘被加到了我的手表上这是很棒的我认为顾客会发现这个表盘非常有用

然而这种模块化紧凑型表盘是不兼容的系列 3 手表为了支持较旧的设备我们可以提供一个备用表盘以防客户使用较旧的设备让我们回到 Xcode 看看我们如何做到这一点

现在 addWatchFaceWrapper 无法处理可能遇到的错误让我们通过在第一个表盘不兼容时尝试添加一个后备表盘来更改它

现在让我们用一个系列 3 兼容的后备表盘调用我的 addWatchFaceWrapper 函数

我使用模块化的表盘作为我的后备我是根据 Human Interface Guidelines 中列出的一个与系列 3 手表兼容的表盘列表选择了这个表盘我已经把这个文件放到了我的 Xcode 项目中所以现在任何拥有 Apple Watch 的人都可以使用我们的 app 的表盘在继续之前让我们回顾一下该演示中的一些最佳做法首先当你共享表盘时记住用户数据是可以包含在内的这对于指定在复杂功能中显示什么内容很有价值但要注意不要无意中包含私有数据

同样重要的是要确保你的复杂功能包括样本数据这样表盘预览就不会是空白的

如果你使用 WatchConnectivity API 来检测客户是否有配对的手表然后通过 iOS app 提供表盘这也很有帮助同时请记住获得表盘预览图像的最佳方式是通过电子邮件发送请记住如果你的表盘与系列 3 手表不兼容你也应该为这些客户提供表盘最重要的是不要忘记你的 app 必须在发布后才能包含在共享的表盘中这是因为 App Store Connect ID 需要包含在表盘文件中现在j将话题交回给 Jared 谢谢 Joe 表盘也可以在网站上共享当客户在 iOS 中下载表盘时 Safari 浏览器会提示客户将表盘添加到他们的 Apple Watch 中 Safari 浏览器最有可能将你的文件识别为表盘如果你使用这里显示的表盘 MIME 类型文件

这里我们看一个在网络站点上共享的表盘的示例表盘预览应该显示在官方 “添加 Apple watch 表盘”按钮的上方预览图像可以通过电子邮件在 iOS 手表 app 中分享一个表盘就像我们刚才看到的 Joe 所做的那样此按钮可以在 Apple Design Resources Web 网站上找到还有一个可以在 watchOS 上使用的精简版本如果你喜欢在照相硬件中显示你的预览如这里所示也可以在设计资源中找到这些图像

如果共享表盘与 Apple Watch 系列 3 不兼容那么提供一个备用表盘就很重要当你共享两个表盘时网页上应该包括单独的预览和按钮更多细节包括表盘兼容性可以在 watchOS Human Interface Guidelines 中找到 QR 码和 NFC 标签提供了更多共享表盘的机会只需嵌入一个包含表盘文件的网页链接就可以轻松地将你的复杂功能和 app 安装到客户的 Apple watch 上（下一步）我们希望你能配置你自己的表盘并在你的 app 内或你网站上的托管表盘中采用表盘共享 API 这是一个很好的方式让你的 app 和复杂功能作用在客户的 Apple Watch 上谢谢你的参与

7:20 - Detect Paired Watch

var isPaired: Bool {
    if (WCSession.isSupported()) {
        let session = WCSession.default
        session.delegate = self
        session.activate()
        return session.isPaired
    } else {
        return false
    }
}

9:01 - Add Face Wrapper

private func addFaceWrapper(withName: String) {
    if let watchfaceURL = Bundle.main.url(forResource: withName, withExtension: "watchface") {
        CLKWatchFaceLibrary().addWatchFace(at: watchfaceURL, completionHandler: {
            (error: Error?) in
            if let nsError = error as NSError?, nsError.code == CLKWatchFaceLibrary.ErrorCode.faceNotAvailable.rawValue {
                print(nsError)
            }
            isLoading = false
        })
    }
}

11:04 - Add Face Wrapper with Fallback Face

private func addFaceWrapper(withName: String, fallbackName: String?) {
    if let watchfaceURL = Bundle.main.url(forResource: withName, withExtension: "watchface") {
        CLKWatchFaceLibrary().addWatchFace(at: watchfaceURL, completionHandler: {
            (error: Error?) in
            if let nsError = error as NSError?, nsError.code == CLKWatchFaceLibrary.ErrorCode.faceNotAvailable.rawValue {
                if let name = fallbackName {
                    // We failed, trying with fallbackName.
                    addFaceWrapper(withName: name, fallbackName: nil)
                }
            }
            isLoading = false
        })
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。