基于窗口能力,实现验证码登录的场景,主要完成以下功能:
完成登录界面布局的编写,并实现沉浸式效果。步骤如下:
// 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.message}`);
return;
}
});
});
}
在这个章节中,我们需要完成验证码界面的编写,并实现输入用户名和密码后,点击验证码按钮,拉起验证码子窗口。步骤如下:
// WindowModel.ets
createSubWindow() {
if (this.windowStage === undefined) {
Logger.error('Failed to create the subWindow.');
return;
}
// 创建子窗口
this.windowStage.createSubWindow(CommonConstants.SUB_WINDOW_NAME, (err, data: window.Window) => {
if (err.code) {
Logger.error('Failed to create the window. Cause: ' + JSON.stringify(err));
return;
}
// 获取子窗口实例
this.subWindowClass = data;
// 获取屏幕宽高
let screenWidth = display.getDefaultDisplaySync().width;
let screenHeight = display.getDefaultDisplaySync().height;
// 根据子窗口宽高比计算子窗口宽高
let windowWidth = screenWidth * CommonConstants.SUB_WINDOW_WIDTH_RATIO;
let windowHeight = windowWidth / CommonConstants.SUB_WINDOW_ASPECT_RATIO;
// 计算子窗口起始坐标
let moveX = (screenWidth - windowWidth) / 2;
let moveY = screenHeight - windowHeight;
// 将子窗口移动到起始坐标处
this.subWindowClass.moveWindowTo(moveX, moveY, (err) => {
if (err.code) {
Logger.error('Failed to move the window. Cause:' + JSON.stringify(err));
return;
}
});
// 设置子窗口的宽高
this.subWindowClass.resize(windowWidth, windowHeight, (err) => {
if (err.code) {
Logger.error('Failed to change the window size. Cause:' + JSON.stringify(err));
return;
}
});
// 设置子窗口展示的页面内容
this.subWindowClass.setUIContent(CommonConstants.VERIFY_PAGE_URL, (err) => {
if (err.code) {
Logger.error('Failed to load the content. Cause:' + JSON.stringify(err));
return;
}
if (this.subWindowClass === undefined) {
Logger.error('subWindowClass is undefined.');
return;
}
// 设置子窗口背景颜色
this.subWindowClass.setWindowBackgroundColor('#00000000');
// 显示子窗口
this.subWindowClass.showWindow((err) => {
if (err.code) {
Logger.error('Failed to show the window. Cause: ' + JSON.stringify(err));
return;
}
});
});
});
}
使用resize接口的相关限制:
应用主窗口与子窗口存在大小限制,宽度范围:[320, 2560],高度范围:[240, 2560],单位为vp。
系统窗口存在大小限制,宽度范围:[0, 2560],高度范围:[0, 2560],单位为vp。
全屏模式窗口不支持该操作。
在这个章节中,我们需要完成登录后界面布局的编写,并实现验证成功跳转的功能。主要涉及以下两个方面:
子窗口使用完毕后,需要调用destroyWindow对其进行销毁。
// WindowModel.ets
destroySubWindow() {
if (this.subWindowClass === undefined) {
Logger.error('subWindowClass is undefined.');
return;
}
this.subWindowClass.destroyWindow((err) => {
if (err.code) {
Logger.error(`Failed to destroy the window. Code:${err.code}, message:${err.message}`);
return;
}
});
}
验证码校验子窗口通过公共事件EventHub通知登录主窗口跳转。首先,在登录主窗口aboutToAppear方法中定义公共事件。
// LoginPage.ets
aboutToAppear() {
getContext(this).eventHub.on(CommonConstants.HOME_PAGE_ACTION, () => {
router.replaceUrl({
url: CommonConstants.HOME_PAGE_URL
}).catch((err: Error) => {
Logger.error(`pushUrl failed, message:${err.message}`);
});
});
}
然后,在验证成功后,将子窗口进行销毁,并通过eventHub的emit触发公共事件,跳转到首页。
// SuccessPage.ets
aboutToAppear() {
setTimeout(() => {
WindowModel.getInstance().destroySubWindow();
getContext(this).eventHub.emit(CommonConstants.HOME_PAGE_ACTION);
}, CommonConstants.LOGIN_WAIT_TIME);
}
本文主要是对基于窗口能力,实现验证码登录的场景。有关鸿蒙的进阶技能大家可以前往主页查看更多,鸿蒙的技术路线分布如下:
以上为(略缩版)高清完整版路线图可以前往主页寻找保存(附鸿蒙4.0文档)
最终效果如下: