HarmonyOS 实战——认识服务卡片及运行第一个服务卡片

本文旨在对 HarmonyOS 新推出的服务卡片进行学习，理解其概念，以及熟悉工具 HUAWEI DevEco Studio。如，如何新建项目、如何新建卡片服务，如何运行项目和卡片服务，以及模拟器上卡片服务的显示效果。

关于 HarmonyOS 2 中的卡片设计，其实可以从它们推出的概念/广告视频中可以了解一二：

【HarmonyOS 2】万能卡片

原子化服务的理解

这里就基于宣传视频和官方文档，分析一下原子化服务的优势。

用户角度

从用户的角度上来说，以卡片为显示形式的原子化服务的优势有：

多端可用

视频中明确指出了手表、手机、平板均可使用同一个卡片服务，开发者文档中也明确表明，现在支持的设备包括手机、平板、智能穿戴和智慧屏均可使用。而按照华为生态圈的发展，未来也必然能够推送到智慧屏、智慧家居等设备上。
免安装使用

我感觉免安装「免安装」类似于现在使用非常广泛的「小程序」，同样不需要下载就可以安装。
直接布置在手机页面上

这就是卡片与「小程序」不同的地方了，「小程序」依托的主体是程序，如果关闭了程序就无法使用「小程序」。但是卡片依托的主体 HarmonyOS，所以卡片可以单独的作为一个服务布置在首页上，就像视频中显示的这样：

这个备忘录就是一个卡片，这就是一种卡片布局，可以直接将其布置在桌面上。对简单功能的实现，如要显示待办事项以及增添待办事项，也会方便不少，直接点击卡片服务可以直接打开服务，进行更加复杂的业务操作。
自由分享

在同样都是华为设备之间分享卡片也很简单，如图：

这样的话，HarmonyOS 之间的分享可以做到不借助第三方应用进行分享，省去了应用间跳转的麻烦。

分享的功能是通过 HarmonyOS 设备的 NFC 实现的，这样两台同样都是 HarmonyOS 的设备可以通过「碰一碰」这个功能，识别手机正在运行的原子化服务，从而进行分享。
更多应用场景

这就是前面特性的结合了，多端+免安装+自由分享，构建了物联网的应用场景——万物皆可连：

我的理解是，卡片的实现是由智能家居实现的，而通过手机可以获得由智能家居分享得卡片，从而在卡片上完成简单的功能应用。这样能够免去很多的下载，减少对于手机内存的负荷。

站在用户的角度来说，我是很期待鸿蒙的整个生态圈的构建的，毕竟随着 5G 基建的渐渐普及，物联网的前景确实是挺可观的。

开发角度

作为开发的角度，其实实现原子化服务也有一些优势和挑战。

实现更加简单

比起一整套服务的应用来说，专注于一个功能的卡片显然实现起来会更加简单。对于初级、中级开发来说，是一个非常友好的事情。
适配

多端适配始终是最烦恼的事情。这一点卡片的实现简单一些，但是又没这么简单。

卡片的尺寸是固定的，目前包含四种：1 $\times$ 2, 2 $\times$ 2, 2 $\times$ 4, 4 $\times$ 4，从卡片尺寸上来说，要适配的尺寸还是比较少的。

但是，除了卡片尺寸之外，卡片还提供了多个模板去快速构建服务卡片。目前提供的模板有 16 个，具体可以在开发服务卡片看到。从这种角度来说，卡片具体实现的复杂度也不小。

最后，每个 FA 最多可以配置 16 张服务卡片，这对于服务卡片的设计也会产生一定的复杂度。同样，服务卡片的交互模型和 UX 设计也是说难不难，说简单又挺扣细节的内容，这点官方也提供了一些设计概念去遵从：卡片类快服务交互模型设计和卡片 UX 设计规范。

目前支持的设备只有手机、平板、智能穿戴和智慧屏，但是未来针对其他的设备，如眼镜、车机等也会进行功能支持时，卡片的适配是否又会成为新的难题？
语言使用

目前来说，服务卡片的开发可以使用两种主流语言，Java 和 JavaScript。官方指导的说法是，Java 卡片适合作为一个直达入口，没有复杂的页面和事件，而 JavaScript 卡片适合有复杂界面的卡片。

更具体的细节，包括支持的功能在卡片开发说明中有所描述。

虽然说卡片的开发可以使用 Java 或 JavaScript 进行编写，但是本质上整个服务还是通过 Java 去实现的。做了两年的纯前端开发，其实第一时间看教程稍微有点懵逼——现在前端和后端之间的隔阂比较大，当文档说卡片可以用 JavaScript 进行编写的时候，我以为是纯 JavaScript，导致卡顿了很久……

在目前大前端更多的侧重于纯 JavaScript 开发的情况下，前端开发想要直接上手原子化服务开发，比起后端来说挑战显然会更大一些。就不是很确定之后会像现在做前后端分离的开发呢，还是要求开发者向全栈进发。
原子化服务的设计

原子化服务本身代表着单一的某个功能，那么如何结合多个原子化服务的设定同样也会具有一定的挑战性。

例如说淘宝和天猫，双方都有购物车功能，双方都是阿里巴巴旗下的，那么之后淘宝和天猫会不会合并购物车这个功能？如果不合并的话，又要怎么设计才能够让淘宝的购物车有别于天猫的购物车？

对业务的设计也挺有挑战性的。
分布式开发

这是来自教程中原子化服务流转中的一张图：

比起纯粹的投屏，并且遭受延迟度的折磨，如果能够享受来自系统和应用本身的「流转」功能，免受通过第三方应用带来的延迟就是再好不过的事情了。

同样，我觉得这种设计也挺适合玩桌游的……毕竟线下聚会很有趣，但是拆东西布局或是收拾东西，还是要花时间，并且有的时候觉得非常的麻烦。

除此之外，例如说游戏王这种游戏，要使用店家提供的卡片也不现实，毕竟卡组肯定是要自己组的。如果能够结合线上版——游戏王 Duel Links 已经出了很久了——加上线下版的联动，那么找几个基友吃吃喝喝玩玩组个局也挺好的。

这样的话，对于应用本身和卡片的设计也会变得更复杂，自然，实现起来的复杂度也同样会增加。

工具配置

工具使用的是 HUAWEI DevEco Studio，页面其实还挺熟悉的，是基于 Intellij IDEA Community 开源版本实现的 IDE。所以如果有使用过 Intellij 家族工具的开发，对这个页面应该是太熟悉了。

安装 Java

我的电脑上本来就适配了 Java，用的是 Java11，也能够运行 HUAWEI DevEco Studio。在 HUAWEI DevEco Studio 使用 java --version 输出的版本是 11，所以我觉得 Java 的版本应该不会造成决定性的差异。

Java 的安装可以到 https://www.java.com/download/ie_manual.jsp 去下载安装器去安装，默认下载的依旧是 version8。从 2019 年 4 月 16 号开始，个人开发使用 Java 依旧是免费的，但是其他的就不好说了，如果是企业使用 Java 一定要注意这一点。

下载和安装 HUAWEI DevEco Studio

下载地址在这里：https://developer.harmonyos.com/cn/develop/deveco-studio#download，目前的稳定版本是 DevEco Studio 2.1 Release，支持 Windows 和 Mac。

下载后直接就是的文件通过解压后，就能获得 deveco-studio-xxxx.exe 的安装向导后，跟着配置走就行了，基本上就是点下一步、下一步、下一步这种操作。

需要注意的是，SDK 的安装是需要联网的，

创建以及运行工程

这里的参考文档是：创建一个新的工程，开发服务卡片和使用模拟器运行应用。

创建工程

创建一个新的项目

第一次安装成功的可以通过欢迎页面去创建，或是通过 File -> New -> New Project... 去创建。
这里会选择 JavaScript 做开发语言
填写相关信息

注意，如果没有安装 SDK4 的话——最新的 SKD 版本是 5，默认会安装最新的 SKD，需要通过 Tools -> SDK Manager 去下载 SDK4：
项目完成后，DevEco Studio 会自动进行打包，完成后即可进行下一步

创建卡片服务

创建新的卡片模板

有两种方式：
- 选择模块（如 entry 模块）下的任意文件，点击菜单栏 File > New > Service Widget 创建服务卡片
- 选择模块（如 entry 模块）下的任意文件，单机右键选择 New > Service Widget 创建服务卡片。
选择卡片模板
配置服务信息

这里只是测试用，所以所有的信息都会使用默认的信息
点击 Finish 完成卡片服务的创建

运行工程

直接点击运行会碰到下面这个报错：

HarmonyOS Launch: The Huawei Lite Simulator supports only Lite projects.

原因就是到目前为止，HUAWEI DevEco Studio 还没有开启本机运行的支持。想要运行卡片服务，现在只能使用模拟器(目前只能一个小时一个小时的运行) 运行应用。根据教程，步骤是这样的：

点击 Tools > Device Manager
选择登录
如果没有实名认证的话，需要先进行实名认证，否则无法使用远程的设备

支持的认证方式有两种：
- 个人银行卡实名认证(3 分钟)
- 人工认证(1-2 个工作日)
认证完了重新登录，就能看到虚拟设备了

选择 Phone 下面的设备打开即可
选择使用 Debug 模式运行程序

这点非常重要，如果选择 Run 去运行的话会跑不起来，初步推测是因为没有 HAP 的认证，没有证书导致的。

选择 Debug 模式就能够开启项目了：

到这个步骤为止，因为还没有实现卡片服务，所以桌面上并不会显示刚刚创建的空白页面。所以下一步就是拉取已有的项目，进行学习分析。这里用的案例是官方实现的 JsFACard，下载地址在：https://gitee.com/openharmony/app_samples/tree/master/UI/JsFACard。

鉴于整个项目包含多个 HarmonyOS 的项目，直接在 IDE 中导入会出现报错：

only-harmonyos