【HarmonyOSNext】靜態服務卡片

簡介

服務卡片框架提供了FormExtensionAbility基類，通過繼承此基類，實現調用服務卡片的生命周期函數，來實現具體卡片的功能。

開放了屬性動畫和顯式動畫，增加了自定義繪制的能力，可以使用Canvas畫布組件自定義繪制和構建更多樣的顯示和交互效果。允許卡片中運行邏輯代碼，業務邏輯可以在卡片內部自閉環。

不支持功能

不支持導入共享包。
不支持native語言，僅支持聲明式范式的部分組件、事件、動效、數據管理、狀態管理和API能力。
暫不支持極速預覽。
暫不支持setTimeOut。

工程目錄

新建流程

選擇靜態服務窗口

選擇項目模板

設置卡片名稱、簡介、模塊大小等

根據選擇的樣板，自動添加卡片項目相關文件

默認的預覽視圖

卡片事件（靜態卡片）

需要使用FromLink容器來實現服務卡片和App之間的交互，支持router、message和call三種類型的事件。

參數名	參數類型	必填	參數描述
action	string	是	action的類型，支持三種預定義的類型： - router：跳轉到提供方應用的指定UIAbility。 - message：自定義消息，觸發后會調用提供方FormExtensionAbility的 onFormEvent()生命周期回調。 - call：后臺啟動提供方應用。觸發后會拉起提供方應用的指定UIAbility（僅支持launchType為 singleton的UIAbility，即啟動模式為單實例的UIAbility），但不會調度到前臺。提供方應用需要具備后臺運行權限( ohos.permission.KEEP_BACKGROUND_RUNNING)。說明：不推薦使用router事件刷新卡片UI。
moduleName	string	否	action為router / call 類型時跳轉的模塊名。
bundleName	string	否	action為router / call 類型時跳轉的包名。
abilityName	string	否	action為router / call 類型時跳轉的UIAbility名。
uri	string	否	action為router 類型時跳轉的UIAbility的統一資源標識符。uri和abilityName同時存在時，abilityName優先。
params	Object	否	當前action攜帶的額外參數，內容使用JSON格式的鍵值對形式。call 類型時需填入參數'method'，且類型需要為string類型，用于觸發UIAbility中對應的方法。說明：不推薦通過params傳遞卡片內部的狀態變量。

案例代碼

實現效果

項目架構

DateUtil.ets

export class DateUtil {
  /**
   * 返回時間
   * @param date
   * @returns 14:53樣式的時間
   */
  static ToTime(date: Date): string {
    if (date == null) {
      return "";
    }
    return `${DateUtil.PrefixInteger(date.getHours(), 2)}:${DateUtil.PrefixInteger(date.getMinutes(), 2)}`
  }

  /**
   * 返回月份和周幾
   * @param date
   * @returns 返回6月17日(周一)的樣式
   */
  static ToMonthDay(date: Date): string {
    if (date == null) {
      return "";
    }
    const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
    return `${date.getMonth() + 1}月${date.getDate()}日(${weekDays[date.getDay()]})`
  }

  static PrefixInteger(num: number, length: number) {
    return (Array(length).join('0') + num).slice(-length);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

Ticket_WidgetCard.ets

import { TicketShow_ViewModel } from '../viewmodel/TicketShow_ViewModel'
import { TicketShow_View } from '../view/TicketShow_view'

@Entry
@Component
struct Ticket_WidgetCard {
  /*
   * action的類型
   */
  readonly ACTION_TYPE: string = 'router';
  /*
   * action為router / call 類型時跳轉的UIAbility名
   */
  readonly ABILITY_NAME: string = 'EntryAbility';
  /*
   * The message.
   */
  readonly MESSAGE: string = 'add detail';
  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';
  @State ticketShowVM: TicketShow_ViewModel = new TicketShow_ViewModel(
    "G6357",
    new Date(2024, 5, 17, 14, 33),
    new Date(2024, 5, 17, 20, 0),
    "鳳凰古城",
    "廣州",
    "二等車 06車 05F號");

  build() {
    FormLink({
      action: this.ACTION_TYPE,
      abilityName: this.ABILITY_NAME,
      params: {
        message: this.MESSAGE
      }
    }) {
      Stack({ alignContent: Alignment.BottomEnd }) {
        TicketShow_View({
          viewModel: this.ticketShowVM
        })
          .margin(10)
        Image($r('app.media.railway'))
          .height(80)
          .opacity(0.3)
          .margin({ bottom: 10, right: 20 })
      }
      .height(this.FULL_HEIGHT_PERCENT)
      .width("100%")
      .backgroundColor('#00000000')
      .linearGradient({
        angle: 90,
        colors: [["#1f82ca", 0.0], ["#24c8df", 1.0]]
      })
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.

TicketShow_view.ets

import { DateUtil } from '../../common/DateUtil';
import { TicketShow_ViewModel, TicketStage } from '../viewmodel/TicketShow_ViewModel'

@Component
export struct TicketShow_View {
  @ObjectLink viewModel: TicketShow_ViewModel
  /**
   * 字體顏色
   */
  readonly TEXT_COLOR: ResourceColor = Color.White;

  build() {
    Column() {
      Row() {
        Column() {
          Text(DateUtil.ToTime(this.viewModel.BoardingTime))
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor(this.TEXT_COLOR)

          Text(this.viewModel.BoardingAddress)
            .fontSize(14)
            .margin({ top: 5 })
            .fontColor(this.TEXT_COLOR)
        }
        .height("100%")
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.Start)

        Column() {
          Text(this.viewModel.Id)
            .fontSize(14)
            .fontColor(this.TEXT_COLOR)
          Path()
            .commands('M0 0 L300 0 L270 -10 L270 0 Z')
            .margin({ top: 4 })
            .strokeWidth(1)
            .fill(this.TEXT_COLOR)
            .stroke(this.TEXT_COLOR)
          Text(DateUtil.ToMonthDay(this.viewModel.BoardingTime))
            .fontSize(12)
            .margin({ top: 5 })
            .fontColor(this.TEXT_COLOR)
        }
        .height("100%")
        .layoutWeight(2)
        .justifyContent(FlexAlign.Start)

        Column() {
          Text(DateUtil.ToTime(this.viewModel.ArrivalTime))
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor(this.TEXT_COLOR)
          Text(this.viewModel.ArrivalAddress)
            .fontSize(14)
            .margin({ top: 5 })
            .fontColor(this.TEXT_COLOR)
        }
        .height("100%")
        .layoutWeight(1)
        .alignItems(HorizontalAlign.End)
        .justifyContent(FlexAlign.Start)
      }
      .width("100%")
      .layoutWeight(2)
      .margin({ top: 20 })

      Column() {
        Text(this.viewModel.Position)
          .fontSize(12)
          .fontColor(this.TEXT_COLOR)
        Row() {
          Text("狀態：")
            .fontSize(12)
            .fontColor(this.TEXT_COLOR)
          Text(TicketStage[this.viewModel.Stage])
            .fontSize(12)
            .fontColor(this.TEXT_COLOR)
        }
        .margin({ top: 5 })
      }
      .width("100%")
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
    }
    .width("100%")
    .height("100%")

  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.

TicketShow_ViewModel.ets

/**
 * 展示組件的ViewModel
 */
@Observed
export class TicketShow_ViewModel {
  /**
   * 火車編號
   */
  public Id: string = '';
  /**
   * 開始時間
   */
  public BoardingTime: Date = new Date();
  /**
   * 到達時間
   */
  public ArrivalTime: Date = new Date();
  /**
   * 起始站
   */
  public BoardingAddress: string = "";
  /**
   * 終點站
   */
  public ArrivalAddress: string = "";
  /**
   * 座位
   */
  public Position: string = "";
  /**
   * 狀態
   */
  public Stage: TicketStage = TicketStage.待車

  constructor(
    id: string,
    boardingTime: Date,
    arrivalTime: Date,
    boardingAddress: string,
    arrivalAddress: string,
    position: string) {
    this.Id = id;
    this.BoardingTime = boardingTime;
    this.BoardingAddress = boardingAddress;
    this.ArrivalTime = arrivalTime;
    this.ArrivalAddress = arrivalAddress;
    this.Position = position;
  }

  public isDraft(): boolean {
    return true;
  }
}

/**
 * 車票狀態
 */
export enum TicketStage {
  待車,
  正在檢票,
  停止檢票
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

注意

里面的圖片是需要自己去下載的，暫未實現數據和程序聯動

posted on 2024-12-24 11:14 鐘子翔閱讀(34) 評論(0) 收藏舉報來源

刷新頁面返回頂部