我的HarmonyOS实战 — 一篇文章讲明白什么是鸿蒙2.0服务卡片

引言不知道大家有没有这样的经历，上个月的时候，自己的华为P40手机，一大早起来，由安卓系统自动更新成鸿蒙系统，神奇啊！于是赶紧动手试了试，担心自己不会玩鸿蒙系统，从而带来操作上的障碍。果然，华为没有让我失望，一顿操作后，发现鸿蒙系统可以安卓系统完美切换，我的担心是多余的。那么，鸿蒙系统都有哪些安卓系统没有的新特性呢？今天，我们就来聊一聊鸿蒙2.0系统的服务卡片功能。正文鸿蒙 HarmonyOS 2

Data-Mining

7676人浏览 · 2021-07-30 08:53:40

Data-Mining · 2021-07-30 08:53:40 发布

引言

不知道大家有没有这样的经历，上个月的时候，自己的华为P40手机，一大早起来，由安卓系统自动更新成鸿蒙系统，神奇啊！于是赶紧动手试了试，担心自己不会玩鸿蒙系统，从而带来操作上的障碍。果然，华为没有让我失望，一顿操作后，发现鸿蒙系统可以安卓系统完美切换，我的担心是多余的。那么，鸿蒙系统都有哪些安卓系统没有的新特性呢？今天，我们就来聊一聊鸿蒙2.0系统的服务卡片功能。

正文

鸿蒙 HarmonyOS 2.0 操作系统有很多新的特性，包括全新智能终端系统、统一控制中心、超级终端、任务流转、鸿蒙智联、文件互通、全新桌面（服务卡片）、性能优化等。本文将围绕全新桌面特性，也就是我们将要介绍的服务卡片功能进行重点介绍。

1. 什么服务卡片？

服务卡片其实就是手机应用程序展示页面内容的一种新形式，可以将应用页面的内容前置到卡片上，以达到服务直达、减少体验层级的目的。服务卡片可以摆放到任何位置，用户可以自定义属于自己的桌面风格。

服务卡片功能有三个特征：易用可见、智能可选和多端可变。易用可见，凸显服务信息的内容外露，减少层级跳转导致的用户体验问题。智能可选，全天可变的数据信息，支持自定义类型的服务卡片设计，用户可以自己设置服务卡片的样式。多端可变，适配多端设备的自适应属性，手机、手环、平板都支持服务卡片属性。

当我们的手机升级为鸿蒙系统之后，你会发现在桌面应用的图标下方多了一条横线，这样应用都可以在桌面上添加对应的卡片，实现服务卡片的展示。

2. 服务卡片如何设置？

鸿蒙2.0操作系统针对部分系统 APP，比如音乐、日历、天气、时钟、运动健康、电子邮件、备忘录、智慧生活、相机、图库、通话以及畅联等，都新增了服务卡片功能。

服务卡片功能的增加，大大的提升了 APP 的使用便利性，很多原本需要打开 APP 才能实现的功能现在可以直接操作服务卡片来实现。设置方式也非常简单，我们只需要在支持服务卡片的 APP 上轻触并上划即可打开。

另外，支持服务卡片功能的APP，在使用3次服务卡片之后，图标下面的指示白条就会自动消失，有华为手机的小伙伴可以试一试呦！

3. 如何取消服务卡片？

设置服务卡片的时候非常简单，同样，取消设置也非常方便。我们可以双指捏合屏幕，按住卡片，右上角有个移除按钮，点击移除，我们就可以取消服务卡片了。

其实，鸿蒙操作系统的服务卡片功能还是非常不错，不建议取消设置呦，哈哈！

4. 服务卡片的设计探索

作为 HarmonyOS 生态设备之间统一交互的载体和语言，服务卡片到哪里，服务就到哪里！服务卡片让应用打破硬件的约束，在所有设备中流转起来，让所有体验所有形式都保持一致。不仅在手机上，在手环、平板上都能有一致的体验。

4.1 创造性的上滑操作

上滑，作为创新的操作行为，如何定位这种行为，HarmonyOS开发者们进行了广泛的调研和探索。通过“人因研究”进行分析发现，滑动手势的轨迹有三个关键指标：滑动的角度、滑动的速度（快/慢）、滑动的距离，这三个指标对一次滑动有一个比较完整的定义，能清晰的识别出来这次滑动是怎样的滑动，能够更好的识别用户的手势意图。

大家可以看到，就是在桌面的 APP 上做一个上滑的操作进而展开万能卡片，这个动作看似非常简单，但是这背后的研发过程遇到了很多的问题。最终，通过数据分析，HarmonyOS开发者们找到了用户手指容易触发的区域和困难触发的区域，针对不同的区域，设置不同的触发动作规则，从而让用户在体验服务卡片的时候更加流畅。

4.2 服务卡片的视觉展示

通过上面的介绍，我们可以知道，服务卡片的展示是通过新开一个桌面嵌套窗口，其尺寸大小是有一定限制的。那么就产生了一个问题，服务卡片所呈现的视觉效果，就需要考量一下。在视觉设计方面，华为为HarmonyOS特别设计了一套专属的字体 HarmonyOS Sans，这个过程大概花了一年的时间，新字体通俗易懂且特立独行。

在字体设计过程中，设计师们加入了一些华为自己的独特性。比如在笔画上，他们保留了一定的撇捺弯钩的楷书美感，比较明显的是长的曲线、弧线的笔画，进行了曲线优美的调整。

5. 服务卡片提交流程

我们开发一个服务卡片并发布到鸿蒙系统上，大概需要五个步骤。这五个步骤分别是设计、开发、配置、测试、发布。其中，开发阶段需要完成设计服务功能和体验、设计交互模型、设计账号绑定、设计内容数据绑定、设计卡片UX，开发阶段需要完成开发实现接口、开发事件推送接口、开发账号绑定、开发内容数据同步、使用IDE开发卡片，配置阶段就是创建并配置快服务，测试阶段是完成模拟测试，发布阶段是完成服务发布工作。

下面是一个内容说明表格：

阶段	任务	任务描述	示例	指导文档
设计	设计服务功能和体验	提供给用户的功能	订酒店服务。用户可以通过负一屏看到服务卡片，点击卡片进入酒店预订页，进行预订，并在入住、离店过程中收到卡片提醒，可以点击卡片进入详情页。目标跳转的APP、快应用或H5需要至少具备一个。	快服务智慧平台简介快服务功能和性能规范
	设计服务功能和体验	卡片数量、每张卡片的内容与跳转逻辑（可跳转APP、快应用或H5）。使用的快应用引擎版本。注意：1、关于图标呈现和卡片呈现的快服务的跳转设置：a. 进入快服务：包括从图标/卡片进入，不得出现拦截或过渡页面（包括开屏广告、首页等），必须直达快服务页面。b. 返回快服务：从快服务落地页使用系统回退键需一次返回快服务的图标/卡片，不得出现多次返回，及其他页面过渡或拦截。 2、快应用引擎如选择较高版本以支撑更丰富的功能，则部分低版本终端将无法使用	订酒店快服务共有引导、预订、入住、离店、评论5个状态卡片。引导卡片是在用户订阅服务后但未进行帐号绑定时引导用户绑定帐号的卡片。用户绑定后引导卡片消失，预定卡片出现。预订卡片不显示具体酒店信息，入住、离店和评论卡片中显示具体的酒店信息和订单日期，并配有一张酒店照片。点击预订卡片跳转至APP的预订页面，点击入住、离店卡片跳转详情页，点击评论卡片跳转评论页。	快服务智慧平台简介快服务功能和性能规范
	设计交互模型	明确服务的触发方式，由事件意图还是用户意图触发	设计两种触发方式。订酒店服务由用户意图触发（用户语音输入“我要订酒店”，出现订酒店卡片），进行预订。用户预订酒店后，入住、离店等状态卡片由相应事件触发，例如在入住日前24小时起，入住卡片显示	卡片类快服务交互模型设计
	设计帐号绑定	明确是否需要做帐号绑定并且选定绑定场景	要做，做“华为授权开发者”场景的帐号绑定。绑定后，可以推送入住、离店等事件信息给用户	卡片类帐号绑定设计
	设计卡片UX	设计卡片样式并与华为达成一致	根据华为提供的卡片模板和规范设计卡片样式	卡片UX设计规范
开发	开发卡片	根据设计使用华为IDE开发卡片。注意：卡片应满足UX设计规范要求，建议使用华为IDE提供的组件拖拽功能进行卡片开发	使用华为IDE工具，参考给出的模板代码，开发引导、预订、入住、离店、评论5个卡片，并将5个卡片打包在一个RPK包内	卡片框架说明卡片开发流程卡片栅格化开发指导卡片跳转开发指导服务引导卡片开发指导
	开发帐号绑定接口	开发5个接口：同步帐号授权/解除授权信息接口、应用级AccessToken获取接口、用户帐号绑定/解绑通知接口	参考指导文档，开发“华为授权开发者”场景的5个帐号绑定接口，并在服务器中记录华为用户帐号和酒店服务帐号的绑定关系	卡片类帐号绑定
	开发事件推送接口	开发事件通知接口，将用户的服务动态以事件的形式发送给华为快服务智慧平台	参考指导文档开发事件通知接口，在用户预订酒店后、入住前、离店前、离店后，推送不同的事件信息给华为快服务智慧平台	事件推送
配置	创建并配置快服务	在华为开发者联盟管理中心创建快服务，配置交互模型、服务跳转信息、帐号授权、服务信息。	参考指导文档，在华为开发者联盟网站创建名字为“订酒店”的卡片类快服务并配置相关信息	卡片类快服务配置指导
测试	模拟测试	使用“快服务助手”工具测试卡片UI与功能、帐号绑定、事件推送	参考指导文档，使用工具测试订酒店卡片、酒店信息推送功能等，输出测试报告	卡片类快服务服务测试
发布	提交快服务	在华为开发者联盟管理中心将快服务提交上架	参考指导文档，在开发者联盟网站上架“订酒店”快服务	卡片类快服务发布

6. 服务卡片的框架说明

6.1 文件组织

开发者开发服务卡片，处理卡片的数据处理和显示逻辑时，卡片可以是快应用程序的一部分，也可以单独存在。一个卡片类快服务中可以包含多张卡片，每个卡片仅且只能对应一个页面（page）。卡片的定义通过manifest.json中的widgets字段定义，其中，widgets字段说明如下表所示：

属性	类型	必填	描述
name	String	是	卡片的名称
id	String	是	卡片的唯一标识，英文或数字组成的字符串，在快应用包内唯一，长度不允许超过255。
path	String	是	卡片对应的页面路径，与router.page中的path字段进行对应，每张卡片仅且只能对应一个页面。
component	String	是	卡片对应的页面名称。
targetManufactorys	Array	是	由于各厂商的UI风格有不同的要求，应用开发商可能会针对不同的厂商提供不同的卡片，因此需要一个字段明确说明卡片所适用的厂商范围，防止不必要的审核及驳回流程示例：[“xx”, “yy”]，xx, yy代表厂商的小写品牌英文名称。
desc	String	否	卡片的详细描述，包括功能描述、如何填写入参信息等。
params	Array	否	卡片运行需要传入的参数信息，运营人员或自动化测试工具可以运行卡片或进行功能性验证，详细描述如表“params说明”所示。
minPlatformVersion	Integer	否	支撑的最小平台版本号，不提供则同rpk的版本号。

6.2 卡片能力说明

一个卡片是一段嵌入在其他应用中可执行、渲染的页面脚本，因此必须能够独立渲染和运行；卡片具有的能力是快应用页面能力的子集，按照负面清单的方式对卡片能力进行约束。

卡片开发整体原则如下：

1）不能使用app.ux中定义的公共能力组件，也不能引用本地图片资源文件，确保卡片编译后生成的的jsbundle文件能够独立渲染。

2）快应用的主体程序不能路由到卡片对应的页面，但在卡片的页面中获取外部输入参数的方式与普通页面保持一致，通过this.paramName即可获取对应的参数值，其中paramName为外部传入的参数名。

3）卡片涉及的权限通过预授权（例如在添加卡片时明确告知用户）的方式授予，卡片运行过程中调用权限相关的接口（例如获取位置信息）时，均会默认授予相关权限而不会动态弹授权框。

4）在某些极端场景下，可能会出现用户使用的卡片是由快应用的版本1提供，但从卡片跳转到快应用的页面路径时快应用的版本已经是版本2，需要确保快应用对老版本（至少兼容一个版本）卡片跳转路径的兼容。

5）卡片不允许使用global对象进行数据的存储，global可以被其他卡片访问到，使用不当会存在安全隐患。

6）卡片在需要跳转到快应用或APK时统一通过router.push进行跳转，不支持的schema：internal://，同时也不支持基于filter模式下的快应用跳转。

7. 服务卡片开发体验

7.1 服务卡片开发说明

卡片的开发和快应用使用同样的IDE，开发语法也完全一致，只是对卡片中能够使用的资源、控件、接口等有一些限制：

1）资源：不能使用app.ux中定义的公共能力组件，也不能引用本地图片资源文件，确保卡片对应的jsbundle文件能够独立渲染。

2）华为快服务组件库：控件、接口、IDE下载。

3）快应用开发规范。

4）卡片文件的扩展名为ux，文件也是由template模板、style样式和script脚本三个部分组成。

7.2 服务卡片开发步骤

步骤一、注册华为开发者账号并启动IDE

可以使用华为手机，点击系统设置，然后进入华为账号，使用扫一扫登陆开发者账号，过程中还需要提供身份信息才能完成注册。

步骤二、选择服务卡片模版工程并创建

步骤三、填写项目名称，包名，工程路径以及API版本

当然在设置过程中，我们也可以使用默认值，但是不推荐，因为这样操作，当存在多个工程时，很容易混淆。

步骤四、进入工程，查看卡片工程文件组织

具体可以参考如下：

|—— .quickapp 配置文件目录
| |—— launch.json 配置文件
|—— src项目源文件
| |—— common 公用的资源文件和组件文件
| |—— component 卡片引用的组件分包，拖拽的组件也会添加到这个目录
| |—— css 公共样式目录
| |—— basic.scss 华为卡片基础样式库
| |—— i18n 国际化目录
| |—— empty 卡片页面目录
| |—— empty.ux 页面文件，文件名不必与父文件夹相同
| |—— app.ux APP文件（编译自动修改，请勿改动）
| |—— manifest.json 项目配置文件（如：应用描述、接口申明、页面路由等）

步骤五、选择新建卡片入口

1）在左侧资源管理器中，在src文件夹上右键选择“新建卡片”。

2）在菜单栏“文件”下选择“新建卡片”。

3）点击资源管理器旁边的+图标按钮，选择“新建卡片”。

步骤六、选择卡片类型，填写相关信息

在下面填写卡片名称、ID、路径等参数，选择卡片模版。

点击“高级选项”可选填其中参数。填写完毕后点击“确定”。

步骤七、组件拖拽

1）光标聚焦在需要编辑的文件或标签处。

2）在组件面板中的自动搜索结果中，选择组件并拖拽到需要编辑的位置。

3）出现提示可编辑提示信息时，释放拖拽动作，被拖拽组件即可编辑到当前文件中，模拟预览即时刷新。

步骤八、添加卡片参数

1）点击工具栏的运行下拉选项框的 “配置” 选项，打开配置窗口。

2）点击工程，设置签名；点击卡片，设置宽度及点击卡片名称右侧的进行配置参数。

3）添加卡片参数，完成后保存。

步骤九、编辑卡片参数

1）点击上方菜单栏下拉选项“配置”，进入卡片列表页面。

2）进入卡片列表，选择对应卡片。点击工程，修改签名；点击卡片，修改宽度及参数，点击参数列表中参数右侧进行配置参数。

3）修改卡片参数，完成后保存。

步骤十、卡片实时预览

只有当前打开的工程里有卡片页面时，无设备预览才会启动。预览区默认使用模拟预览，支持即时预览、切换主题、调节字体和显示大小；可在预览下拉框中切换到其他可用设备预览，及相应的gif动图。也可以通过连接本地真机，预览区自动切换到真机。

运行实例：

结尾

鸿蒙 HarmonyOS 2.0 操作系统的众多新特性中，服务卡片应该是非常亮眼的功能，给用户带来的体验也更加直接，因为服务卡片是直接和用户打交道的。服务卡片功能的增加，大大的提升了 APP 的使用便利性，很多原本需要打开 APP 才能实现的功能现在可以直接操作服务卡片来实现。最后，期待鸿蒙 HarmonyOS 操作系统未来给国人带来更多更好的新功能。

【本文正在参与“有奖征文 | HarmonyOS征文大赛”活动】，本活动页面链接：CSDN