openHarmony设置初始启动页面，初始跳转页面（详细攻略+实现案例） 原创

介绍

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

启动页面更改

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

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

自定义启动页面

定义状态和属性

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

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

页面生命周期方法

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

  aboutToDisappear() {
    this.clearTiming(); // 清除定时器
  }

• 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
    });
  }

• 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%')
  }
}

之后就跳转到了主页面，通过这些功能，用户可以在初始页面等待一段时间后自动跳转到主页面，或者选择手动跳过等待时间。希望可以帮到大家。