#鸿蒙技术#打造精美的鸿蒙启动页面：主动倒计时与手动跳过技巧
先容启动页作为应用程序初次出现的页面，通常用于展示应用的启动画面，提供用户体验的平滑过渡，同时可以提供安插广告，或者美化应用的作用等。
启动页面更改
在项目的module.json5文件中找到"abilities"
[*]找到名叫 Entryability.ts 的文件，找到 windowStage.loadContent() 这个方法，圈出来的就是默认启动页面
[*]默认启动页必要在 main_pages.json 这个文件中设置过才行
如图所示
https://i-blog.csdnimg.cn/img_convert/467ba684d5ed38b2ea435da4ca9ef8e8.png
在Entryability中找到windowStage.loadContent，将页面更换为自己想要的启动页面。
https://i-blog.csdnimg.cn/img_convert/76aaf45e160ca5de6a1230d476cdafcc.png
自定义启动页面
定义状态和属性
@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%')
}
}
https://i-blog.csdnimg.cn/img_convert/ef7d39d907f6712baaac43ddb9b44243.jpeg
之后就跳转到了主页面，通过这些功能，用户可以在初始页面等候一段时间后主动跳转到主页面，或者选择手动跳过等候时间。希望可以帮到各人。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]