从2015年苹果发布第一代Apple Watch，其功能越来越完善，开发也从WatchKit到现在支持SwiftUI、WidgetKit构建。接下来的文章我们将从0开始，学习Apple Watch的开发。zWatch App支持配套iOS App运行，也支持独立运行，因为本系列主要介绍Watch App，前期我们暂不创建配套的iOS App。

此篇作为第一篇，我们先简单实现创建项目、显示UI、点击交互，让我们开始吧！

1.创建项目

打开Xcode,选择File -> New -> Project，选择watchOS -> App:

创建项目.png

输入项目名称HelloAppleWatch，保留默认选中的Watch-only App，点击Next：

image.png

image.png

2020年watchOS 7发布后，苹果用SwiftUI代替了Watchkit的storyboard，不再使用 WKInterfaceController、WKInterfaceLabel等类。 2022年发布的Xcode14，已经无法创建Watchkit的storyboard。2023年开始支持WidgetKit且移除了ClockKit。参考自苹果官网

2、构建UI

将以下图片添加到Assets中

cookie.png

把ContentView.swift的代码替换为：

struct ContentView: View {
    var body: some View {
        VStack {
            Image("cookie")
                .resizable()
                .scaledToFit()
        }
        .padding()
    }
}

创建EmojiSentence.swift，完整代码如下：

import SwiftUI

@MainActor
class EmojiSentence: ObservableObject {
    @Published var text = ""
    @Published var emoji = ""

    private let sentences = [
        (text: "Not my cup of tea", emoji: "🙅♀️ ☕️"),
        (text: "Talk to the hand", emoji: "🎙 ✋"),
        (text: "Not the brightest bulb", emoji: "🚫 😎 💡"),
        (text: "When pigs fly", emoji: "⏰ 🐷 ✈️"),
        (text: "Boy who cried wolf", emoji: "🚶😭🐺")
    ]
    private var index = 0

    init() {
        update()
    }

    func next() {
        index += 1
        if index == sentences.count {
            index = 0
        }

        update()
    }

    private func update() {
        text = sentences[index].text
        emoji = sentences[index].emoji
    }
}

我们无需关注EmojiSentence.swift中的代码，先直接复制，当作是工具类，后面再对其进行解释。
回到ContentView.swift中，在ContentView中添加属性：

@StateObject private var sentence = EmojiSentence()

@StateObject属性包装器确保只创建一次,而不会在View更新时重新创建。在原来.scaledToFit()之后添加以下代码：

.overlay(
    Text(sentence.emoji)
           .font(.title3)
           .padding(.top,10)
          .buttonStyle(.plain)
)

以上代码通过overlay，将显示emoji文案的Text组件层叠在图片之上，并通过修饰符修改了文字的字体大小和位置。

3、添加点击事件

现在我们的需求是，点击手表屏幕，显示下一组emoji数据。VStack之后、在Body结束之前，添加以下代码

.onTapGesture {
       sentence.next()
}

此时ContentView.swift的完整代码如下：

import SwiftUI

struct ContentView: View {
    @StateObject private var sentence = EmojiSentence()
    
    var body: some View {
        VStack {
            Image("cookie")
                .resizable()
                .scaledToFit()
                .overlay(
                    Text(sentence.emoji)
                        .font(.title3)
                        .padding(.top,10)
                        .buttonStyle(.plain)
                )
            Text(sentence.text)
                .font(.caption)
                .padding(.top,20)
        }
        .padding()
        .onTapGesture {
            sentence.next()
        }
    }
}

运行项目，每次点击手表屏幕，会显示下一条数据。

下一篇，将实现一个实时获取用户心率的Apple Watch APP，点击进入下一篇