前言

本文基于Api13

上篇文章，我們簡單了解了服務(wù)卡片的相關(guān)知識，那么這篇文章，我們就從0到1實現(xiàn)一個服務(wù)卡片。

創(chuàng)建卡片

創(chuàng)建卡片很簡單，可以在Application或者在元服務(wù)中，在你的主模塊下，任意的文件下進(jìn)行右鍵，選擇New->Service Widget，選擇你要實現(xiàn)靜態(tài)或者動態(tài)卡片，這里，大家不用糾結(jié)，因為在創(chuàng)建完成之后，我們可以在form_config.json配置文件中，通過isDynamic參數(shù)修改卡片類型，為空或者true，則是動態(tài)卡片，false則為靜態(tài)卡片，所以，在這里，你選擇哪一個都沒問題。

目前靜態(tài)提供了5個模版，動態(tài)提供了4個，大家可以根據(jù)實際的業(yè)務(wù)需求，選擇其中一個即可。

選擇好一個模版之后，就進(jìn)入到了如下的頁面，也就是服務(wù)卡片的配置頁面，從上到下分別為，Service widget name：服務(wù)卡片的名字；Display name，卡片顯示的名字；description：卡片的描述信息；Language：開發(fā)語言，這里建議ArkTs；supportDimensions：卡片支持的外觀規(guī)，1 * 2：表示1行2列的二宮格，以此類推；Ability name:卡片生命周期管理文件。

配置填完之后，點擊底部的Finish，我們就完成了一個默認(rèn)的服務(wù)卡片，可以直接運行，運行之后，長按桌面圖標(biāo)后，就會顯示卡片的選項：

點擊卡片后，就會展示出默認(rèn)的卡片UI，我們可以點擊添加至桌面：

這樣就會在桌面上顯示我們剛才創(chuàng)建的服務(wù)卡片：

卡片目錄結(jié)構(gòu)

創(chuàng)建完之后，會在我們原有的項目中生成如下文件，首先是entryformability包下的EntryFormAbility文件，它是卡片擴(kuò)展模塊，主要提供卡片創(chuàng)建、銷毀、刷新等生命周期回調(diào)；widget包的pages下的WidgetCard，主要是基于ArkUI提供卡片UI開發(fā)能力；resources下的form_config.json配置文件，主要用于配置WidgetCard相關(guān)信息。

主要文件介紹

一個卡片的配置，主要是通過三個文件，也就是上面目錄結(jié)構(gòu)中的EntryFormAbility文件、WidgetCard文件和form_config.json配置文件，我們逐一進(jìn)行分析一下：

EntryFormAbility文件

主要是卡片擴(kuò)展模塊，提供卡片創(chuàng)建、銷毀、刷新等生命周期回調(diào)，繼承于FormExtensionAbility，源碼如下：

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：卡片提供方接收創(chuàng)建卡片的通知接口，formBindingData.FormBindingData對象，是卡片要顯示的數(shù)據(jù)；onCastToNormalForm：卡片提供方接收臨時卡片轉(zhuǎn)常態(tài)卡片的通知接口；onUpdateForm：卡片提供方接收攜帶參數(shù)的更新卡片的通知接口，獲取最新數(shù)據(jù)后調(diào)用formProvider的updateForm接口刷新卡片數(shù)據(jù)；onFormEvent：卡片提供方接收處理卡片事件的通知接口；onRemoveForm：卡片提供方接收銷毀卡片的通知接口；onAcquireFormState：卡片提供方接收查詢卡片狀態(tài)通知接口，默認(rèn)返回卡片初始狀態(tài)(該方法可以選擇性重寫)。

WidgetCard文件

主要是卡片UI視圖，可以在這里對卡片進(jìn)行繪制，支持聲明式范式的部分組件、事件、動效、數(shù)據(jù)管理、狀態(tài)管理能力，在使用的時候，可以查看官方Api中是否標(biāo)記了“卡片能力”的標(biāo)記，如果標(biāo)記了，證明是可以在ArkTS卡片中使用。

form_config.json配置文件

form_config配置文件，就是服務(wù)卡片配置填的那些信息，如下所示：

{
  "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"
      ]
    }
  ]
}

各個字段概述如下：

相關(guān)總結(jié)

form_config配置文件里面可選的屬性非常之多，以上的表格，并未列舉全面，大家在寫的時候，一定要去官方文檔進(jìn)行查閱。

本文標(biāo)簽：HarmonyOS/服務(wù)卡片，參考資料：官方文檔之服務(wù)卡片指導(dǎo)。