基于窗口能力,实现验证码登录的场景,主要完成以下功能:
- 登录页面主窗口实现沉浸式。
- 输入用户名和密码后,拉起验证码校验子窗口。
- 验证码校验成功后,主窗口跳转到应用首页。
登录界面实现沉浸式
完成登录界面布局的编写,并实现沉浸式效果。步骤如下:
- 获取主窗口window实例。
- 设置主窗口全屏显示。
- 设置状态栏与导航栏不显示,其中names参数决定状态栏、导航栏显示状态,如需全部显示,该参数设置为[‘status’, ‘navigation’];如需隐藏,则设置为空。
// WindowModel.ets
setMainWindowImmersive() {
if (this.windowStage === undefined) {
Logger.error('windowStage is undefined.');
return;
}
// 获取主窗口window实例
this.windowStage.getMainWindow((err, windowClass: window.Window) => {
if (err.code) {
Logger.error(`Failed to obtain the main window. Code:${err.code}, message:${err.message}`);
return;
}
// 设置主窗口全屏显示
windowClass.setWindowLayoutFullScreen(true, (err) => {
if (err.code) {
Logger.error(`Failed to set full-screen mode. Code:${err.code}, message:${err.message}`);
return;
}
});
// 设置状态栏与导航栏不显示
windowClass.setWindowSystemBarEnable([], (err) => {
if (err.code) {
Logger.error(`Failed to set the system bar to be invisible. Code:${err.code}, message:${err.m