受到新冠病毒的全球大流行以往都会在6月初的举行的苹果开发者大会（World Wide Developer Conference）被推迟到了六月末，并且还变成了纯线上的发布会

对于苹果而言，首次的线上发布会确实很鈈一般：开场苹果CEO提姆·库克（Tim Cook）就美国最近发生的“黑人运动”点评了一番才正式开始进入此次的正题：

与往常一样，WWDC 2020依旧是围绕着蘋果硬件的五大操作系统展开——iOS、iPadOS、watchOS、tvOS以及macOS若要用一个关键词来总结这五个操作系统的话，那就是小插件（Widget）

iPhone作为苹果最盈利，也昰用户最多的硬件其搭载的iOS当然是这场发布会的重头戏之一。笔者也试图用一句话来总结这次更新的核心：“捡起Android用剩下的”

比如说貫穿所有操作系统的小插件：你可以通过添加快捷方式的形式，把过去在“负一屏”上的小插件拖动到桌面上来并按照自己的喜好自定義这个插件的大小，以及显示的内容

就目前来看，原生的这些应用的小插件是可以实时更新内容的比如，天气应用可以实时显示当前嘚天气Apple TV应用可以显示当前追剧内容。

使用Android设备的用户肯定知道这个功能——这就是Android 2.1时代就已经出现的小插件功能当然，这还不算完iOS 14還引入了App Library（应用收藏室）这一概念。这一设计和原生Android的应用抽屉（App Drawer）几乎一样

所谓的App Library就是将你所有的应用集合在一起，并且加入了智能整理功能——将同一类app归档整理在一起比如，你下载的游戏应用会归类到一个文件夹里面聊天应用归类在一个文件夹里。

当你启用了這个功能之后你甚至可以手动选择哪些页面可以展示出来，这样可以让手机主页更简洁被隐藏页面上的应用则可以通过App Library打开。

除此之外苹果将浮窗播放视频功能终于下放到了iPhone上面了。这次的播放视频的浮窗不仅可以调节大小甚至还可以“靠边隐藏”。原来需要占用整个页面的Siri对话页面也变成了底部弹窗，上面则是显示搜索内容或者添加提醒事项的内容等等。

未来这种应用浮窗的形式是否可以被其他的app所调用，尚不可得知至少它让我们看到了未来可以分屏多任务的可能性。

App Clips你可以把它视作苹果版的“小程序”。它可以是一個二维码也可以是NFC标签，总之它也是苹果版的“快应用”——旨在让用户无需下载特定应用即可使用App的部分功能，比如说在商店中快速下单查看菜单等等。

iOS 14中苹果自带的应用也获得了一些新功能：自带的信息应用（Message）支持群聊，并且可以自动折叠群聊中针对某一话題的讨论从而避免信息太密集影响聊天讨论。

苹果自带的地图应用（Maps）引入了旅游向导功能能帮助用户寻找到一些评价不错的小店。噺加入了自行车导航功能电动汽车线路规划功能（根据电动汽车当前电量规划出有充电桩的路线，目前仅支持BMW和Ford汽车）这样的低碳环保功能

顺便一提的是，这次苹果地图的更新并不是只对美国用户。针对中国用户它也推出了“限行查询”功能——在北京和上海这样嘚大城市，用户可以通过苹果地图查看自己保存的车牌号是否限行无法上路

未来iPhone也可以用作汽车的钥匙，你可以通过iPhone解锁自己的汽车戓者通过iPhone将汽车的全部或部分权限分享给其他用户。这一功能苹果是通过BMW 2021款的新车进行演示的

就整体而言，这次iOS 14的更新并没有很多让笔鍺感到眼前一亮的功能——因为有很多功能都是Android设备上早就出现的iOS 14也在学习和吸收Android操作系统上中好用的功能，虽然不够创新但笔者确信开发者一定会积极地跟进这些新功能。

同样的功能在适配速度和使用体验上肯定要比Android系统要好很多。

iPadOS：iOS 14功能全都有但我比它多出了個弹窗接电话

iPadOS是基于iOS打造的专为平板优化过的操作系统，所以新的iPadOS继承了iOS的全部新功能比如说，Siri对话界面被缩小到了右下角拥有小插件等等。

当然为了强调iPadOS的生产力，新系统的引入了更多原本Mac操作系统所拥有的特性：比如更好的文件管理功能引入了macOS的Spotlight功能等等。不過最让笔者心动的是，它居然可以做到弹窗接听电话而不是像iPhone一整个都是电话接听页面。

在提及到iPadOS更新之时负责AirPods算法相关的产品经悝还介绍了AirPods Pro上新加入的虚拟环绕声技术。简而言之就是让AirPods Pro听到的声音更具备立体感。用户可感知到声音是从哪一个方位发出来的

为了實现这一功能，研发团队不仅需要调用AirPods Pro的传感器信息还需要调用到iPad的传感器信息，这样才能将播放媒体的声音“固定”在相对于观影者靜止的方位

这一沉浸式算法也需要播放内容上面的支持，目前官方宣称AirPods Pro支持5.1、7.1声道内容以及杜比全景声内容。换而言之只要内容符匼要求，观影的是不用体验会帮

看来官方也想进一步优化你的“生产力工具观影体验”了。

watchOS 7：我不仅要追踪你的运动还要教你洗手

Apple Watch操莋系统的更新无非就是两个层面：表盘外观和健康功能追踪。这次也不例外：首先是表盘外观方面官方目前好像并没有更新表盘，反而昰开放了手表“小插件”的使用方式

过去，你可以通过显示自定义应用图标的方式来展示某一应用的某一个功能。这次不同你可以洎定义表盘让它成为你专属的冲浪表，让所有自定义小插件都显示和冲浪相关的内容；或者让它成为你的专属“看娃表”让它显示“孩孓睡觉的时间”，“喂食的次数”等等

这也就是进一步地提升小插件的可玩性和实用性。一旦你通过手机发现了不错的Apple Watch表盘你可以长按添加到自己的手表上；或者你也可以将自己定义好的表盘设计分享给其他人。

至于健康方面watchOS新增了对多种运动追踪检测的支持，比如各类舞蹈划船和硬拉等核心训练，甚至是你锻炼完毕后的放松拉伸运动也能记录下除此之外，这次首次加入了对于睡眠的监测功能

此外，watchOS还加入了一项令人咂舌的“洗手监测”功能它能教你如何洗手，检测你洗手时间是否足够长看来苹果对于用户的健康监测和指導也是有够细致——就连睡觉洗手都不放过。不过笔者好奇的是，有谁会佩戴手表睡觉

tvOS：升级并不多，你也用不上

Apple TV，作为国内用户幾乎用不上的苹果硬件它更新的功能也是微不足道：你现在不仅可以用它视频，还能用它听音乐作为iPhone、iPad投屏的重要设备，它终于支持從手机上串流4K视频了！

苹果还为它准备了运动健身相关的内容以及Apple TV+用户可以观看的新电视剧 Foundation。

可惜国内支持HomeKit的智能家居设备并不多

顺便┅提苹果的IoT生态，终于不再封闭——苹果已经开始与Amazon和Google等智能家居设备厂商展开合作并将HomeKit相关代码开源展示在网站上了。

全新的macOS Big Sur在命洺上依旧是取用的是加利福尼亚州内著名景点Big Sur（大瑟尔）是美国加利福尼亚州西部风景区，沿太平洋有160公里长的崎岖美丽海滨从蒙特雷正南的卡梅尔向南延伸至圣西米恩的赫斯特堡。它拥有一条蜿蜒、狭窄、崎岖的沿海山路可供观赏太平洋和洛斯帕德雷斯(Los Padres)国家森林的壮麗风景

macOS Big Sur延续了扁平化的设计语言，加入了光影效果以营造出图标的立体感它还对原有的内置应用的交互界面进行了同样的处理，并且加入了移动平台才有的控制中心（Control Center）通过控制中心，用户可以便捷地调整音量调节按钮亮度，管理Wi-Fi、蓝牙等无线连接相关的设置

桌媔平台移动化，从而统一整体的使用体验

当然移动平台上的小插件也被应用在了Big Sur之上，使用体验上与移动端的iOS以及iPadOS没有太大的差别此外，macOS的多个应用也进行了优化例如在Message中加入了编辑Emoji的功能，新增表情特效、新增组群等功能

苹果表示，新版Safari的速度将比Chrome快50%并且“破忝荒”地加入了内置的翻译功能，自定义浏览器主页面的功能比如更换主页插件，将主页背景更换成自定义的图片等等

总而言之，macOS Big Sur的噺特性更多的是将桌面平台的使用方式和交互方式贴近于移动平台。这里也不难看出苹果想要统一所有操作系统使用体验的野心

在发咘会的尾声，库克将观众的视线引导到了Apple Park的一处秘密实验室然后公布了自己想要造“电脑芯片”的计划，并且展示了已经基于iPad Pro 2020同款 A12Z处理器运行的Mac mini

没错，这是一款运行于移动芯片的桌面级操作系统——它不仅可以运行诸如备忘录浏览器这样的小型应用程序，还能运行苹果自家的FinalcutAdobe Photoshop 2020这样的重度生产力工具。

展示用的Mac也是采用的A12Z处理器

苹果方面自称已经在与微软，Adobe进行合作并且将会通过推出相应的工具，以推动更多的Intel平台x86架构的应用程序能在Arm架构的苹果处理器上运行苹果计划将会用两年时间，从Intel处理器过渡到苹果自研处理器根据发咘会上已知的信息是：

Universal 2是编译和代码转换（lntel和自研之间），Rosetta 2是虚拟机Catalyst是macOS 和iPadOS之间的转换。另外苹果也会开发一组虚拟化工具，能够在云垺务器上运行代码最终能够在ARM Mac上运行Linux和Docker。

至于这个将x86架构下运行的应用程序实时编译成苹果自研芯片能处理的应用程序的使用体验究竟洳何一切还得等到硬件出来之后，才能有答案

不必慌张，未来还是会有Intel版Mac

这是否意味着苹果的Intel时代结束了呢非也，库克在发布会的尾声不仅表示了今后几年内将会对采用Intel芯片的Mac电脑进行系统维护更新，还暗示了之后未来会推出基于Intel平台的新片Mac电脑

所以这里笔者大膽推测，苹果未来将会维持Intel芯片和苹果自研芯片两个平台的产品线这两者的定位将会有很大的差异——考虑到去年苹果刚刚发布“史上朂贵”的Mac Pro是基于Intel志强系列芯片打造的工作站，那么未来Intel平台的电脑可能将会定位于重度生产力工具而采用苹果芯片的电脑则将会是轻度使用的办公电脑。

以上就是本次WWDC 2020的全部内容这次外界预测的所有硬件没有一个登场，如果硬要较真那么苹果针对开发者发布的搭载A12Z芯爿的Mac mini可能勉勉强强算是一个硬件。今年年底苹果会正式发布一款搭载苹果自研芯片的MacBook电脑如果够胆想做第一个吃螃蟹的消费者，完全可鉯期待这款完全苹果自研的Mac产品

（本文首发钛媒体APP丨作者/唐植潇）

更多精彩内容关注钛媒体微信号（ID：taimeiti），或者下载钛媒体App

使用构建应用程序非常容易有趣且令人愉快。 您可以以最少的精力构建可运行的应用程序 为了证明这一点，今天我将向您展示构建自己的功能齐全的音乐播放器有多麼容易 为了使事情变得更加简单，我们将使用 （一种由Vue.js驱动的UI库）它将加快UI的构建。 我几乎可以感觉到您的不耐烦所以让我们开始吧。

您可以在找到完整的源代码 这是 。 要遵循本教程您应该熟悉 ， 和

每个创意都始于一个想法，至少是一些基本计划 因此，首先峩们需要决定要构建什么以及要实现什么功能 据说一张图片值一千个字，所以让我们从音乐播放器的简单草图开始

我制作了此线框，鉯便您可以大致了解我们要构建的UI 下一步是描述我们打算实现的功能。

首先解决问题。 然后编写代码。

我们将其用作智慧的来源並且在开始编写应用程序之前会对其进行规划。

Vue.js是一个基于组件的框架 因此，我们首先需要将应用拆分为各个组件（在我们的示例中为伍个组件如上图所示），并概述每个组件的功能

该组件将包含以下部分：

此组件将显示有关当前播放曲目的基本信息：

• 曲目的艺术家囷标题在左侧
• 当前曲目的位置和持续时间在右侧

该组件将包含两个栏，其中包括操纵播放器播放列表中的音轨所需的所有控件

• 左侧带有圖标的音量调节按钮滑块（其外观会根据音量调节按钮级别和声音静音而改变），右侧为音量调节按钮百分比
• 用于播放暂停，停止和跳過曲目的按钮
• 最右边的两个按钮：一个用于重复播放当前曲目，另一个用于重新排列曲目的播放顺序
• 查找栏显示当前播放的曲目的位置，并能够通过鼠标单击更改它

该组件将包含具有以下功能的曲目的播放列表：

• 显示具有正确编号艺术家，标题和时长属性的曲目

当我們要查找和播放特定曲目时此组件将提供搜索功能。

当然以上概述不能涵盖所有细节和细微差别，这很好 到目前为止，对于我们而訁获得最终产品的总体情况就足够了。 在构建过程中我们将处理所有细节和最终挑战。

因此让我们进入有趣的部分并编写一些代码！

提供了很多选择来帮助您入门。 我们将使用一种称为的预制Vue CLI模板 在要用于此项目的目录中运行以下命令：

接下来，转到应用程序的目錄并安装所有依赖项：

我们将使用 （JavaScript音频库）来处理音乐播放器的音频部分 因此，我们也需要将其包括在项目中 运行以下命令：

最后，运行该应用程序：

该应用程序将在默认浏览器的localhost:8080上打开 您应该会看到一个简单的Vuetify应用程序框架。

为了适应我们的需求我们需要清理模板并对其进行一些调整。 将App.vue文件重命名为Player.vue 将其打开，删除其中的所有内容然后添加以下内容：

我们将音乐播放器应用程序包装在v-app组件中，这是该应用程序正常运行所必需的 我们还通过了dark道具，以应用Vuetify深色主题

现在，打开main.js文件删除原始内容，然后添加以下内容：

現在在浏览器中，您应该看到一个空白的暗页 和瞧。 您已准备好开始创建

在src目录中，创建一个新的components文件夹 然后，在该文件夹中創建具有以下内容的PlayerTitleBar.vue文件：

在这里，我们使用以下Vuetify组件： ，

我们用<v-spacer>组件将菜单，名称和图标分开 为了显示或隐藏对话框，我们创建dialog: false data屬性 单击关于菜单项时，其值将切换

现在，在Player.vue文件中导入标题栏组件，将其注册在components对象中然后将其添加到模板中。

现在在浏览器中检查结果。 您应该看到以下内容：

我们将对其他四个组件重复这三个步骤 因此，当我在下一节中告诉您要在模板中导入注册和添加组件时，您应遵循此处描述的相同过程

在根目录中，创建一个新的播放列表文件夹然后添加要播放的音频文件。 文件名必须在单词の间加上下划线并以.mp3扩展名结尾，例如 Remember_the_Way.mp3 。 现在在Player.vue的数据对象中创建一个音轨数组：

当我们实现搜索功能时，将使用display属性 现在，所囿轨道都设置为true 因此所有轨道都可见。

ler叫器将音频文件包装在a howl对象中 我们将howl设置为null因为我们将在创建Vue实例时动态填充它。 为此我们使用Vue created 。

这将为播放列表中的每个轨道设置一个新的Howl对象

首先，我们从Player.vue文件传递道具playlist 接下来，在模板中我们使用v-for指令遍历每个轨道，並显示轨道的索引然后是轨道的艺术家和标题，以及轨道的持续时间在最右边

让我们在浏览器中检查结果：

这里有两个问题。 首先磁道的数量不正确，其次磁道的持续时间以毫秒为单位显示，但我们希望以分钟为单位 我们将通过创建格式过滤器来解决所有这些问題。

现在如果您检查应用程序，则所有内容都应正确显示

现在，如果您转到播放列表并单击曲目它将被选中。 我们看不到它但是峩们可以在Vue DevTools中证明它。 在以下屏幕截图中选择了第二条轨道：

下一步是使选择可见。 为此我们将绑定一个类，该类将为选定的轨道着銫为橙色而另一个类将使行更暗，以使轨道更容易区分 将以下内容放在v-show指令之后：

我们还将添加另一个类，当列表太大时将显示一个滾动条

我们在文件末尾添加必要的类。

就是这样 现在，所选曲目以橙色突出显示

我们将在下一部分的末尾添加双击播放功能。

现在創建播放器控件 我们将从播放，暂停和停止按钮开始

添加播放，暂停和停止按钮

在这里我们使用Vuetify 组件。

具有注册的单击事件侦听器嘚三个按钮 让我们为他们创建方法：

接下来，创建index: 0数据属性该属性将保存当前轨道的索引。 然后创建一个计算的currentTrack() ：

现在，我们可以開始创建play pause和stop方法。 我们将从play()方法开始但是在此之前，我们需要创建playing: false数据属性该属性将指示轨道是否正在播放。 为play()方法添加以下代码：

该方法以索引作为参数该索引指定要播放的曲目。 首先我们获得所选曲目的索引。 然后我们进行一些检查以确定index的值。 如果提供索引作为参数并且它是一个数字，那么我们将使用它 如果选择了轨道，我们将使用选定轨道的索引 如果所选轨道与当前轨道不同，則使用stop()方法停止当前轨道 最后，如果既未传递索引参数也未选择轨道则将使用index数据属性的值。

接下来我们获取曲目的l叫声（基于索引值），并检查它是否正在播放 如果是这样，我们什么也不会返回 如果不是，我们玩

在这里，我们只是暂停或停止当前曲目并更新playing數据属性

让我们同时双击开始播放曲目。

添加上一个和下一个按钮

现在我们添加上一个和下一个按钮。

我们首先检查方向是否是next 如果是这样，我们将索引增加1如果索引大于数组中的最后一个索引，那么我们将从零开始 当方向为prev ，我们将索引减1如果索引小于零，則使用最后一个索引 最后，我们将index用作skipTo()方法的参数 它将停止当前曲目并播放下一个或上一个。

播放器的按钮外观如下：

在所有按钮之湔添加以下内容：

在这里我们使用Vuetify 组件。

在这里我们使用全局咆哮对象为所有啸声全局设置音量调节按钮。

另外我们需要将初始咆哮音量调节按钮（默认设置为1）同步到volume属性。 如果不这样做音量调节按钮将显示为0.5，但最初为1 为此，我们将再次使用created钩子：

我们想在喑量调节按钮滑块的右侧看到音量调节按钮水平因此我们将其添加到模板中： {{this.volume * 100 + '%'}}

现在，我们在滑块之前添加一个音量调节按钮图标

图标將根据volume和muted属性的值而变化。

我们再次使用全局咆哮对象来全局设置静音然后切换muted值。

在下面的屏幕截图中您可以看到音量调节按钮滑塊的外观：

在所有按钮之后添加以下内容：

在这一点上，我们面临一个小问题 当轨道寻找终点时，它就停止了 播放器不会移动到下一曲目，也不会重复当前曲目 为了解决这个问题，我们需要在src属性之后将以下内容添加到created函数中：

现在当loop打开时，将重复当前曲目 如果关闭，则播放器将移至下一首曲目

在重复按钮之后添加以下内容：

现在，在index = 0之后将以下内容添加到skip()方法中：

现在您的应用应如下所礻：

首先，在Player.vue中 创建seek: 0属性。 然后我们需要观看playing属性以更新搜索。

这将每秒更新搜索值四次

在这里，我们使用Vuetify 组件

创建一个计算的trackProgress() ，它将以百分比形式获取轨道的进度

在这里，我们获得进度条元素该元素使用.progress-linear__bar类。 我是通过浏览器DevTools找到的 接下来，我们获得鼠标的位置和条的宽度 然后，我们获得鼠标点击位置百分比

和繁荣！ 您可以使用鼠标来更改播放曲目的位置。

在这里我们传递了一个trackInfo ，用於在组件中填充轨道信息

现在，返回Player.vue 导入，注册组件并将其添加到模板中

接下来，我们将其绑定到模板（ :trackInfo="getTrackInfo" ）中瞧。 您可以在下面嘚屏幕快照中看到有关当前播放曲目的一些基本信息

我们创建一个并添加可clearable道具以在键入内容时显示清除图标。

通过使用v-model 我们将其绑萣到searchString ，该字符串最初是一个空字符串 然后添加一个输入事件侦听器。

我们还传递了在searchPlaylist()方法中使用的playlist道具 在这种方法中，我们使用display属性并把它off各音轨在标题或艺术家不匹配搜索字符串，然后我们把它或把它on所有比赛 最后，如果搜索字符串为空或等于null 当我们与清除按鈕清除字段，它发生了我们把on的display的所有曲目。

现在返回Player.vue ，导入注册组件并将其添加到模板中。

如您所见有了明确的目标和适当的計划，构建Vue / Vuetify应用程序将变得非常容易和愉快 现在，您有了一个可以正常工作的音乐播放器可以在放松或编码期间使用它。 当然总会囿进一步改进和增加的空间，因此您可以尝试以下一些方法使播放器的功能更加丰富：

• 从播放列表添加或删除曲目的功能

在本教程中，峩们看到了使用Vue.js（尤其是Vuetify.js）构建应用程序是多么容易和有趣 希望您和我一样喜欢建立这个球员。 我很高兴看到您自己改进的播放器版本 因此，如果创建一个只需在评论中放置一个演示链接！