编辑刷新卡片页面内容

桌面提供统一的卡片编辑页，卡片提供方使用卡片框架提供的FormEditExtensionAbility开发卡片编辑功能。

开发步骤

1. 在工程的entry模块中，新建名为EntryFormEditAbility的代码文件。在EntryFormEditAbility文件中，实现startSecondPage方法，在onSessionCreate回调方法中，加载一级卡片编辑页，并将startSecondPage方法的实现传递给一级卡片编辑页。

// src/main/ets/entryformeditability/EntryFormEditAbility.ets

import { FormEditExtensionAbility } from '@kit.FormKit';
import { Want,UIExtensionContentSession } from '@kit.AbilityKit';
import { ExtensionEvent } from '../pages/model/ExtensionEvent';

const TAG: string = 'FormEditDemo[EntryFormEditAbility] -->';
export default class EntryFormEditAbility extends FormEditExtensionAbility {
  onCreate() {
    console.log(`${TAG} onCreate`);
  }
  onForeground(): void {
    console.log(`${TAG} EntryFormEditAbility onForeground.....`);
  }
  onBackground(): void {
    console.log(`${TAG} EntryFormEditAbility onBackground......`);
  }
  onDestroy(): void {
    console.log(`${TAG} EntryFormEditAbility onDestroy......`);
  }
  onSessionCreate(want: Want, session: UIExtensionContentSession) {
    console.log(`${TAG} onSessionCreate start..... want: ${JSON.stringify(want)}`);
    let storage: LocalStorage = new LocalStorage();
    let extensionEvent: ExtensionEvent = new ExtensionEvent();
    extensionEvent.setStartSecondPage(() => this.startSecondPage());
    storage.setOrCreate('extensionEvent', extensionEvent);
    try {
      session.loadContent('pages/Extension', storage);
      session.setWindowBackgroundColor('#00000000');
    } catch (e) {
      console.log(`${TAG} EntryFormEditAbility loadContent err, want: ${JSON.stringify(e)}`);
    }
  }
  onSessionDestroy(session: UIExtensionContentSession) {
    console.log(`${TAG} onSessionDestroy`);
  }
  private startSecondPage(): void {
    const bundleName: string = this.context.extensionAbilityInfo.bundleName;
    const secPageAbilityName: string = 'FormEditSecPageAbility';
    console.log(`${TAG} startSecondPage. bundleName: ${bundleName}, secPageAbilityName: ${secPageAbilityName}.`);
    try {
      this.context.startSecondPage({
        bundleName: bundleName,
        parameters: {
          "secPageAbilityName": secPageAbilityName
        }
      });
    } catch (err) {
      console.log(`${TAG} startSecondPage failed: ${err}`);
    }
  }
};

1. 新增Extension文件，用于展示卡片一级编辑页。

// src/main/ets/pages/Extension.ets

import { UIExtensionContentSession } from '@kit.AbilityKit';
import { ExtensionEvent } from './model/ExtensionEvent';

let storage = new LocalStorage();
const TAG: string = 'FormEditDemo[Extension] -->';
@Entry(storage)
@Component
struct Extension {
  @State message: string = 'UIExtension Provider';
  private session: UIExtensionContentSession|undefined = storage.get<UIExtensionContentSession>('session');
  private extensionEvent: ExtensionEvent|undefined = storage.get<ExtensionEvent>('extensionEvent');
  onPageShow() {
    console.log(`${TAG} onPageShow. extensionEvent: ${JSON.stringify(this.extensionEvent)}, session: ${JSON.stringify(this.session)}.`);
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
        Button("添加")
          .width('80%')
          .type(ButtonType.Capsule)
          .margin({
            top: 20
          })
          .onClick(() => {
            console.log(`${TAG} Button onClick`);
            this.extensionEvent?.startFormEditSecondPage();
          })
      }
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }
}

1. 新增ExtensionEvent文件，使用startFormEditSecondPage方法调用startSecondPage方法。

// src/main/ets/widget/pages/model/ExtensionEvent.ets

const TAG: string = 'FormEditDemo[ExtensionEvent] -->';
export class ExtensionEvent {
  private startSecondPage: () => void = () => {
    console.log(`${TAG} startSecondPage is empty!`);
  };
  public setStartSecondPage(startSecondPage: () => void) {
    console.log(`${TAG} setStartSecondPage`);
    this.startSecondPage = startSecondPage;
  }
  public startFormEditSecondPage(): void {
    console.log(`${TAG} startFormEditSecondPage`);
    this.startSecondPage();
  }
}

1. 在应用的module.json5配置文件中添加卡片编辑配置信息。

"extensionAbilities": [
  {
    "name": "EntryFormEditAbility",
    "srcEntry": "./ets/entryformeditability/EntryFormEditAbility.ets",
    "type": "formEdit"
  }
]

1. 在卡片的form_config.json配置文件中添加formConfigAbility配置项信息。

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

1. 在开发视图的resource/base/profile/main_pages.json文件中，注册Extension页面文件。

{
  "src": [
    "pages/Index",
    "pages/Extension"
  ]
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Form Kit（卡片开发服务）

harmony 鸿蒙ArkTS卡片概述

harmony 鸿蒙趣味交互类型互动卡片开发指导

harmony 鸿蒙互动卡片概述

harmony 鸿蒙场景动效类型互动卡片开发指导（系统应用）

harmony 鸿蒙场景动效类型互动卡片开发指导

harmony 鸿蒙场景动效类型互动卡片概述

harmony 鸿蒙ArkTS卡片主动刷新

harmony 鸿蒙配置卡片的配置文件

harmony 鸿蒙卡片使用方主动请求刷新卡片内容（仅对系统应用开放）