打造精美的鸿蒙启动页面：自动倒计时与手动跳过技巧原创

在敲键盘的小鱼干很饥饿

发布于 2024-12-10 17:48

1.2w浏览

4收藏

介绍

启动页作为应用程序首次出现的页面，通常用于展示应用的启动画面，提供用户体验的平滑过渡，同时可以提供安插广告，或者美化应用的作用等。

启动页面更改

在项目的module.json5文件中找到"abilities"

找到名叫 Entryability.ts 的文件，找到 windowStage.loadContent() 这个方法，圈出来的就是默认启动页面
默认启动页需要在 main_pages.json 这个文件中配置过才行
如图所示

在Entryability中找到windowStage.loadContent，将页面替换为自己想要的启动页面。

自定义启动页面

定义状态和属性

  @State countdown: number = 3; // 倒计时，默认 3 秒
  readonly DURATION: number = 1000; // 倒计时间隔，1000 毫秒（1 秒）
  private timer: number = 0; // 定时器
1.
2.
3.

@State countdown 是一个状态变量，表示倒计时的时间，初始值为 3 秒。
DURATION 是一个只读属性，表示倒计时的间隔时间，1000 毫秒（1 秒）。
timer 是一个私有变量，用于存储定时器的 ID。

页面生命周期方法

  aboutToAppear(): void {
    this.startTiming(); // 页面出现时开始倒计时
  }

  aboutToDisappear() {
    this.clearTiming(); // 清除定时器
  }
1.
2.
3.
4.
5.
6.
7.

aboutToAppear 是页面即将出现时调用的生命周期方法，在这里调用 startTiming 方法开始倒计时。
aboutToDisappear 是页面即将消失时调用的生命周期方法，在这里清除定时器。

定时跳转

/**
   * 开始倒计时
   */
  startTiming() {
    // 设置时间间隔
    this.timer = setInterval(() => {
      this.countdown--;
      if (this.countdown === 0) {
        this.clearTiming(); // 倒计时结束，清除定时器
        this.jumpToMainPage(); // 跳转到主页面
      }
    }, this.DURATION);
  }

  /**
   * 清除定时器
   */
  clearTiming() {
    if (this.timer !== null) {
      clearInterval(this.timer);
      this.timer = 0;
    }
  }

  /**
   * 跳转到主页
   */
  jumpToMainPage() {
    this.clearTiming(); // 清除定时器
    router.replace({
      uri: 'pages/Index' // 跳转的主页 URI
    });
  }
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.

startTiming 方法设置了一个定时器，每隔 DURATION 毫秒（1 秒）执行一次回调函数。
在回调函数中，countdown 减 1，-如果 countdown 为 0，则清除定时器并跳转到主页面。
clearTiming 方法用于清除定时器，防止内存泄漏。
jumpToMainPage 方法首先清除定时器，然后使用router.replace 方法跳转到主页面。

构建布局+完整代码

import router from '@system.router';
import  {logoView} from '../views/logoView'

@Entry
@Component
struct InitNavigationPage {
  @State countdown: number = 3; // 倒计时，默认 5 秒
  readonly DURATION: number = 1000; // 倒计时间隔
  private timer: number = 0; // 定时器

  aboutToAppear(): void {
    this.startTiming(); // 页面出现时开始倒计时
  }

  /**
   * 开始倒计时
   */
  startTiming() {
    // 设置时间间隔
    this.timer = setInterval(() => {
      this.countdown--;
      if (this.countdown === 0) {
        this.clearTiming(); // 倒计时结束，清除定时器
        this.jumpToMainPage(); // 跳转到主页面
      }
    }, this.DURATION);
  }

  /**
   * 清除定时器
   */
  clearTiming() {
    if (this.timer !== null) {
      clearInterval(this.timer);
      this.timer = 0;
    }
  }

  /**
   * 跳转到主页
   */
  jumpToMainPage() {
    this.clearTiming(); // 清除定时器
    router.replace({
      uri: 'pages/Tabs' // 跳转的主页 URI
    });
  }

  /**
   * 组件结构销毁之前时
   */
  aboutToDisappear() {
    // 清除定时器
    this.clearTiming();
  }
  build() {
    Column() {
      Row() {
        Text(`跳过 | ${this.countdown}s`)
          .height(32)
          .fontSize(14)
          .borderRadius(6)
          .fontColor(Color.Black)
          .onClick(() => {
            this.clearTiming()
            this.jumpToMainPage()
          })
      }
      .width('90%')
      .justifyContent(FlexAlign.End)
          
      logoView()
      Row() {
        Image($r("app.media.font1"))
          .width(80)
          .height('100%')
      }
      .width('100%')
      .height(27)
      .margin({ top: 12 })
      .justifyContent(FlexAlign.Center)

      Blank()

      Row() {
        Image($r("app.media.font2"))
          .width(212)
          .height('100%')
      }
      .width('100%')
      .height(29)
      .margin({ bottom: 235 })
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
    }
    .backgroundColor($r("app.color.background_color"))
    .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.
93.
94.
95.
96.
97.
98.
99.
100.