参考相关概念知识点文档
UIAbility是系统调度的最小单元。在设备内的功能模块之间跳转时，会涉及到启动特定的UIAbility，包括应用内的其他UIAbility、或者其他应用的UIAbility（例如启动三方支付UIAbility）
UIAbility的启动分为两种情况：UIAbility冷启动和UIAbility热启动。
- UIAbility冷启动：指的是UIAbility实例处于完全关闭状态下被启动，这需要完整地加载和初始化UIAbility实例的代码、资源等。
- UIAbility热启动：指的是UIAbility实例已经启动并在前台运行过，由于某些原因切换到后台，再次启动该UIAbility实例，这种情况下可以快速恢复UIAbility实例的状态。
目标UIAbility冷启动
目标UIAbility冷启动时，在目标UIAbility的onCreate()生命周期回调中，接收调用方传过来的参数。然后在目标UIAbility的onWindowStageCreate()生命周期回调中，解析调用方传递过来的want参数，获取到需要加载的页面信息url，传入windowStage.loadContent()方法
目标UIAbility热启动
在应用开发中，会遇到目标UIAbility实例之前已经启动过的场景，这时再次启动目标UIAbility时，不会重新走初始化逻辑，只会直接触发onNewWant()生命周期方法。为了实现跳转到指定页面，需要在onNewWant()中解析参数进行处理。
启动页效果图
3s倒计时后进入下一个页面。。。
代码实现
// 路由替换成 Navigation【我博文前面有提到】 即可我这里是图个方便（用目前这个也行就是官方不推荐使用了）
import { router, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
timeId?: number; // 定时器
@State num: number = 3; // 倒计时
/**
* 页面显示时，开始倒计时
*/
onPageShow() {
this.setImmersive();
this.countDown();
}
/**
* 沉浸式状态栏
*/
private setImmersive() {
window.getLastWindow(getContext()).then(win => {
win.setWindowLayoutFullScreen(true);
let area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
let height = area.topRect.height;
let viewHeight = px2vp(height);
AppStorage.setOrCreate('topHeight', viewHeight);
win.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff' }); // 设置状态栏字体颜色
});
}
/**
* 把倒计时封装方法
*/
private countDown() {
let timeId = setInterval(() => {
this.num--;
if (this.num === 0) {
clearInterval(this.timeId);
this.navigateToNextPage(); // 跳转到下一页
}
}, 1000);
this.timeId = timeId;
}
/**
* 清除定时器并跳转下一页
*/
private clearTimerAndNavigate() {
clearInterval(this.timeId);
this.navigateToNextPage();
}
/**
* 跳转下一页
*/
private navigateToNextPage() {
router.pushUrl({ url: 'pages/Login' }).then(() => {
console.info('跳转到第二页。');
}).catch((err: BusinessError) => {
console.error(`无法跳转到第二页。错误码为${err.code}, 错误消息 ${err.message}`);
});
}
/**
* 页面销毁时，清除定时器
*/
onDestroy() {
this.num = 3;
clearInterval(this.timeId);
}
build() {
RelativeContainer() {
Row() {
Text(`${this.num}s | 跳转`).fontColor('#fff')
}
.justifyContent(FlexAlign.Center)
.height(40).width(80).backgroundColor('#e22418')
.borderRadius(20)
// 锚点设置 用于指定锚点信息。ID默认为“__container__”
.alignRules({
right:{
anchor: '__container__',
align: HorizontalAlign.End
},
top:{
anchor: '__container__',
align:VerticalAlign.Top
}
})
// 子组件经过相对位置对齐后，位置可能还不是目标位置，开发者可根据需要进行额外偏移设置offset
.offset({
x:-20,
y:10
})
Image('https://img.guguzhu.com/d/file/20200603/1591190104316843.png')
.height(89)
.alignRules({
top: {
anchor: '__container__',
align: VerticalAlign.Center
},
left: {
anchor: '__container__',
align: HorizontalAlign.Center
}
})
// 由于logo占据了宽度和高度，要居中，还要偏移宽度和高度的一半，才是正居中位置
.offset({
x: -44,
y: -44
})
.borderRadius(40)
}
.width('100%')
.height('100%')
}
}
核心知识点梳理
- 相对布局
- 倒计时
- 生命周期
- 路由
- 沉浸式体验
