鸿蒙 NEXT 开发：服务卡片开发汇总

如何在 onAddForm 获取卡片标识(formId)

import formInfo from "@ohos.app.form.formInfo";

export default class EntryFormAbility extends FormExtensionAbility {
  // ...
  onAddForm(want: Want) {
    const formId = JSON.stringify(want.parameters[formInfo.FormParam.IDENTITY_KEY]);
    // ...
  }
  // ...
}

加载远程图片

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-widget-image-update-0000001774280214

TIP

无法直接使用 Image 组件加载远程图片。

Image 组件通过入参 (memory://fileName) 中的 memory:// 标识来进行远端内存图片显示，其中 fileName 需要和 EntryFormAbility 传递对象 ('formImages': {key: fd}) 中的 key 相对应。

Image 组件通过传入的参数是否有变化来决定是否刷新图片，因此 EntryFormAbility 每次传递过来的 imgName 都需要不同，连续传递两个相同的 imgName 时，图片不会刷新。

文件使用完成后必须关闭，否则会出现内存泄漏问题。系统不会自动关闭文件，开发者可以使用 fs.closeSync 来关闭文件。

FormExtensionAbility

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";
import request from "@ohos.request";
import fs from "@ohos.file.fs";

export default class EntryFormAbility extends FormExtensionAbility {
  // ...
  onFormEvent(formId, message) {
    // Called when a specified message event defined by the form provider is triggered.
    console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
    let param: Record<string, string> = {
      text: "刷新中...",
    };
    let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
    formProvider.updateForm(formId, formInfo);
    // 注意：FormExtensionAbility在触发生命周期回调时被拉起，仅能在后台存在5秒
    // 建议下载能快速下载完成的小文件，如在5秒内未下载完成，则此次网络图片无法刷新至卡片页面上
    let netFile = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"; // 需要在此处使用真实的网络图片下载链接
    let tempDir = this.context.getApplicationContext().tempDir;
    let fileName = "file" + Date.now();
    let tmpFile = tempDir + "/" + fileName;
    request
      .downloadFile(this.context, {
        url: netFile,
        filePath: tmpFile,
        enableMetered: true,
        enableRoaming: true,
      })
      .then((task) => {
        task.on("complete", () => {
          let file: fs.File;
          let fileInfo: Record<string, string | number> = {};
          try {
            file = fs.openSync(tmpFile);
            fileInfo[fileName] = file.fd;
          } catch (e) {
            console.error(`openSync failed: ${JSON.stringify(e)}`);
          }

          class FormDataClass {
            text: string = "Image: Bear" + fileName;
            imgName: string = fileName;
            loaded: boolean = true;
            formImages: Record<string, string | number> = fileInfo;
          }

          let formData = new FormDataClass();
          let formInfo = formBindingData.createFormBindingData(formData);
          formProvider
            .updateForm(formId, formInfo)
            .then(() => {})
            .catch((error) => {});
        });
        task.on("fail", (err: number) => {
          let param: Record<string, string> = {
            text: "刷新失败",
          };
          let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(param);
          formProvider.updateForm(formId, formInfo);
        });
      })
      .catch((err) => {});
  }
  // ...
}

Entry

let storageWidgetImageUpdate = new LocalStorage();

@Entry(storageWidgetImageUpdate)
@Component
struct WidgetImageUpdateCard {
  @LocalStorageProp('loaded') loaded: boolean = false;
  @LocalStorageProp('imgName') imgName: ResourceStr = '';

  build() {
    if (this.loaded) {
      Column() {
        Image('memory://' + this.imgName)
          .objectFit(ImageFit.Contain)
          .width('100%').height('100%')
      }.width('100%').height('100%')
    } else {
      Column() {
        Row() {
          Button('update')
            .width(120)
            .height(32)
            .margin({ top: '30%', bottom: '10%' })
            .borderRadius(16)
            .onClick(() => {
              postCardAction(this, {
                action: 'message',
                params: {
                  info: 'refreshImage'
                }
              });
            })
        }.width('100%').height('40%')
        .justifyContent(FlexAlign.Center)
      }.width('100%').height('100%')
    }
  }
}