鸿蒙开发：简单实现一个服务卡片

前言

本文基于Api13

上篇文章，我们简单了解了服务卡片的相关知识，那么这篇文章，我们就从0到1实现一个服务卡片。

创建卡片

创建卡片很简单，可以在Application或者在元服务中，在你的主模块下，任意的文件下进行右键，选择New->Service Widget，选择你要实现静态或者动态卡片，这里，大家不用纠结，因为在创建完成之后，我们可以在form_config.json配置文件中，通过isDynamic参数修改卡片类型，为空或者true，则是动态卡片，false则为静态卡片，所以，在这里，你选择哪一个都没问题。

目前静态提供了5个模版，动态提供了4个，大家可以根据实际的业务需求，选择其中一个即可。

选择好一个模版之后，就进入到了如下的页面，也就是服务卡片的配置页面，从上到下分别为，Service widget name：服务卡片的名字；Display name，卡片显示的名字；description：卡片的描述信息；Language：开发语言，这里建议ArkTs；supportDimensions：卡片支持的外观规，1 * 2：表示1行2列的二宫格，以此类推；Ability name:卡片生命周期管理文件。

配置填完之后，点击底部的Finish，我们就完成了一个默认的服务卡片，可以直接运行，运行之后，长按桌面图标后，就会显示卡片的选项：

点击卡片后，就会展示出默认的卡片UI，我们可以点击添加至桌面：

这样就会在桌面上显示我们刚才创建的服务卡片：

卡片目录结构

创建完之后，会在我们原有的项目中生成如下文件，首先是entryformability包下的EntryFormAbility文件，它是卡片扩展模块，主要提供卡片创建、销毁、刷新等生命周期回调；widget包的pages下的WidgetCard，主要是基于ArkUI提供卡片UI开发能力；resources下的form_config.json配置文件，主要用于配置WidgetCard相关信息。

主要文件介绍

一个卡片的配置，主要是通过三个文件，也就是上面目录结构中的EntryFormAbility文件、WidgetCard文件和form_config.json配置文件，我们逐一进行分析一下：

EntryFormAbility文件

主要是卡片扩展模块，提供卡片创建、销毁、刷新等生命周期回调，继承于FormExtensionAbility，源码如下：

TypeScript 复制代码

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    // Called to return a FormBindingData object.
    const formData = '';
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId: string) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
  }

  onUpdateForm(formId: string) {
    // Called to notify the form provider to update a specified form.
  }

  onFormEvent(formId: string, message: string) {
    // Called when a specified message event defined by the form provider is triggered.
  }

  onRemoveForm(formId: string) {
    // Called to notify the form provider that a specified form has been destroyed.
  }

  onAcquireFormState(want: Want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }
}

onAddForm：卡片提供方接收创建卡片的通知接口，formBindingData.FormBindingData对象，是卡片要显示的数据；onCastToNormalForm：卡片提供方接收临时卡片转常态卡片的通知接口；onUpdateForm：卡片提供方接收携带参数的更新卡片的通知接口，获取最新数据后调用formProvider的updateForm接口刷新卡片数据；onFormEvent：卡片提供方接收处理卡片事件的通知接口；onRemoveForm：卡片提供方接收销毁卡片的通知接口；onAcquireFormState：卡片提供方接收查询卡片状态通知接口，默认返回卡片初始状态(该方法可以选择性重写)。

WidgetCard文件

主要是卡片UI视图，可以在这里对卡片进行绘制，支持声明式范式的部分组件、事件、动效、数据管理、状态管理能力，在使用的时候，可以查看官方Api中是否标记了"卡片能力"的标记，如果标记了，证明是可以在ArkTS卡片中使用。

form_config.json配置文件

form_config配置文件，就是服务卡片配置填的那些信息，如下所示：

json 复制代码

{
  "forms": [
    {
      "name": "widget",
      "displayName": "$string:widget_display_name",
      "description": "$string:widget_desc",
      "src": "./ets/widget/pages/WidgetCard.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDynamic": true,
      "isDefault": true,
      "updateEnabled": false,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2"
      ]
    }
  ]
}

各个字段概述如下：