HarmonyOS 鸿蒙next 实现自定义启动页

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

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

/**
* 将窗口设置为全屏
* [@param](/user/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](/user/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();
}

运行效果如下:

image.png


更多关于HarmonyOS 鸿蒙next 实现自定义启动页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!