HarmonyOS 鸿蒙Next UIAbility主动更新卡片信息

1 缘起

鸿蒙的服务卡片可以桌面展示直观信息，使用起来非常有趣，我想通过应用来更新卡片信息，但next文档长这样：

于是通过搜索和研究，总结技术经验在此。

2 应用方更新卡片数据的主要方法

1）获取formID -> 2) formProvider提交更新数据 -> 3)卡片方更新数据

3 缘落

3.1 获取formID

 因为应用方无法知道服务卡片的formID，因此要在服务卡片创建的时候把fromID存起来,主要是通过首选项进行。在卡片的onAddForm函数中存储当前formID：

  onAddForm(want: Want) {
    // Called to return a FormBindingData object.
    let formId: string = want.parameters?.[formInfo.FormParam.IDENTITY_KEY] as string;

    let options: preferences.Options = { name: 'trainCard' };
    let dataP = preferences.getPreferencesSync(this.context, options);
    dataP.putSync("formid",formId);
    dataP.flush();
｝

然后在需要更新数据时再把formID读出来：

   let context = getContext(this) as common.UIAbilityContext
    let dataPreferences: preferences.Preferences | null = null;
    let options: preferences.Options = { name: 'trainCard' };
    dataPreferences = preferences.getPreferencesSync(context, options);
    //读取数据
    if (dataPreferences != null) {

      let teststr = dataPreferences.getSync('formid','');

      this.formId = teststr.toString();
    ｝

3.2 formProvider提交更新数据

 formProvider模块提供了更新卡片，设置卡片更新时间，获取卡片信息，请求发布卡片等接口。其中formProvider.updateForm方法用来更新指定的卡片。

    let obj: Record<string, string> = {
      "title":"我更新了"
    ｝            
    if (this.formId == '') {
              this.tocast = "请拉伸为卡片后再试";
              //创建卡片
            } else {
              let formData:formBindingData.FormBindingData = formBindingData.createFormBindingData(obj);
              formProvider.updateForm(this.formId, formData).catch((error: BusinessError) => {
                console.log('updateForm, error:' + JSON.stringify(error));
              });
          ｝

3.3 卡片方更新数据

   卡片页面通过localStorageProp接收数据。首先在WidgetCard.ets页面的最上面创建一个LocalStorage的实例，然后将实例传递给@Entry，在页面中就可以使用LocalStorageProp修饰符来接收数据了。

const storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
 // 接收 EntryFormAbility 传递过来的数据
  @LocalStorageProp("title") title: string = '';
    build() {
    Column() {
      Text(this.title)
    }
    .width("100%")
    .height("100%")
｝