HarmonyOS鸿蒙Next万能卡片-Codelabs挑战赛：历史上的今天 ArkTS卡片实现原理+卡片生命周期+用router事件跳转到指定页面+卡片使用动效能力

HarmonyOS鸿蒙Next万能卡片-Codelabs挑战赛：历史上的今天 ArkTS卡片实现原理+卡片生命周期+用router事件跳转到指定页面+卡片使用动效能力 【鸿蒙万能卡片-Codelabs挑战赛】+历史上的今天 第五篇

到了第五篇，我们就有必要来对ArkTS卡片实现原理 进行分析了。

ArkTS卡片实现原理

• 卡片使用方：显示卡片内容的宿主应用，控制卡片在宿主中展示的位置，当前仅系统应用可以作为卡片使用方。
• 卡片提供方：提供卡片显示内容的应用，控制卡片的显示内容、控件布局以及控件点击事件。
• 卡片管理服务：用于管理系统中所添加卡片的常驻代理服务，提供formProvider和formHost的接口能力，同时提供卡片对象的管理与使用以及卡片周期性刷新等能力。
• 卡片渲染服务：用于管理卡片渲染实例，渲染实例与卡片使用方上的卡片组件一一绑定。卡片渲染服务运行卡片页面代码widgets.abc进行渲染，并将渲染后的数据发送至卡片使用方对应的卡片组件。

分析完成之后。我们就来看一下我们的实现中用的几个技术

卡片生命周期

创建ArkTS卡片，需实现FormExtensionAbility生命周期接口。

1. 在EntryFormAbility.ts中，导入相关模块。

import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import { FormExtensionAbility } from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';

1. 在EntryFormAbility.ts中，实现FormExtensionAbility生命周期接口，其中在onAddForm的入参want中可以通过FormParam取出卡片的相关信息。

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want) {
    console.info('[EntryFormAbility] onAddForm');
    // 在入参want中可以取出卡片的唯一标识：formId
    let formId: string = want.parameters[formInfo.FormParam.IDENTITY_KEY];
    // 使用方创建卡片时触发，提供方需要返回卡片数据绑定类
    let obj = {
      'title': 'titleOnAddForm',
      'detail': 'detailOnAddForm'
    };
    let formData = formBindingData.createFormBindingData(obj);
    return formData;
  }

  onCastToNormalForm(formId) {
    // Called when the form provider is notified that a temporary form is successfully
    // converted to a normal form.
    // 使用方将临时卡片转换为常态卡片触发，提供方需要做相应的处理
    console.info(`[EntryFormAbility] onCastToNormalForm, formId: ${formId}`);
  }

  onUpdateForm(formId) {
    // 若卡片支持定时更新/定点更新/卡片使用方主动请求更新功能，则提供方需要重写该方法以支持数据更新
    console.info('[EntryFormAbility] onUpdateForm');
    let obj = {
      'title': 'titleOnUpdateForm',
      'detail': 'detailOnUpdateForm'
    };
    let formData = formBindingData.createFormBindingData(obj);
    formProvider.updateForm(formId, formData).catch((err) => {
      if (err) {
        // 异常分支打印
        console.error(`[EntryFormAbility] Failed to updateForm. Code: ${err.code}, message: ${err.message}`);
        return;
      }
    });
  }

  onChangeFormVisibility(newStatus) {
    // Called when the form provider receives form events from the system.
    // 需要配置formVisibleNotify为true，且为系统应用才会回调
    console.info('[EntryFormAbility] onChangeFormVisibility');
  }

  onFormEvent(formId, message) {
    // Called when a specified message event defined by the form provider is triggered.
    // 若卡片支持触发事件，则需要重写该方法并实现对事件的触发
    console.info('[EntryFormAbility] onFormEvent');
  }

  onRemoveForm(formId) {
    // Called to notify the form provider that a specified form has been destroyed.
    // 当对应的卡片删除时触发的回调，入参是被删除的卡片ID
    console.info('[EntryFormAbility] onRemoveForm');
  }

  onConfigurationUpdate(config) {
    // 当系统配置信息置更新时触发的回调
    console.info('[EntryFormAbility] configurationUpdate:' + JSON.stringify(config));
  }

  onAcquireFormState(want) {
    // Called to return a {@link FormState} object.
    // 卡片提供方接收查询卡片状态通知接口，默认返回卡片初始状态。
    return formInfo.FormState.READY;
  }
}

用router事件跳转到指定页面

在卡片中使用postCardAction接口的router能力，能够快速拉起卡片提供方应用，因此页面较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果。

通常使用按钮控件来实现页面拉起，

这个我主要用在了1*2的卡片里。

build() {
  Row() {
    Column() {
      Text("王安石")
        .fontSize($r('app.float.font_size'))
    }
    .width(this.FULL_WIDTH_PERCENT)
  }
  .height(this.FULL_HEIGHT_PERCENT)
  .onClick(() => {
    postCardAction(this, {
      "action": this.ACTION_TYPE,
      "abilityName": this.ABILITY_NAME,
      "params": {
        "message": this.MESSAGE
      }
    });
  })
}

卡片使用动效能力

ArkTS卡片开放了使用动画效果的能力。

我用在了详情页，点击头像，就会旋转。

@State rotateAngle: number = 0;
Image($r("app.media.wanshi"))
  .width(200)
  .borderRadius(600)
  .margin(20)
  .onClick(() => {
    this.rotateAngle = 90;
  })
  .rotate({ angle: this.rotateAngle })
  .animation({
    curve: Curve.EaseOut,
    playMode: PlayMode.AlternateReverse
  })

好的，这就是今天的知识点。