鸿蒙卡片开发超细致总结！

太过爱你忘了你带给我的痛 2022-10-12 05:28 244阅读 0赞

来源:鸿蒙技术社区

链接：https://mp.weixin.qq.com/s/dAZvJxqJ3BqBfVwvaGlcdA

很多朋友都把自己的手机升级为了鸿蒙系统。如果你手头有两部或两部以上鸿蒙系统的手机，就可以尽情地体验鸿蒙的分布式能力了。

![0eff6c417867e9a878898f463f9ff194.png][]

如果你手头只有一部鸿蒙系统的手机，不知道你有没有感知到：与升级前相比，在用户体验上有哪些变化呢？

细心体验就会发现，最大的变化非“卡片”莫属了！卡片的功能非常强大，用户无需打开应用，就可以从卡片中获取应用相关的动态信息，而且还可以与卡片进行交互。

最重要的是，在未来，卡片很可能会成为一个巨大的流量入口，从而成为第三方应用厮杀的阵地！

为了帮助大家更好地学习，我详细总结了鸿蒙卡片开发的核心技术精要，包括以下几部分：

*  什么是卡片
 *  卡片的数量和尺寸
 *  卡片与原子化服务
 *  卡片的整体框架
 *  使用 JS 开发卡片
 *  使用 Java 开发卡片
 *  开发卡片到底该使用 JS 还是使用 Java

**什么是卡片**

手机升级为鸿蒙系统之后，在某些应用的图标下方显示了一条横线，如下图所示：

![fb60afeb2de717a20adf9446ce2bd1bb.png][]

凡是图标下方显示一条横线的应用，都可以在桌面上添加对应的卡片。

以“新浪新闻”这个应用为例，用手指按下图标的同时往上滑，就会弹出该应用的默认卡片，如下图所示：

![15e8478a4b04dd2f83f09d2a311e6028.png][]

点击卡片右上角的图钉，就将卡片固定在了桌面上，如下图所示：

![fc469fcac8e238b7aff0be389f66d303.png][]

卡片中的新闻会动态刷新。这样，用户无需打开应用，就可以从卡片中获取应用相关的动态信息。

点击卡片中的某一条新闻，就跳转到了应用的相关页面，如下图所示：

![f9d800047381d6375d81647942112d99.png][]

这个卡片设计得不是很好，最好是点击卡片中的某一条新闻，能跳转到应用内该条新闻对应的详情页面。

再以“音乐”这个应用为例，用手指按下图标的同时往上滑，就会弹出该应用的默认卡片，点击卡片右上角的图钉，就将卡片固定在了桌面上，如下图所示：

![7e50f45b31f13d12465ac23d29c4446e.png][]

点击卡片中的按钮，可以开始播放音乐和暂停播放音乐。这样，通过与卡片进行交互，用户无需打开应用，就可以实现应用内的部分操作。

通过这两个例子，我们看到：卡片是应用内页面的展现形式，将页面的重要信息或者操作前置到卡片上，以达到服务直达、减少体验层级的目的。

**卡片的数量和尺寸**

我们已经知道了：卡片是应用内页面的展现形式，也就是应用内 Page Ability 的展现形式。

一个应用内包含 1~N 个 Page Ability，我们可以在 config.json 中为每个 Page Ability 配置 0~16 个卡片。

而配置的每个卡片可以有 1~4 个尺寸，因此，每个 Page Ability 对应的卡片数是 0~64。

如何查看一个应用的所有卡片呢？以“日历”这个应用为例，在桌面上长按其图标，在弹出的菜单中点击”服务卡片”，就显示出了日历这个应用的所有卡片，如下图所示：

![778d68de5d0ded339316fbd490975398.png][]

可以通过上下滑动在卡片之间进行切换。在所有卡片中，只有一个卡片下方的按钮显示为”已设为上滑卡片”，其它卡片下方的按钮都显示为“设为上滑卡片”。

当某个卡片被设为上滑卡片之后，在桌面上用手指按下应用图标的同时往上滑，弹出的默认卡片就是该上滑卡片。

比如将最后一个月视图的卡片设为上滑卡片，如下图所示：

![1c531316ab649faf09561ef8cd4d7002.png][]

点击下方的按钮“设为上滑卡片”，该卡片就会等待用户将其钉在桌面上，先点击桌面的空白处将其取消，然后用手指按下应用图标的同时往上滑，弹出的默认卡片就是月视图的卡片了。

再次查看“日历”这个应用的所有卡片。对于任意一个卡片，都可以点击下方的按钮“添加到桌面”，将其添加到桌面上。

对于同一个卡片，用户可以在桌面上重复添加多个实例，如下图所示：

![263093cbea58bb0c1b651e7e4b9b974e.png][]

长按桌面上的某个卡片实例，在弹出的菜单中可以移除该卡片，也可以查看其对应应用的所有卡片。

此外，用手指按下应用图标的同时往上滑，然后长按弹出的默认卡片，也可以查看其对应应用的所有卡片。

无论一个应用有多少个卡片，卡片只有 4 种尺寸，分别是：

*  1×2 的微尺寸  
    
 *  2×2 的小尺寸  
    
 *  2×4 的中尺寸  
    
 *  4×4 的大尺寸

以“相机”这个应用为例，如下图所示：

![7f77bbf13967e1945d8712203602319f.png][]

对于 1×2 的微尺寸，会占据 1 行 2 列；对于 2×2 的小尺寸，会占据 2 行 2 列；对于 2×4 的中尺寸，会占据 2 行 4 列。

同理，对于 4×4 的大尺寸，会占据 4 行 4 列。任何一个卡片的尺寸都属于这 4 种尺寸中的其中一种。

**卡片与原子化服务**

与传统的需要安装的应用相比，原子化服务是应用的另外一种形态，他是可以提供特定功能的、免安装的、有独立入口的应用形态。

这里有一个非常重要的关键词：免安装。原子化服务是鸿蒙系统提供的一种面向未来的服务提供方式，他非常非常的重要，希望大家引起足够的重视。

给大家举个例子就明白什么是原子化服务了，如下图所示：

![8c1a441a339c4dbfced6b929e27b99b0.png][]

对于某个传统方式的、需要安装的“购物应用 T”，在按照原子化服务理念调整设计后，可以将“商品浏览”独立拆分为一个原子化服务 A，将“购物车”独立拆分为一个原子化服务 B，将“支付”独立拆分为一个原子化服务 C，每个原子化服务都提供了特定的功能，而且是免安装的。

用户在用到某个原子化服务时，再按需进行安装，系统程序框架会在后台自动地从原子化服务平台进行下载和安装，而无需用户显式地手动安装。

1 个原子化服务完成 1 个特定的便捷服务。原子化服务由 1 个或多个 HAP 包组成，1 个 HAP 包对应 1 个 FA 或 1 个 PA。

每个 FA 或 PA 均可独立运行，完成 1 个特定功能。原子化服务的大小不能超过 10MB。

原子化服务在桌面上是没有图标的，用户可以通过“服务中心”对原子化服务进行统一地查看、搜索和管理。

从屏幕左下角或右下角向斜上方滑动，即可进入“服务中心”，如下图所示：

![a598598392acc9159186aa14d6258fff.png][]

在“我的服务”板块，展示了常用的服务；在“发现”板块，提供了全量的服务供用户进行管理和使用。

原子化服务在“服务中心”的显示形式为卡片，可以将其添加到桌面。这就是卡片与原子化服务的关系。

打开 DevEco Studio，创建一个 HarmonyOS 的工程，然后选择模板 Empty Ability（JS）或 Empty Ability（Java），点击按钮 Next，进入到工程配置界面，如下图所示：

![9ad2704bbd46060b23c34636a39692f7.png][]

其中，工程类型有两种：一种是“Service”，也就是原子化服务；另一种是“Application”，也就是传统的应用。

此外，还可以选择“是否在服务中心进行展示”。我们将工程类型指定为“原子化服务”，并且选择“在服务中心进行展示”。按照上图进行配置之后，点击按钮 Finish 以创建一个工程。

接下来，把鸿蒙手机连接到电脑上，对工程的主模块 entry 自动签名，如下图所示：

![a1e8f39686d7624218b62be89c7739e0.png][]

签名之后，将工程运行到鸿蒙手机上，显示出了主界面。由于该工程的类型是“原子化服务”，所以在桌面上并没有相应的图标。

由于在创建工程时选择了“在服务中心进行展示”，因此，打开服务中心，就看到了相应的入口卡片，如下图所示：

![f3405cc6c735c9ebb6d0e92991eee237.png][]

长按卡片，可以进入相应的服务，如下图所示：

![06a6db8da07ffba9d5e0e065d05d00d0.png][]

点击卡片，可以将其“添加到我的服务”或”添加到桌面”，如下图所示：

![b0628feaa0c257efdaaa8e5831988d32.png][]

好，这样，就给大家讲清楚了卡片、原子化服务和服务中心的关系。

**卡片的整体框架**

华为官方给出了一张卡片的整体框架图，如下图所示：

![67fbd82f09bc9f79abfbb96bf48f7212.png][]

可能很多朋友看到这张图就直接晕菜了。我们将其简化一下，如下图所示：

![75f113522521113759c0f48b0d4d189c.png][]

图的最左边是卡片提供方，要么是传统应用，要么是原子化服务。之所以将两者称之为卡片提供方，是因为传统应用或原子化服务中的 Page Ability 为卡片提供了表现素材，卡片是 Page Ability 的表现形式。

在传统应用或原子化服务中定义了卡片的生命周期回调方法。图的最右边是卡片使用方，要么是桌面，要么是服务中心。

之所以将两者称之为卡片使用方，是因为用户通过桌面或服务中心来使用卡片。图的中间是卡片管理服务，他是卡片的大管家，是卡片提供方和卡片使用方的中介和桥梁。

![0dc84722e2cc6d1c545b2da9adf76d5a.png][]

以卡片的定时或定点刷新为例，如果一个卡片在 config.json 中配置了定时或定点刷新，具体的流程如上图所示：

*  timer 事件会通知卡片管理服务
 *  卡片管理服务会去卡片提供方的对象管理模块中找到对应的卡片提供方
 *  卡片提供方回调卡片的生命周期刷新方法
 *  卡片提供方将刷新数据返回给卡片管理服务
 *  卡片管理服务根据卡片名称查找卡片使用方
 *  卡片管理服务刷新卡片使用方的卡片

好，了解了卡片的整体框架之后，接下来，我们就正式进入到实操部分。我会首先给大家介绍如何使用 JS 开发卡片，然后再来介绍如何使用 Java 开发卡片。

**使用 JS 开发卡片**

**①使用模板创建卡片**

打开 DevEco Studio，创建一个 HarmonyOS 的工程，然后选择模板 Empty Ability（JS），点击按钮 Next，进入到工程配置界面，如下图所示：

![ae69c17b00d80f4f4a6e13c479cad57d.png][]

其中，将工程类型指定为传统应用，并且不选择“在服务中心进行展示”。按照上图进行配置之后，点击按钮 Finish 以创建一个工程。

如何在一个传统应用的工程中创建卡片呢？在目录 entry 上点击右键，在弹出的菜单中选择 New，然后在弹出的子菜单中点击 Service Widget，如下图所示：

![5c479924a0666b8e5a5c4890fd7a9cb4.png][]

这里的 Service Widget 指的就是卡片。在模板选择界面，选择基本的模板 Grid Pattern，点击按钮 Next，进入到卡片配置界面，如下图所示：

![6feaf6a8308cc87b720f9e3407b0f591.png][]

首先配置卡片的名称和描述；然后配置卡片关联的 Page Ability；然后配置卡片的编程语言类型是 JS；接下来配置卡片的 JS 组件名称。

最后配置卡片支持的规格，其中，2\*2 的小尺寸是必须要支持的，我们再勾选一个 1\*2 的微尺寸。点击按钮 Finish 以创建一个卡片。

重复刚才的操作，在工程中再创建一个卡片，卡片配置界面如下图所示：

![14aa2c5e453164b0a04acaecff1d6e60.png][]

其中，卡片支持的规格，除了默认的 2\*2 小尺寸之外，再勾选一下 2\*4 的中尺寸和 4\*4 的大尺寸。

这样，DevEco Studio 就自动帮我们生成了一些目录和文件。先打开 js 子目录，如下图所示：

![77c264f925e2587be22b844ab3397cd0.png][]

其中，main\_widget1 和 main\_widget2 是创建卡片时配置的 JS 组件名称；index.hml 中定义了卡片中包含哪些 UI 组件。

index.css 中定义了卡片中的 UI 组件都长什么样；index.json 中定义了卡片中动态绑定的数据，此外，还可以定义 click 触发的事件，稍候会给大家详细介绍。

再打开 Java 子目录，如下图所示：

![4e2ed29b3c86d3ac858c54198166f3a7.png][]

其中，MainWidget1 和 MainWidget2 是创建卡片时配置的卡片名称；在 MainAbility 中添加了卡片的生命周期回调方法，如：onCreateForm()、onUpdateForm()、onTriggerFormEvent() 等。

此外，还添加了 FormControllerManager、FormController、以及两个以 Impl 结尾的实现类，这 4 个文件到底有什么用呢？稍候给大家介绍。

最后，打开 config.json 看一下，里面自动添加了很多配置，如下图所示：

![2964562941c6382f9ed37e29e20560a2.png][]

MainAbility 添加了标签“forms”，这里的 form 就是卡片的意思，和 Service Widget 是一回事儿。

“forms”是一个数组，包含两个元素，分别表示我们创建的两个卡片。

顺便提一下，在前面我们有讲到：“可以在 config.json 中为每个 Page Ability 配置 0~16 个卡片”，也就是说，数组“forms”中最多可以包含 16 个元素。

上图的最下方还添加了一个标签“js”，“js”也是一个数组，包含三个元素，其中后两个元素就是两个卡片对应的 js 组件。

“name”分别是“main\_widget1”和“main\_widget2”，这两个值就对应着上面的标签“forms”中“jsComponentName”的两个值。

也就是说，上面的标签“forms”中卡片的 js 组件，是在下面的标签“js”中定义的。

我们再来看一下上面的标签“forms”中卡片的配置：

*  “isDefault”表示该卡片是否为默认的上滑卡片，也就是用手指按下应用图标的同时往上滑时弹出的卡片。
 *  “scheduledUpdateTime”表示卡片定点刷新的时刻，采用 24 小时制，精确到分钟。
 *  “defaultDimension“表示卡片的默认尺寸规格，取值必须在下面的“supportDimensions“所配置的列表中。
 *  “colorMode“表示卡片的主题样式，默认值是“auto”，表示自适应，还可以取值为“dark”或“light”，分别表示深色主题和浅色主题。
 *  “supportDimensions”表示卡片支持的尺寸规格，也就是我们在创建卡片时配置的尺寸规格。
 *  “updateEnabled”表示卡片是否支持定时刷新或定点刷新，优先选择定时刷新。
 *  “updateDuration“表示卡片定时刷新的周期。当取值为 0 时，表示该参数不生效；当取值为正整数 N 时，表示刷新周期为 30\*N 分钟。

接下来，我们先对工程的主模块 entry 自动签名，然后看一下运行效果。

运行之后，在桌面上应用图标的下方显示了一条横线，表示该应用是支持卡片的，如下图所示：

![1264009cf10a058c0bd36a93912637dd.png][]

在桌面上长按应用的图标，在弹出的菜单中点击“服务卡片”，就显示出了应用的所有卡片，如下图所示：

![1a399c871307c31541bcf9e813cd1aae.png][]

上下滑动所有卡片，总共有 5 个，其中，名为 MainWidget1 的卡片有两个，尺寸分别是 1\*2 和 2\*2，名为 MainWidget2 的卡片有三个，尺寸分别是 2\*2、2\*4 和 4\*4。

此外，名为 MainWidget1 的 2\*2 的卡片被设为了上滑卡片，这是因为在 config.json 中，将“isDefault”设为了“true”，并且将“defaultDimension”设为了“2\*2”，如下图所示：

![e2df14b6e463b2be942a6b50a996a619.png][]

**②卡片的初始化**

当我们在桌面上长按应用的图标然后显示所有卡片的时候，MainAbility 中卡片的生命周期方法 onCreateForm() 会被自动回调，方法 onCreateForm() 的实现如下图所示：

![04f446e3c6d9c9b28e983d2fd5ba6b6a.png][]

因为总共有 5 个卡片，所以方法 onCreateForm() 会被回调 5 次，如下图所示：

![1332b33798d2f61107e31b93e31fcc13.png][]

在方法 onCreateForm() 中，分别调用 intent.getLongParam()、intent.getStringParam() 和 intent.getIntParam() 获得了卡片的 id、名称和尺寸。此外，在方法 onCreateForm() 中可以进行一些卡片的初始化操作。

大家想想看，现在应用内只有 5 个卡片，假如应用内有几十个卡片，难道要把这几十个卡片的所有初始化操作都写在方法 onCreateForm() 中吗？

显然是不好的做法！为此，通过模板自动生成的代码中，为我们提供了 FormControllerManager、FormController、XxxImpl 这几个类。

其中，FormControllerManager 是卡片管理器的大管家；FormController 是卡片的管理器，他是一个抽象类。

XxxImpl 实现了 FormController，MainWidget1Impl 是名为 MainWidget1 的卡片对应的卡片控制器，MainWidget2Impl 是名为 MainWidget2 的卡片对应的卡片控制器。

这样，就可以根据卡片的名称对卡片进行独立控制了。在方法 onCreateForm() 中，首先得到 FormControllerManager 的实例，然后根据卡片 ID 得到对应的卡片控制器，也就是对应的 XxxImpl 的实例，最后调用对应的 XxxImpl 中的方法 bindFormData()。

打开 MainWidget1Impl，方法 bindFormData() 中的代码如下所示：

![74b495465b09dc303183b6c1b39d607b.png][]

根据卡片的尺寸，分别设置了两个变量“mini”和“dim2X4”的值，这两个变量是子目录 main\_widget1 中的 index.json 中的两个变量。

这里顺便说一下，在 index.hml 中，很多变量都使用两个花括号括了起来，这些变量的值是在程序的运行过程中动态确定的，这种技术称之为动态绑定。这些变量的初始值在 index.json 中的标签“data”中进行了定义。

所以，在方法 bindFormData() 中，根据卡片的尺寸修改了两个动态绑定的变量的值。我们对自动生成的代码再修改一下，如下图所示：

![2b4248e2ba7585a5e59a421ec8b0c07f.png][]

同时，对 MainWidget2Impl 中的方法 bindFormData() 也修改一下，如下图所示：

![cb87e8331dcca317408efe6c27e7b19f.png][]

运行工程，显示所有卡片，如下图所示：

![1497169d81c7cb7e6004d9440eec9b96.png][]

所有卡片的标题都被修改了（尺寸最小的卡片除外，因为他本来就不显示标题）。

**③卡片的定点/定时刷新**

接下来，我们试一下卡片的定点刷新。打开 config.json，先将 MainWidget2 对应的标签“updateDuration”修改为 0，以关闭定时刷新，对于标签“scheduledUpdateTime”设定的时刻，当到达之后，MainAbility 中卡片的回调方法 onUpdateForm() 就会被自动调用，如下图所示：

![dbca47a9e6c7ccd8ce3a46993444b920.png][]

在方法体的最后，调用了卡片控制器的方法 updateFormData()。打开 MainWidget2Impl，在方法 updateFormData() 中，添加如下代码：

![a0c70805f8f4c37a020f1c4afade8504.png][]

首先，将要刷新的数据存放在一个 ZSONObject 实例中，然后，将其封装在一个 FormBindingData 的实例 bindingData 中，最后，调用 MainAbility 的方法 updateForm()，并将 bindingData 作为第二个实参。

打开 config.json，将标签“scheduledUpdateTime”的值修改为当前时刻的两分钟之后。

运行工程，将 ManWidget2 对应的三个卡片都添加到桌面上，当到达设定的定点时刻之后，三个卡片的标题都刷新了，如下图所示：

![aa0d804d92c0c876acccd0f4ba3bba8f.png][]

**④卡片的跳转事件**

对于桌面上名为 MainWidget2 的三个卡片，接下来我们要实现的功能是：点击任意一个卡片中左上方的图片，都跳转到 SecondAbility 对应的页面。

新建一个名为 SecondAbility 的 Page Ability，其所在的包是 com.zrc.demos。

打开子目录 main\_widget2 中的 index.json，添加如下配置：

![99656715869698b351ef64207d274065.png][]

其中，标签“actions”用于定义所有的事件，目前只定义了一个名为“startSecondAbility”的事件。

将标签“action”的值设置为“router”，表示该事件是一个跳转事件。标签“abilityName”的值指定了跳转的目标 Ability。标签“params”的值指定了跳转时携带的数据。

打开子目录 main\_widget2 中的 index.hml，在标签 image 中添加一个属性 onclick，并将值设置为刚刚在 index.json 中定义的 action 的名称“startSecondAbility”，如下图所示：

![c9765d5b6c7099f87063a0ad99410f88.png][]

打开 SecondAbilitySlice，在回调方法 onStart() 中获取跳转时携带的数据，如下图所示：

![de03cd14d43e6bf2806bf8e15fad3a68.png][]

首先，根据 key 的值“params”获得一个字符串格式的 JSON 数据；然后，调用 ZSONObject.stringToZSON() 将其转换为一个 ZSONObject 的实例 data；最后，从 data 中分别获得“param1”和“param2”这两个 key 对应的 value。

运行工程，将名为 MainWidget2 的任意一个卡片添加到桌面上，点击卡片中左上方的图片，跳转到了 SecondAbility 对应的页面，打印出的 log 如下所示：

![f4f79fcbb1ef4b436c55b5c1fa0996f3.png][]

**⑤卡片的消息事件**

除了支持跳转事件，卡片还支持消息事件。当触发消息事件时，卡片所对应 Page Ability 的生命周期方法 onTriggerFormEvent() 会被自动回调。

接下来我们要实现的功能是：对于名为 MainWidget2 的任意一个卡片，点击卡片的空白处，都会回调方法 onTriggerFormEvent()。

打开子目录 main\_widget2 中的 index.json，添加如下配置：

![03a5b38db3a4b7f447291a77f0452dc8.png][]

在标签“actions”中再定义了一个名为“sendMessageEvent”的事件。将标签“action”的值设置为“message”，表示该事件是一个消息事件。标签“params”中定义了相关的数据。

打开子目录 main\_widget2 中的 index.hml，在第 6 行的标签 div 中添加一个属性 onclick，并将值设置为刚刚在 index.json 中定义的 action 的名称“sendMessageEvent”，如下图所示：

![1881d4cfb81c7dea72e0b9ac6365df4f.png][]

通过模板创建卡片时自动生成的方法 onTriggerFormEvent()，如下图所示：

![061f68901d8b99e5279e1b49f93a956f.png][]

在方法体的最后，调用了卡片控制器的方法 onTriggerFormEvent()。因此，打开 MainWidget2Impl，在方法 onTriggerFormEvent() 中，添加如下代码：

![d823eedbbff7690f0c7cda923fb46817.png][]

首先，message 是一个字符串格式的 JSON 数据；然后，调用 ZSONObject.stringToZSON() 将 message 转换为一个 ZSONObject 的实例 data；最后，从 data 中分别获得“p1”和“p2”这两个 key 对应的 value。

运行工程，将名为 MainWidget2 的任意一个卡片添加到桌面上，点击卡片的空白处，卡片所对应 Page Ability 的生命周期方法 onTriggerFormEvent() 被自动回调，打印出的 log 如下所示：

![30e12a037e3b0d245eee805e3c9a1556.png][]

**使用 Java 开发卡片**

请不要跳过前面的“使用 JS 开发卡片”，因为前后是有联系的，即便你对 JS 不熟悉，相信你也可以看懂的。此外，大家在学习接下来的内容时，请注意与前面的“使用 JS 开发卡片”进行对比。

**①使用模板创建卡片**

首先，我们使用模板创建一个 Java 类型的卡片。在目录 entry 上点击右键，在弹出的菜单中选择 New，然后在弹出的子菜单中点击 Service Widget，在模板选择界面，选择基本的模板 Grid Pattern，点击按钮 Next，进入到卡片配置界面，如下图所示：

![a04e7552696942ec7f78803abe081620.png][]

其中，配置卡片的编程语言类型为 Java。为了与名为 MainWidget2 的三个卡片进行对比，我们也配置三个尺寸：2\*2、2\*4、4\*4。

这样，DevEco Studio 就自动帮我们生成了一些目录和文件。

打开 Java 子目录，自动创建了一个子目录 mainwidget3，并且自动创建了一个文件 MainWidget3Impl 以作为卡片 MainWidget3 的控制器，如下图所示：

![47744a745e9be685117e9f96d929600d.png][]

打开 js 子目录，没有自动创建任何目录和文件，而是在子目录 layout 中自动创建了 3 个布局文件，如下图所示：

![cb8d4e69efc5fe819848df4bf645ea49.png][]

这是 3 个不同尺寸卡片的布局文件，通过文件名就能看出每个布局文件所对应的卡片尺寸。

布局文件里定义了卡片中包含哪些 UI 组件以及 UI 组件都长什么样，因此，布局文件就相当于子目录 js 中的 hml 文件和 css 文件。

最后，打开 config.json 看一下，里面自动添加了一些配置，如下图所示：

![8f609d888e79a5fa92e5174435234995.png][]

与 js 不同的是，java 卡片要分别配置“landscapeLayouts”和“portraitLayouts”，分别表示卡片对应的横向布局文件和竖向布局文件。

值得注意的是：配置的数组中的元素要与“supportDemensions”中的元素一一对应。

运行工程，在桌面上长按应用的图标，在弹出的菜单中点击”服务卡片”，就显示出了应用的所有卡片，现在总共有 8 个，其中，名为 MainWidget3 的卡片有 3 个。

**②卡片的初始化**

当我们在桌面上长按应用的图标然后显示所有卡片的时候，MainAbility 中卡片的生命周期方法 onCreateForm() 会被自动回调，因为总共有 8 个卡片，所以方法 onCreateForm() 会被回调 8 次。

在方法体的最后，调用了对应的 XxxImpl 中的方法 bindFormData()。打开 MainWidget3Impl，方法 bindFormData() 中的代码如下所示：

![5ad0528cf04f959d5fd10a591a01e3c2.png][]

三个卡片的布局文件都放在了一个 map 中，根据卡片的尺寸得到对应的布局文件，然后创建一个提供者卡片信息 ProviderFormInfo 的实例并将其返回了。

接下来，我们实现与 MainWidget2 相同的功能：修改三个卡片的标题。首先，在卡片对应的三个布局文件中，都为卡片标题对应的组件 Text 添加一个 id，如下图所示：

![b32e05a7509a98cd1d7548884f26cb62.png][]

然后，在 MainWidget3Impl 中添加一个静态常量，如下图所示：

![0c4ecd9889b4b22d92b6e36da7c81090.png][]

在返回 ProviderFormInfo 的实例之前，先根据卡片的尺寸修改对应的标题，如下图所示：

![91942c90f6047f8838b8ba6a7ec701db.png][]

首先，构造一个 ComponentProvider 的实例，用于表示一个 Java 卡片实例；然后，根据卡片的尺寸修改布局文件中标题的值。

其中，标题是通过布局文件中组件 Text 对应的 id 进行指定的；最后，调用 providerFormInfo 的方法 mergeActions() 并且将 componentProvider 作为实参传过去。

运行工程，名为 MainWidget3 的三个卡片的标题都被修改了，如下图所示：

![e53a70b7124c5ce9f1c75d290b4ee13b.png][]

**③卡片的定点/定时更新**

接下来，我们试一下卡片的定点刷新。打开 config.json，先将 MainWidget3 对应的标签“updateDuration”修改为 0，以关闭定时刷新；然后，将标签“scheduledUpdateTime”修改为当前时刻的两分钟之后。

当到达设定的定点时刻之后，MainAbility 中卡片的回调方法 onUpdateForm() 就会被自动调用， 在方法体的最后，调用了卡片控制器的方法 updateFormData()。

打开 MainWidget3Impl，在方法 updateFormData() 中，添加如下代码：

![6deb4f0440c254d0db3602b2df7d22c4.png][]

首先，构造一个 ComponentProvider 的实例，用于表示一个 Java 卡片实例，传入的第一个实参是根据卡片尺寸得到的布局文件。

然后，调用方法 setText() 修改卡片的标题；最后，调用 MainAbility 的方法 updateForm()，并将 componentProvider 作为第二个实参。

运行工程，将 ManWidget3 对应的三个卡片都添加到桌面上，当到达设定的定点时刻之后，三个卡片的标题都刷新了。

**④卡片的事件**

与 JS 不同的是，Java 卡片是通过 IntentAgent 来设置事件的。以跳转事件为例，接下来我们实现的功能是：对于名为 MainWidget3 的、尺寸为 2\*4 的卡片，当点击标题时跳转到 SecondAbility 对应的页面。

打开 MainWidget3Impl，在方法 bindFormData()中，当卡片尺寸为 2\*4 时，调用 componentProvider 的方法 setIntentAgent()，传入的第一个实参是标题在布局文件中的 id，第二个实参是用于页面跳转的 IntentAgent 实例。

代码如下所示：

![25a5ff76d204d3fc9a42f73826275d79.png][]

接下来，定义方法 getStartAbilityIntentAgent() 的具体实现，代码如下所示：

![c9cc0e0f451b48ae75bdcce49fc68054.png][]

运行工程，将名为 MainWidget3 的、尺寸为 2\*4 的卡片添加到桌面，点击卡片中的标题，跳转到了 SecondAbility 对应的页面。

**开发卡片到使用 JS 还是 Java**

官方文档中给出了 JS 卡片和 Java 卡片的场景能力差异，如下表所示：

![efd4450dd825b85124eb287793a0db72.png][]

通过该表可以看出：

*  JS 卡片比 Java 卡片支持的控件和能力都更丰富。
 *  Java 卡片适合作为一个直达入口，没有复杂的页面和事件。
 *  JS 卡片适合有复杂界面的卡片。

我个人更推荐使用 JS 卡片，因为使用起来更灵活、更简单、功能更强大！

好，关于鸿蒙的卡片开发，就给大家分享这么多内容，喜欢这篇文章的朋友麻烦给个三连^\_^

后续，我会撰写更多的鸿蒙技术文章分享给大家，欢迎关注我的鸿蒙专栏：

https://harmonyos.51cto.com/column/27

\--完--

关注「HarmonyOS应用开发者」，一起学习成长

后台回复"教程" 获得最新鸿蒙开发者教程，助你快速上手鸿蒙开发！

花了半个月时间整理了522页的《HarmonyOS从入门到精通》电子书

![651f5c67435f4f8d8ca3f65ac753e195.png][]

[0eff6c417867e9a878898f463f9ff194.png]: /images/20221005/2574a9b3200d4959802482b2abd351cf.png
[fb60afeb2de717a20adf9446ce2bd1bb.png]: /images/20221005/d0034b2bbdc84507be9f7ce401be7f47.png
[15e8478a4b04dd2f83f09d2a311e6028.png]: /images/20221005/42b057475621406c8ad49fa1492a607b.png
[fc469fcac8e238b7aff0be389f66d303.png]: /images/20221005/d1ebfe5f1fd44f8480d63dbfe9d1fabe.png
[f9d800047381d6375d81647942112d99.png]: /images/20221005/465653a7feef4ed2bdf5634a184a9b74.png
[7e50f45b31f13d12465ac23d29c4446e.png]: /images/20221005/a19a977b965147ee9a01cf3b0fc5db09.png
[778d68de5d0ded339316fbd490975398.png]: /images/20221005/fe7e93fab097455b8b7e73a525a01e4b.png
[1c531316ab649faf09561ef8cd4d7002.png]: /images/20221005/579c2ea3d01e4d9ea80eabfcef518c4d.png
[263093cbea58bb0c1b651e7e4b9b974e.png]: /images/20221005/baf3c8e0512f48f18f5f01d2eba57524.png
[7f77bbf13967e1945d8712203602319f.png]: /images/20221005/8f31df97844a47358cd3a29663870afb.png
[8c1a441a339c4dbfced6b929e27b99b0.png]: /images/20221005/f45e6414a126482a8789938428bc04b2.png
[a598598392acc9159186aa14d6258fff.png]: /images/20221005/78070e9891fc403cb084842114ccd04d.png
[9ad2704bbd46060b23c34636a39692f7.png]: /images/20221005/d69ebf6c9d9a4aa390fd2f6112226b0e.png
[a1e8f39686d7624218b62be89c7739e0.png]: /images/20221005/31f5d4a620e64842a3edf3d2d9ab9e3d.png
[f3405cc6c735c9ebb6d0e92991eee237.png]: /images/20221005/b3e1225e6e6143d3afe6262f8abf23a7.png
[06a6db8da07ffba9d5e0e065d05d00d0.png]: /images/20221005/9350757a98134015b4e7a1ed45314459.png
[b0628feaa0c257efdaaa8e5831988d32.png]: /images/20221005/f12b24c21ea346d19fc757227f0cc003.png
[67fbd82f09bc9f79abfbb96bf48f7212.png]: /images/20221005/c92c174afe3443f99da37a3dab21c829.png
[75f113522521113759c0f48b0d4d189c.png]: /images/20221005/f37d35cfb9e44966ac9cb8238d3c2095.png
[0dc84722e2cc6d1c545b2da9adf76d5a.png]: /images/20221005/65fff83ecb83470fb707761403c0e3f6.png
[ae69c17b00d80f4f4a6e13c479cad57d.png]: /images/20221005/a916bf6220874212b612d86790b26019.png
[5c479924a0666b8e5a5c4890fd7a9cb4.png]: /images/20221005/3b14f12256cd4f08994aab22712d5cd1.png
[6feaf6a8308cc87b720f9e3407b0f591.png]: /images/20221005/c112895ecd7343198c427ae9c9577ae2.png
[14aa2c5e453164b0a04acaecff1d6e60.png]: /images/20221005/2622907d7dc542a7a6fcb1119674e5a3.png
[77c264f925e2587be22b844ab3397cd0.png]: /images/20221005/2c7fefd0df0b4bad9b24d13e14f7164a.png
[4e2ed29b3c86d3ac858c54198166f3a7.png]: /images/20221005/ef559cd636b34d6d9ce3b07b32e38c8a.png
[2964562941c6382f9ed37e29e20560a2.png]: /images/20221005/9356402063204124ad4bdeacf23297fa.png
[1264009cf10a058c0bd36a93912637dd.png]: /images/20221005/f8e473bb79a049b0890e5c02275e03fd.png
[1a399c871307c31541bcf9e813cd1aae.png]: /images/20221005/20af1fbff4aa4c3c85433097aea476b1.png
[e2df14b6e463b2be942a6b50a996a619.png]: /images/20221005/d0d1fd3566314b04bbdb84b035e938b5.png
[04f446e3c6d9c9b28e983d2fd5ba6b6a.png]: /images/20221005/3c8639fe877b444199ce0399a3d77b4b.png
[1332b33798d2f61107e31b93e31fcc13.png]: /images/20221005/fca8c3f4e5f84552bbff880f03f63415.png
[74b495465b09dc303183b6c1b39d607b.png]: /images/20221005/0fa87fd529264e79aed3e689da239137.png
[2b4248e2ba7585a5e59a421ec8b0c07f.png]: /images/20221005/0ef263573dd04346a1b887b68005c391.png
[cb87e8331dcca317408efe6c27e7b19f.png]: /images/20221005/86cdf70fdd0e48e59fa753c84d280117.png
[1497169d81c7cb7e6004d9440eec9b96.png]: /images/20221005/e5c3dbcc810d4fea8fc6c338f239d696.png
[dbca47a9e6c7ccd8ce3a46993444b920.png]: /images/20221005/850d6b0f76b64da69c8e31f0a7f0c216.png
[a0c70805f8f4c37a020f1c4afade8504.png]: /images/20221005/4b166c7684e54e0bb91c19ea6c755d98.png
[aa0d804d92c0c876acccd0f4ba3bba8f.png]: /images/20221005/abd5a89679e745b0a70554cda2d2cb53.png
[99656715869698b351ef64207d274065.png]: /images/20221005/0c7d2d0098e3413d85592dc0155aebad.png
[c9765d5b6c7099f87063a0ad99410f88.png]: /images/20221005/f74185bb3f8142fa8978f8618736da94.png
[de03cd14d43e6bf2806bf8e15fad3a68.png]: /images/20221005/27501071a78c4a8090d249b1b6a497a6.png
[f4f79fcbb1ef4b436c55b5c1fa0996f3.png]: /images/20221005/17f849c3b99246bea576461edbf6949c.png
[03a5b38db3a4b7f447291a77f0452dc8.png]: /images/20221005/017d7815cd7b4e709e83984fe413e538.png
[1881d4cfb81c7dea72e0b9ac6365df4f.png]: /images/20221005/d5397050b6d04ed8ba688421d5624125.png
[061f68901d8b99e5279e1b49f93a956f.png]: /images/20221005/46def4dd39024052ae2725cf4bfe7c3f.png
[d823eedbbff7690f0c7cda923fb46817.png]: /images/20221005/415c875eea2b4492a38017c02cc82761.png
[30e12a037e3b0d245eee805e3c9a1556.png]: /images/20221005/1412bacc3cf64b889603bac61dd7e8f0.png
[a04e7552696942ec7f78803abe081620.png]: /images/20221005/ceee4b8518f849aa98abc5267dabec64.png
[47744a745e9be685117e9f96d929600d.png]: /images/20221005/7f9a790d4f4f47909c6f951f84cf8f18.png
[cb8d4e69efc5fe819848df4bf645ea49.png]: /images/20221005/b7b4b9b5e96b4aacbb604f36d1250a70.png
[8f609d888e79a5fa92e5174435234995.png]: /images/20221005/a9ec418fceb44b9cbc4db8c9e90b243a.png
[5ad0528cf04f959d5fd10a591a01e3c2.png]: /images/20221005/11d4190142cb400fa16b5cebde9dc0bf.png
[b32e05a7509a98cd1d7548884f26cb62.png]: /images/20221005/e700699ecab240db961dd2002a055129.png
[0c4ecd9889b4b22d92b6e36da7c81090.png]: /images/20221005/69d6120dcc784541a710d301114365a3.png
[91942c90f6047f8838b8ba6a7ec701db.png]: /images/20221005/6d72b949bce4479d9a99498050d9da1f.png
[e53a70b7124c5ce9f1c75d290b4ee13b.png]: /images/20221005/5908709252ec45c4a4240cbe6e794a6f.png
[6deb4f0440c254d0db3602b2df7d22c4.png]: /images/20221005/ebea0fd468e94f05a689d552e2af5480.png
[25a5ff76d204d3fc9a42f73826275d79.png]: /images/20221005/c4a3bdc7ca8a43abaa6f92288b7e9b10.png
[c9cc0e0f451b48ae75bdcce49fc68054.png]: /images/20221005/deb13873907c45f0a5975eb737628121.png
[efd4450dd825b85124eb287793a0db72.png]: /images/20221005/5dd73089df624256b074e9c0603a15ac.png
[651f5c67435f4f8d8ca3f65ac753e195.png]: /images/20221005/c0c608142b5744fe8777ff49ba221354.png