HarmonyOS 实现自定义启动页

请添加图片描述

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

要在 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();
}