HarmonyOS 页面倒计时怎么实现

EntryAbility.ets中的在onWindowStageCreate()回调中通过loadContent()方法设置应用要加载的页面

参考案例:

https://gitee.com/harmonyos/codelabs/tree/master/Healthy_life

onWindowStageCreate(windowStage: window.WindowStage) {
  // Main window is created, set main page for this ability
  GlobalContext.getContext().setObject('isForeground', true);
  /**
   * 在onWindowStageCreate()回调中通过loadContent()方法设置应用要加载的页面
   */
  windowStage.loadContent('pages/AdvertisingPage', (err, data) => { //启动页
    if (err.code) {
      Logger.error('windowStage', 'Failed to load the content. Cause:' + JSON.stringify(err));
      return;
    }
    Logger.info('windowStage', 'Succeeded in loading the content. Data: ' + JSON.stringify(data));
  });
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

//AdvertisingPage.ets


import router from '@ohos.router';
import { CommonConstants as Const } from '../common/constants/CommonConstants';

@Entry
@Component
struct AdvertisingPage {
  @State duration: number = Const.AD_DURATION;
  private intervalId: number = -1;

  goToHomePage() {
    clearInterval(this.intervalId);
    router.replaceUrl({ url: 'pages/MainPage' });
  }

  aboutToAppear() {
    // 定时器设置5秒时间，5秒结束后跳转home页或者点击取消按钮直接进入home页
    this.intervalId = setInterval(() => {
      if (this.duration > 0) {
        this.duration -= 1;
      } else {
        this.goToHomePage();
      }
    }, Const.DURATION_1000)
  }

  build() {
    Column() {
      Row() {
        Text($r('app.string.jump_ad', this.duration))
          .fontSize($r('app.float.default_12'))
          .fontColor($r('app.color.white'))
          .borderRadius($r('app.float.default_16'))
          .letterSpacing(Const.LETTER_1)
          .height($r('app.float.default_36'))
          .backgroundColor('rgba(0,0,0,0.20)')
          .border({ color: $r('app.color.white'), width: $r('app.float.default_1') })
          .margin({ top: $r('app.float.default_36') })
          .padding($r('app.float.default_8'))
          .onClick(() => this.goToHomePage())
      }
      .width('90%')
      .justifyContent(FlexAlign.End)

      Row() {
        Image($r('app.media.logo'))
          .width($r('app.float.default_56'))
          .height($r('app.float.default_56'))
          .objectFit(ImageFit.Contain)
        Column({ space: Const.SPACE_4 }) {
          Text($r('app.string.EntryAbility_label'))
            .fontFamily($r('app.string.HarmonyHeiTi_Bold'))
            .fontSize($r('app.float.default_26'))
            .fontColor($r('app.color.titleColor'))
            .fontWeight(Const.FONT_WEIGHT_700)
            .letterSpacing(Const.LETTER_1)
          Text($r('app.string.EntryAbility_desc'))
            .fontFamily($r('app.string.HarmonyHeiTi'))
            .fontColor($r('app.color.titleColor'))
            .fontWeight(Const.FONT_WEIGHT_400)
            .letterSpacing(Const.LETTER_34)
            .opacity(Const.OPACITY_4)
            .fontSize($r('app.float.default_16'))
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: $r('app.float.default_12') })
      }
      .height($r('app.float.default_100'))
      .width('100%')
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundImagePosition({x: 0, y: 0})
    .backgroundImage($r('app.media.ic_ad_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
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.