当前位置：首页 > article >正文

HarmonyOS 实现自定义启动页

article 2024/9/20 9:40:56

请添加图片描述

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的全栈工程师
欢迎分享 / 收藏 / 赞 / 在看！

要在 HarmonyOS 中实现自定义启动页，需要在项目中 Ability 的 onWindowStageCreate 和 onWindowStageRestore 方法中获取应用主窗口，并通过调用窗口强制全屏布局接口 setWindowLayoutFullScreen 将窗口设置为全屏。

/**
 * 将窗口设置为全屏
 * @param windowStage
 */
setFullSize(windowStage: window.WindowStage) {
    let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
    // 设置窗口全屏
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
        .then(() => {
            console.info('Succeeded in setting the window layout to full-screen mode.');
        })
        .catch((err: BusinessError) => {
            console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
        });
}

新建启动页 Splash.ets ，在该页面中的 aboutToAppear 生命周期钩子中使用 timer 定时器，实现延时跳转功能。最后在组件结构销毁之前的 aboutToDisappear 生命周期钩子中销毁 timer 定时器。

@State countdown: number = 5; // 倒计时，默认 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.replaceUrl({
    url: 'pages/Index'
  });
}

/**
 * 组件结构销毁之前时
 */
aboutToDisappear() {
  // 清除定时器
  this.clearTiming();
}