ArkUI in Action:: 02 - Service Card Development

Introduction

Service cards are always-on desktop widgets that can be placed on the desktop, for example, with a single touch.

There are two types of service cards: static cards and dynamic cards. This topic describes static cards.

Create

Go back to DevEco, right-click in the 'entry' directory, click Create Service Widget, select 'Static Widget', and click Next.

! [alt text] (image-5.png)

Enter a name, select a supported card size, and click OK to create a card.

where 22 represents 2 rows and 2 columns, and 12 represents 1 row and 2 columns.

! [alt text] (image-4.png)

Write card interface

Interactions

Click on the event parameters

The interface is written in ArkUI, but instead of using click events, you should use FormLink, which is accepted on the formability side, and calls router.push to open different pages with different parameters.

    FormLink({
      action: this.ACTION_TYPE,
      abilityName: this.ABILITY_NAME,
      params: {
        action: this.MESSAGE
      }
    }) {
    ...
    }

Parameter receiving

'onCreate' and 'onNewWant' lifecycles in 'entryability'

  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {

    if(want?.parameters?.params) {
      let params: Record<string, Object> = JSON.parse(want.parameters.params as string);
      this.selectPage = params.action as string;
      console.log("selectPage", this.selectPage);
    }
  }

  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    console.log('onNewWant');
    if (want?.parameters?.params) {
      // want.parameters.params 对应 postCardAction() 中 params 内容
      let params: Record<string, Object> = JSON.parse(want.parameters.params as string);
      this.selectPage = params.action as string;
      hilog.info(DOMAIN_NUMBER, TAG, `onNewWant selectPage: ${this.selectPage}`);
    }
    if (this.currentWindowStage !== null) {
      this.onWindowStageCreate(this.currentWindowStage);
    }
  }

Precautions

1. When running, please use the normal mode, the service card does not support HotReload, and the card cannot be displayed normally in the hot reload mode.

References

• Service Card Document