HarmonyOS Next 实战卡片开发 01

{
  "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*4",
      "supportDimensions": [
        "2*4"
      ]
    }
  ]
}

import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    let formData = '';
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId: string) {
  }

  onUpdateForm(formId: string) {
  }

  onFormEvent(formId: string, message: string) {
  }

  onRemoveForm(formId: string) {
  }

  onAcquireFormState(want: Want) {
    return formInfo.FormState.READY;
  }
};

import { formBindingData, FormExtensionAbility, formInfo } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    class FormData {
      // 每一张卡片创建时都会被分配一个唯一的id
      formId: string = want.parameters!['ohos.extra.param.key.form_identity'].toString();
    }

    let formData = new FormData()
    // 返回数据给卡片
    return formBindingData.createFormBindingData(formData);
  }

  onCastToNormalForm(formId: string) {
  }

  onUpdateForm(formId: string) {
  }

  onFormEvent(formId: string, message: string) {
  }

  onRemoveForm(formId: string) {
  }

  onAcquireFormState(want: Want) {
    return formInfo.FormState.READY;
  }
};

const localStorage = new LocalStorage()

@Entry(localStorage)
@Component
struct WidgetCard {
  // 接收onAddForm中返回的卡片Id
  @LocalStorageProp("formId")
  formId: string = "xxx"

  build() {
    Column() {
      Button(this.formId)
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

const localStorage = new LocalStorage()

@Entry(localStorage)
@Component
struct WidgetCard {
  // 接收onAddForm中返回的卡片Id
  @LocalStorageProp("formId")
  formId: string = "xxx"
  @LocalStorageProp("num")
  num: number = 100

  build() {
    Column() {
      Button(this.formId)
      Button("message" + this.num)
        .onClick(() => {
          postCardAction(this, {
            action: 'message',
              // 提交过去的参数
            params: { num: this.num, aa: 200, formId: this.formId }
          });
        })

    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

import { formBindingData, FormExtensionAbility, formInfo, formProvider } from '@kit.FormKit';
import { Want } from '@kit.AbilityKit';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want: Want) {
    class FormData {
      // 每一张卡片创建时都会被分配一个唯一的id
      formId: string = want.parameters!['ohos.extra.param.key.form_identity'].toString();
    }

    let formData = new FormData()
    // 返回数据给卡片
    return formBindingData.createFormBindingData(formData);
  }

 // ...

  onFormEvent(formId: string, message: string) {
    //   接收到卡片通过message事件传递的数据
    // message {"num":100,"aa":200,"params":{"num":100,"aa":200},"action":"message"}
    interface IData {
      num: number
      aa: number
    }

    interface IRes extends IData {
      params: IData,
      action: "message"
      formId: string
    }

    const params = JSON.parse(message) as IRes

    interface IRet {
      num: number
    }

    const data: IRet = {
      num: params.num + 100
    }

    const formInfo = formBindingData.createFormBindingData(data)
    // 返回数据给对应的卡片
    formProvider.updateForm(params.formId, formInfo)
  }

};

const localStorage = new LocalStorage()

@Entry(localStorage)
@Component
struct WidgetCard {
  // 接收onAddForm中返回的卡片Id
  @LocalStorageProp("formId")
  formId: string = "xxx"
  @LocalStorageProp("num")
  num: number = 100

  build() {
    Column() {
      // Button(this.formId)
      // Button("message" + this.num)
      //   .onClick(() => {
      //     postCardAction(this, {
      //       action: 'message',
      //       params: { num: this.num, aa: 200, formId: this.formId }
      //     });
      //   })

      Button("A页面")
        .onClick(() => {
          postCardAction(this, {
            action: 'router',
            abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            params: {
              targetPage: 'pages/PageA',
            }
          });
        })
      Button("B页面")
        .onClick(() => {
          postCardAction(this, {
            action: 'router',
            abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            params: {
              targetPage: 'pages/PageB',
            }
          });
        })

    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { router, window } from '@kit.ArkUI';
import { formInfo } from '@kit.FormKit';

export default class EntryAbility extends UIAbility {
  // 要跳转的页面 默认是首页
  targetPage: string = "pages/Index"

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    // 判断是否带有formId 因为我们直接点击图标，也会拉起应用，此时不会有formId
    if (want.parameters && want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
      // 获取卡片的formId
      const formId = want.parameters![formInfo.FormParam.IDENTITY_KEY].toString();
      // 获取卡片传递过来的参数
      interface IData {
        targetPage: string
      }

      const params: IData = (JSON.parse(want.parameters?.params as string))
      this.targetPage = params.targetPage
      //   我们也可以在这里通过 updateForm(卡片id，数据) 来返回内容给卡片
    }
  }

  // 如果应用已经在运行，卡片的router事件不会再触发onCreate，会触发onNewWant
  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    const formId = want.parameters![formInfo.FormParam.IDENTITY_KEY].toString();
    // 获取卡片传递过来的参数
    interface IData {
      targetPage: string
    }

    const params: IData = (JSON.parse(want.parameters?.params as string))
    this.targetPage = params.targetPage
    // 跳转页面
    router.pushUrl({
      url: this.targetPage
    })
    //   我们也可以在这里通过 updateForm(卡片id，数据) 来返回内容给卡片
  }


  onWindowStageCreate(windowStage: window.WindowStage): void {

    // 跳转到对应的页面
    windowStage.loadContent(this.targetPage, (err) => {
      if (err.code) {
        return;
      }
    });
  }


  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

{
  "module": {
	// ...
    "requestPermissions": [
      {
        "name": "ohos.permission.KEEP_BACKGROUND_RUNNING"
      }
    ],

const localStorage = new LocalStorage()

@Entry(localStorage)
@Component
struct WidgetCard {
  // 接收onAddForm中返回的卡片Id
  @LocalStorageProp("formId")
  formId: string = "xxx"
  @LocalStorageProp("num")
  num: number = 100

  build() {
    Column() {
      Button("call事件" + this.num)
        .onClick(() => {
          postCardAction(this, {
            action: 'call',
            abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
            params: {
              // 如果事件类型是call，必须传递method属性，用来区分不同的事件
              method: "inc",
              formId: this.formId,
              num: this.num,
            }
          });
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { router, window } from '@kit.ArkUI';
import { formBindingData, formInfo, formProvider } from '@kit.FormKit';
import { rpc } from '@kit.IPCKit';

// 占位 防止语法出错，暂无实际作用
class MyParcelable implements rpc.Parcelable {
  marshalling(dataOut: rpc.MessageSequence): boolean {
    return true
  }

  unmarshalling(dataIn: rpc.MessageSequence): boolean {
    return true
  }
}


export default class EntryAbility extends UIAbility {
  // 要跳转的页面 默认是首页
  targetPage: string = "pages/Index"

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    //   监听call事件中的特定方法
    this.callee.on("inc", (data: rpc.MessageSequence) => {
      // data中存放的是我们的参数
      params: {
        // 如果事件类型是call，必须传递method属性，用来区分不同的事件
        // method: "inc",
        // formId: this.formId,
        // num: this.num,
        interface IRes {
          formId: string
          num: number
        }

        // 读取参数
        const params = JSON.parse(data.readString() as string) as IRes

        interface IData {
          num: number
        }

        // 修改数据
        const info: IData = {
          num: params.num + 100
        }
        // 响应数据
        const dataInfo = formBindingData.createFormBindingData(info)
        formProvider.updateForm(params.formId, dataInfo)
      }

      // 防止语法报错，暂无实际应用
      return new MyParcelable()
    })

  }


  onWindowStageCreate(windowStage: window.WindowStage): void {

    // 跳转到对应的页面
    windowStage.loadContent(this.targetPage, (err) => {
      if (err.code) {
        return;
      }
    });
  }


  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}