鸿蒙元应用与卡片使用 @LocalStorageProp 进行通讯的技术分享原创

魔眼天王

发布于 2024-12-31 11:55

438浏览

1收藏

在鸿蒙系统（HarmonyOS）的开发中，@LocalStorageProp 是一个非常有用的装饰器，用于在组件之间共享状态或数据。特别是在卡片（Card）和元服务（Meta Service）之间进行通讯时，@LocalStorageProp 可以帮助我们实现数据的持久化和同步。本文将通过一个具体的案例，详细介绍如何使用 @LocalStorageProp 进行通讯。

案例背景

假设我们正在开发一个幸运号生成器应用，其中包含一个卡片组件 LotteryNumbersWidgetCard。这个卡片组件需要显示生成的幸运号码，并且这些号码需要在不同的卡片实例之间共享。为了实现这一功能，我们可以使用 @LocalStorageProp 来存储和同步幸运号码。

案例代码分析

以下是我们提供的 LotteryNumbersWidgetCard.ets 文件的内容，其中展示了如何使用 @LocalStorageProp 进行通讯。


import { GenerateLotteryUtil } from '../../util/GenerateLotteryUtil';
import { LogUtil } from '../../util/LogUtil';

@Entry
@Component
struct LotteryNumbersWidgetCard {
  @LocalStorageProp('lotteryType') lotteryType: string = "5+2"
  @LocalStorageProp('lotteryNumArr') lotteryNumArr: string[] = ['11 12 13 14 15 16', '21']
  @State x: number = 1
  @State y: number = 1
  /*
   * The title.
   */
  readonly TITLE: string = 'Hello World';
  /*
   * The action type.
   */
  readonly ACTION_TYPE: string = 'router';
  /*
   * The ability name.
   */
  readonly ABILITY_NAME: string = 'EntryAbility';
  /*
   * The message.
   */
  readonly MESSAGE: string = 'add detail';
  /*
   * The width percentage setting.
   */
  readonly FULL_WIDTH_PERCENT: string = '100%';
  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';

  aboutToAppear(): void {

  }

  aboutToDisappear(): void {
    LogUtil.i("aboutToDisappear：postCardAction")
    postCardAction(this, {
      action: "lotteryFormState", params: { lotteryType: this.lotteryType, lotteryNumArr: this.lotteryNumArr }
    })
  }

  build() {
    Row() {
      Column() {

        Text() {
          Span(this.lotteryNumArr[0]).fontSize(22).fontColor('#ff0000')
          Span('   ')
          Span(this.lotteryNumArr[1])
            .fontSize(26)
            .fontColor('#ff001aff')
        }
        .padding({
          left: 10,
          right: 10,
          bottom: 15,
        })
        .margin({ left: 10, right: 10 })
        .borderRadius(10)
        .backgroundColor(Color.White)
        .width('100%')
        .textAlign(TextAlign.Center)

        Button('生成幸运号码', { type: ButtonType.Capsule, stateEffect: true })
          .onClick(() => {
            this.x = 1.1
            this.y = 1.1
            this.lotteryNumArr = GenerateLotteryUtil.generateLottery(this.lotteryType)
          })
          .animation({
            curve: Curve.EaseOut,
            playMode: PlayMode.AlternateReverse,
            duration: 200,
            onFinish: () => {
              this.x = 1
              this.y = 1
            }
          })

      }
      .width(this.FULL_WIDTH_PERCENT)
    }
    .height(this.FULL_HEIGHT_PERCENT)
    .onClick(() => {
      postCardAction(this, {
        action: this.ACTION_TYPE,
        abilityName: this.ABILITY_NAME,
        params: {
          message: this.MESSAGE
        }
      });
    })
  }
}


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.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.

关键点解析

3.1. 使用 @LocalStorageProp

在上述代码中，@LocalStorageProp 装饰器用于定义需要持久化的属性。这些属性会在组件实例之间共享，并且在应用重启后仍然保留其值。

@LocalStorageProp('lotteryType') lotteryType: string = "5+2"
@LocalStorageProp('lotteryNumArr') lotteryNumArr: string[] = ['11 12 13 14 15 16', '21']
1.
2.

lotteryType: 定义了幸运号码的类型，默认值为 “5+2”。
lotteryNumArr: 定义了生成的幸运号码数组，默认值为 [‘11 12 13 14 15 16’, ‘21’]。
3.2. 数据更新与同步

当用户点击“生成幸运号码”按钮时，会调用 GenerateLotteryUtil.generateLottery(this.lotteryType) 方法生成新的幸运号码，并更新 lotteryNumArr 属性。

Button('生成幸运号码', { type: ButtonType.Capsule, stateEffect: true })
  .onClick(() => {
    this.x = 1.1
    this.y = 1.1
    this.lotteryNumArr = GenerateLotteryUtil.generateLottery(this.lotteryType)
  })
1.
2.
3.
4.
5.
6.

由于 lotteryNumArr 使用了 @LocalStorageProp 装饰器，其值会被自动持久化，并在其他卡片实例中同步更新。

3.3. 生命周期方法

在 aboutToDisappear 生命周期方法中，通过 postCardAction 方法将当前的 lotteryType 和 lotteryNumArr 发送到卡片动作中。

aboutToDisappear(): void {
  LogUtil.i("aboutToDisappear：postCardAction")
  postCardAction(this, {
    action: "lotteryFormState", params: { lotteryType: this.lotteryType, lotteryNumArr: this.lotteryNumArr }
  })
}
1.
2.
3.
4.
5.
6.