Apple Watch开发-初探

撬动代码的小秋
2,217 阅读12分钟

目录:

  • 前言
  • 一、Apple Watch简介
  • 二、Watch App在项目中的结构
  • 三、 Apple Watch上的app特点和原理
  • 四、 Watch App UI介绍
  • 五、App Watch与iphone 之间的通信
  • 六、Watch App 和watchKit Extention之间数据共享
  • 七、Watch App通知
  • 八、App Watch单独发送网络请求

前言： 随着现在 Apple 生态圈的发展，越来越多的 App 会把自己的简化版从 iOS 迁移至 WatchOS（支付宝、微信、手Q、头条、QQ音乐、网易云音乐等等，都有Watch版App）。

一、Apple Watch简介

Apple Watch是苹果公司主打 “健康” 概念的智能手表。 于2014年发布第一代Apple Watch 1，截至2020年，已发布Apple Watch 5。

2015年3月10日，苹果在旧金山Moscone Center召开2015年春季新品发布会，正式发布了Apple WATCH，分为运动、标准、定制三版，将于2015年4月10号预售，4月24日上市。

Apple Watch支持电话，语音回短信，连接汽车，天气、航班信息，地图导航，播放音乐，测量心跳、计步等几十 种功能，是一款全方位的健康和运动追踪设备。

Apple Watch App分为两种：

  • Watch App for iOS App： 从iOS迁移过来的Watch App，可与iOS App通信。
  • Watch App： 独立的Watch App，可独立安装在Apple Watch上。

大部分是第一种，Watch App for iOS App。

二、Watch App在项目中的结构

新建一个watchOS的target。

企业微信截图_e1206af5-51d4-44b6-8f02-0ee72d50de39.png

  • 这时，会出现两个target：WatchKit App、WatchKit Extension。

2.png

注意：在 WatchOS 中，无法像 iOS 那样依赖 UIKit 写出各种复杂的界面。目前，只能依赖 storyboard 搭建出一些简单的UI界面与界面跳转逻辑。

三、 Apple Watch上的app特点和原理

我们从开发的角度说下Apple Watch上的app特点和原理。

Apple Watch运行模式

首先手表上app和iPhone上app是一种联动关系，即Apple Watch上的开发的app是离不开iPhone的。为什么呢，这个它的运行策略有关，手表的cpu、硬件、电量都是有限的，所以节约空间和电量是很重要的，所以手表界面设计要精简，操作比较少。

Watch app和iPhoneapp是无缝关联的，因为Watch上的app都是iPhone帮它运行的，手机和Watch离得近，靠无限传输，在一定程度上节省了Watch的很多工作量，Watch负责显示iPhone处理后的结果，这其实也是一种绑定销售策略。Watch上的app其实就是iPhone上app的一部分、一种扩展。

Apple Watch app界面类型

image.png

Watch app有三种和用户交互的方式，或者说Watch app有三种界面：

  • 常规Watch app，这个是必须的，一些简单内容的显示和简单操作，可以看成手机上的精简版；
  • glance类型的界面，是一种纯提示型的界面，是不能和用户互动的，这部分可有可无；
  • notification类型的界面，这是消息通知时用到的，手机也可以接收推送通过这种界面显示，这种是可以和用户互动的。

Watch app和iPhone app的关系

image.png

Watch app和iPhone app是一种联动关系，其实也是一个绑定关系，是一个整体，Watch app并不是一个单独的project，而是在iOS project上扩展的一个Target，Watch app上并没有代码，只有界面资源，代码是在iPhone上运行的。

在WatchOS 2 之前， WatchKit App负责展示，安装在Watch上，WatchKit Extension负责业务和控制逻辑，安装在iPhone上。所有运算、逻辑以及控制都是在iPhone上完成。Watch app和iPhone app是通过Watchkit进行桥接的，所有的代码执行逻辑方面都是在iPhone上运行的，storyboard和图片资源在Watch端显示的，并且Watch app的安装运行都是由iPhone控制的。

  • 此外，一个iPhone每次可关联一个Apple Watch，它们是一对一的关系。目前Apple Watch只能跟iPhone设备配对，不支持iPad。

appFramework.png

在WatchOS 2之后，最大的改变就是将WatchKit Extension 直接从iPhone 移植到AppleWatch上。

watchOS2.png

Watch app启动过程

image.png

上图是Watch app加载的一个过程，可以看出Watch app的加载是依靠iPhone来进行的，启动app，加载Watch端的storyboard和图片等资源，然后会初始化UI，这个时候就走到iPhone端扩展里的初始化方法了，初始化完了之后就是显示UI，UI中的触发的动作都是去iPhone扩展里调用代码，将执行结果显示到Watch上。

刚才提到的init方法顾名思义了，awakeWithContext：方法就是通过iPhone传递过来的信息初始化UI的，类似我们之前的viewDidLoad，willActivate就相当于之前的viewWillAppear，这样就应该好理解了。

Watch App 生命周期

image.png

iPhone上app都有各自的生命周期，那么Watch app的生命周期呢，从上图我们就可以很直观的看到，从显示UI、用户交互到app结束，每一步都和iPhone对应app的扩展密切交流。

  • WKInterfaceController继承于NSObject WKInterfaceController 相当于UIViewController 。生命周期方法分别是：

    1. -initWithContext: 被初始化时调用，一般在这里配置视图元素，相当于-viewDidLoad
    2. -willActivate 将要呈现的时候调用，也可以在这个方法中进行视图元素的设置，相当于-viewWillAppear
    3. -didAppear 已经呈现的时候调用 ， 相当于-viewDidAppear
    4. -willDisappear 将要消失时调用 相当于-viewWillDisappear
    5. -didDeactivate 呈现后调用，在这个方法中停用持有self的对象，如NSTimer。相当于-viewDidDisappear

  • WKInterfaceObject 及其子类

    1. WKInterfaceObject 相当于UIView的代理，WatchKit实际呈现的View对于开发者来说是不可见的，只能通过WKInterfaceObject对UI对象属性进行设置，可以设置的属性非常少。
    2. WKInterfaceButton 相当于UIButton的代理
    3. WKInterfaceImage 相当于UIImageView的代理

  • WatchKit独立于UIKit，所有的类都继承自NSObject，没有完整的Response chain

四、 Watch App UI介绍

此章节会在后续的文章中介绍

我们做UI开发, 主要用的是WatchKit框架, 对比UIKit, 功能更少, 更简洁.

Watch App 布局

  • Watch App 的视图开发不能使用代码，必须StoryBoard, 布局方式如下 。

image.png

  • Watch App 采取的布局方式和 iOS App完全不同。不能使用 autoLayout或者坐标。只能使用相对布局。

    1. 水平：left center right
    2. 垂直：top center bottom

  • View Size可以使用三种方式设置:

    1. Size To Fit Content ： View的大小适应内容的大小
    2. Relative To Container ： 相对容器设置自身大小
    3. Fixed ：设置固定的宽高

UI 常见控件

  • WKInterfaceObject - (相当于UIView)

  • WKInterfaceGroup

    • 其他的WKInterfaceObject子类对象都不能重叠，只有这个类可以同其他的WKInterfaceObject对象重叠布局。

      1. 不能重叠如图所示: image.png

      2. 可以重叠 image.png

  • WKInterfaceButton - (相当于UIButton)

  • WKInterfaceLabel - (相当于UILabel)

  • WKInterfaceImage - (相当于UIImageView)

  • WKInterfaceTable - (相当于UITableView)

  • WKInterfacePicker - (相当于UIPickerView)

  • WKAlertControllerStyle - (三种弹窗方式)

    1. alert

image.png

  1. actionSheet

image.png

  1. sideBySideButtonsAlert

image.png

  • WKInterfaceMenu - (当按压时候触发显示)
    1. Apple Watch的 Retina屏是支持 Force Touch功能的, 提供了一种新的交互方式.
    2. 这是一个 WatchOS独有的类, 当页面中配置这 Menu时, 按压屏幕将会激活页面中的Menu。并且显示出Menu下的操作, 这些操作是另一个类型, WKInterfaceMenuItem。
    3. Menu最多可显示四个MenuItem, 它们可以关联各自的点击事件。

image.png

  • 其他...

导航开发

  • 所有的导航方式都可以通过代码或者SB的方式实现

  • 栈导航方式，类似UINavigationController。触碰左上角可返回

    1. pushControllerWIthName:context: 第一个参数是Controller对应的Identifier字符串，在SB中设置。可通过context传递数据。 image.png

    2. popController

    3. popToRootController

  • modal方式

    1. presentControllerWithName:context: image.png
    2. dismissController

  • 分页导航

    1. 类似UIPageController。左右滑动切换
    2. presentControllerWithNames:contexts: 传入 names 和 contexts数组，通过这种方式被呼出的 Controller 将以 page 导航方式呈现。

Apple Watch 和iOS的对比

  • 只能用storyboard拖拽相应控件，搭建基本UI。
  • 简单布局，默认是垂直布局。可通过嵌套Group来完成纵向布局需求。
  • 界面之间的传值，需要依赖contextForSegue方法。
    • 在storyboard中设置segueIdentifier。
    • 同时在下一级controller的awake(withContext context: Any?)方法接收解析context。

五、App Watch与iphone 之间的通信

在 WatchOS中有个WatchConnectivity框架是专门负责 WatchOS与 iOS之间的通信的。使用Connectivity框架在 WatchKit Extension和 iOS App之间进行通信。该框架提供了两个进程之间的双向通信，并允许在前台或后台进行数据和文件的传输。

  1. 在数据传输中可以使用NSDictionary包含要发送的数据的对象，进行数据传输。

  2. 字典的键和值必须都是属性列表类型。例如NSNumbe、NSString、NSArray、NSDictionary、Bool等基础类型

  3. 如果需要包含非属性列表类型的类型，可以将他们打包到NSdata对象中，或者在发送之前将它们写入文件。

WCSession

  1. WatchConnectivity框架中主要是通过WCSession类进行数据传输的。

  2. 在WCSession类中, 还有一些属性是只能在 iOS App中使用的。isPaired, isWatchAppInstalled, isComplicationEnabled, remainingComplicationUserInfoTransfers, watchDirectoryURL。这些都是仅仅在 iOS App中可用的。

  3. 在激活Session之前，可需要先进行一个检查当前 iOS设备是否支持Connectivity框架, 方法就是调用isSupported()方法。

image.png

  1. 在激活WatchKit Extension的Session前, 不必检查是否支持Connectivity框架, 因为 WatchOS一定支持Connectivity框架。

image.png

  1. iPhone 发送消息到apple watch

image.png

  1. apple watch 发送消息到 iPhone

image.png

通信方式

前台实时传输

  • 前台传输, 是实时传输, 消息字典传输和消息数据传输。 消息字典传输

image.png

后台不定时传输

后台传输又分为覆盖式传输, 队列式传输.

覆盖式传输
  • 后台传输中覆盖式的传输意味着, 当你进行数据传输时, 如果第一次发送的数据还没有送出去, 在此时进行第二次数据传递, 将会覆盖第一次的数据。这时数据接收方接收的数据只会有第二次的, 第一次的数据会丢失。
  • 后台传输中队列式的传输意味着, 后一次的传输不会覆盖前一次所传输的数据。系统会把所有的数据按照次序进行发送。
队列式传输
  • 字典传输,
  • 文件传输,
  • 表盘数据传输。

六、Watch App 和watchKit Extention之间数据共享

在运行时可以使用共享App Group在 Watch App和 WatchKit Extension之间共享媒体文件。

  1. 启用app group 功能： image.png

  2. 设置数据到APP group中： image.png

  3. 从app group 获取内容： image.png

七、Watch App通知

  • WatchOS 3.0(对应 iOS 10.0)开始, 通知开始使用UserNotifications框架。
  • apple watch 通知分为Short-Look (短视界面)和 long-look(长视界面) 两种

Short-Look(短视界面):

Apple Watch首次收到通知时, 系统会显示短视界面。short-look只是简单的通知预览, 并且short-look的通知界面是不能自定义。用户继续查看通知，则系统会从short-look界面快速转换为long-lock界面。

image.png

Long-look(长视界面):

长视界面是一个可滚动的屏幕，显示通知的内容和任何相关的操作按钮。如果没有提供自定义通知界面，Apple Watch会显示一个默认界面，其中包括应用程序图标、通知的标题和通知内容。如果提供了自定义通知界面，Apple Watch会显示自定义界面。

Long-look 通知界面分为三个区域：sash区域、content区域、bottom区域。

  • sash区域: 是覆盖式的，其中包含应用图标和应用名称。它的颜色是可以自定义的。
  • content区域: 包含有关传入通知的详细信息, 这是主要的自定义区域。
  • bottom区域: 包含关闭按钮以及在 iOS中注册的可操作按钮。

image.png

自定义长视(Long-Look)

自定义长视(Long-Look)通知界面由两个独立的界面组成：一个是静态的(Static)，一个是动态的(Dynamic)。

  • 静态界面(Static Interface)是必需的，是显示通知消息以及配置任何静态图像、文本的简单方法。

  • 动态界面(Dynamic Interface)是可选的，可提供一种在运行时自定义通知内容显示的方法。

  • WatchOS会除了下面几个情况会显示静态界面(Static Interface)，除此之外都会显示动态界面(Dynamic Interface):

    • 当动态界面不可用时
    • 没有足够的电量来保证显示动态界面时
    • 明确告诉 WatchOS不显示动态界面时 如下图： image.png

  • 静态界面的目的是在 WatchKit Extension无法及时配置动态界面的情况下能提供稳定的界面。通知界面也会显示在通知中心中。 创建静态界面的规则:

    • 所有图片都必须位于 Watch App的包中。
    • 界面不得包含control、table、map或其它交互式控件。
    • 界面的notificationAlertLabel必须外连接到Lable上。Label的内容将会被设置为通知的消息

如何判断活跃设备

  • 当 iPhone处于未锁屏的状态时, 通知将会推送至 iPhone上。
  • 当 Apple Watch没有在用户的手腕上, 通知将会推送至 iPhone上。
  • 当 Apple Watch在用户的手腕上, 且 iPhone处于锁屏状态时, 通知将会推送至 Watch上。
  • 在推送远程通知时, 如果通知推送至 Watch上后, iPhone端是可以收到通知的, 但不会有任何提醒, 甚至屏幕都不会亮起。
  • 如果想在没有佩戴 Apple Watch时对其推送, 也可以在常规设置中禁用手腕检测选项。但需要确保 Apple Watch没在充电器上。

八、App Watch单独发送网络请求

  • APP watch 也是通过 NSUrlSession 来发送网络请求的。
  • 同时也支持AFN，kingfisher .. 等ios 第三方通用库。

image.png

参考

  • 如有侵权，联系必删！
  • 如有不正确的地方，欢迎指导！
  • 如有疑问，欢迎在评论区一起讨论！
avatar
文章
阅读
粉丝