环 境

2

环境搭建

3

代码结构解读

4

登录界面实现沉浸式

5

创建验证码校验子窗口

6

验证成功跳转到首页

7

总结

介绍

本篇Codelab基于窗口能力，实现验证码登录的场景，主要完成以下功能：

1. 登录页面主窗口实现沉浸式。

2. 输入用户名和密码后，拉起验证码校验子窗口。

3. 验证码校验成功后，主窗口跳转到应用首页。

相关概念

• 主窗口：应用主窗口用于显示应用界面，会在“任务管理界面”显示。

• 子窗口：应用子窗口用于显示应用的弹窗、悬浮窗等辅助窗口。

• 沉浸式：指对状态栏、导航栏等系统窗口进行控制，减少状态栏导航栏等系统界面的突兀感，从而使用户获得最佳体验的能力。

完整示例

gitee源码地址

源码下载

窗口管理（ArkTS）.zip

环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
• HarmonyOS SDK版本：API version 9及以上版本。

硬件要求

• 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
• HarmonyOS系统：3.1.0 Developer Release及以上版本。

环境搭建

1. 安装DevEco Studio，详情请参考下载和安装软件。
2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
   • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
   • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
3. 开发者可以参考以下链接，完成设备调试的相关配置：
   • 使用真机进行调试
   • 使用模拟器进行调试

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

No Preview

1. ├──entry/src/main/ets // 代码区
2. │ ├──common
3. │ │ ├──bean
4. │ │ │ ├──GridItem.ets // 首页网格数据实体类
5. │ │ │ └──VerifyItem.ets // 验证码数据实体类
6. │ │ ├──constants
7. │ │ │ └──CommonConstants.ets // 公共常量类
8. │ │ └──utils
9. │ │ └──Logger.ets // 公共日志类
10. │ ├──entryability
11. │ │ └──EntryAbility.ets // 程序入口类
12. │ ├──model
13. │ │ └──WindowModel.ets // 应用后端数据管理类
14. │ ├──pages
15. │ │ ├──HomePage.ets // 登录之后的首页
16. │ │ ├──LoginPage.ets // 登录页面
17. │ │ ├──SuccessPage.ets // 验证码校验成功页面
18. │ │ └──VerifyPage.ets // 输入验证码页面
19. │ └──viewmodel
20. │ └──WindowViewModel.ets // 应用界面数据管理类
21. └──entry/src/main/resources // 资源文件目录

登录界面实现沉浸式

在这个章节中，我们需要完成登录界面布局的编写，并实现沉浸式效果。步骤如下：

1. 获取主窗口window实例。

2. 设置主窗口全屏显示。

3. 设置状态栏与导航栏不显示，其中names参数决定状态栏、导航栏显示状态，如需全部显示，该参数设置为['status', 'navigation']；如需隐藏，则设置为空。

Preview

1. // WindowModel.ets
2. setMainWindowImmersive() {
3. // 获取主窗口window实例
4. this.windowStage.getMainWindow((err, windowClass: window.Window) => {
5. if (err.code) {
6. Logger.error(`Failed to obtain the main window. Code:${err.code}, message:${err.message}`);
7. return;
8. }
9. // 设置主窗口全屏显示
10. windowClass.setWindowLayoutFullScreen(true, (err) => {
11. if (err.code) {
12. Logger.error(`Failed to set full-screen mode. Code:${err.code}, message:${err.message}`);
13. return;
14. }
15. });
16. // 设置状态栏与导航栏不显示
17. windowClass.setWindowSystemBarEnable([], (err) => {
18. if (err.code) {
19. Logger.error(`Failed to set the system bar to be invisible. Code:${err.code}, message:${err.message}`);
20. return;
21. }
22. });
23. });
24. }

创建验证码校验子窗口

在这个章节中，我们需要完成验证码界面的编写，并实现输入用户名和密码后，点击验证码按钮，拉起验证码子窗口。步骤如下：

1. 调用windowStage的createSubWindow接口，创建子窗口。

2. 子窗口创建成功后，通过moveWindowTo和resize接口，设置子窗口的位置、大小及相关属性等。

3. 调用setUIContent接口，为子窗口加载对应的验证码校验页面。

4. 调用showWindow接口，显示子窗口。

使用resize接口的相关限制： 1. 应用主窗口与子窗口存在大小限制，宽度范围：[320, 2560]，高度范围：[240, 2560]，单位为vp。 2. 系统窗口存在大小限制，宽度范围：[0, 2560]，高度范围：[0, 2560]，单位为vp。 3. 全屏模式窗口不支持该操作。

Preview

1. // WindowModel.ets
2. createSubWindow() {
3. // 创建子窗口
4. this.windowStage.createSubWindow(CommonConstants.SUB_WINDOW_NAME, (err, data: window.Window) => {
5. if (err.code) {
6. Logger.error('Failed to create the window. Cause: ' + JSON.stringify(err));
7. return;
8. }
9. // 获取子窗口实例
10. this.subWindowClass = data;
11. // 获取屏幕宽高
12. let screenWidth = display.getDefaultDisplaySync().width;
13. let screenHeight = display.getDefaultDisplaySync().height;
14. // 根据子窗口宽高比计算子窗口宽高
15. let windowWidth = screenWidth * CommonConstants.SUB_WINDOW_WIDTH_RATIO;
16. let windowHeight = windowWidth / CommonConstants.SUB_WINDOW_ASPECT_RATIO;
17. // 计算子窗口起始坐标
18. let moveX = (screenWidth - windowWidth) / 2;
19. let moveY = screenHeight - windowHeight;
20. // 将子窗口移动到起始坐标处
21. this.subWindowClass.moveWindowTo(moveX, moveY, (err) => {
22. if (err.code) {
23. Logger.error('Failed to move the window. Cause:' + JSON.stringify(err));
24. return;
25. }
26. });
27. // 设置子窗口的宽高
28. this.subWindowClass.resize(windowWidth, windowHeight, (err) => {
29. if (err.code) {
30. Logger.error('Failed to change the window size. Cause:' + JSON.stringify(err));
31. return;
32. }
33. });
34. // 设置子窗口展示的页面内容
35. this.subWindowClass.setUIContent(CommonConstants.VERIFY_PAGE_URL, (err) => {
36. if (err.code) {
37. Logger.error('Failed to load the content. Cause:' + JSON.stringify(err));
38. return;
39. }
40. // 设置子窗口背景颜色
41. this.subWindowClass.setWindowBackgroundColor('#00000000');
42. // 显示子窗口
43. this.subWindowClass.showWindow((err) => {
44. if (err.code) {
45. Logger.error('Failed to show the window. Cause: ' + JSON.stringify(err));
46. return;
47. }
48. });
49. });
50. });
51. }

验证成功跳转到首页

在这个章节中，我们需要完成登录后界面布局的编写，并实现验证成功跳转的功能。主要涉及以下两个方面：

1. 校验成功后，销毁验证码校验子窗口。

2. 通知登录主窗口，跳转到首页。

子窗口使用完毕后，需要调用destroyWindow对其进行销毁。

验证码校验子窗口通过公共事件EventHub通知登录主窗口跳转。首先，在登录主窗口aboutToAppear方法中定义公共事件。

然后，在验证成功后，将子窗口进行销毁，并通过eventHub的emit触发公共事件，跳转到首页。

No Preview

1. // SuccessPage.ets
2. aboutToAppear() {
3. setTimeout(() => {
4. WindowModel.getInstance().destroySubWindow();
5. getContext(this).eventHub.emit(CommonConstants.HOME_PAGE_ACTION);
6. }, CommonConstants.LOGIN_WAIT_TIME);
7. }

总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

1. 如何实现主窗口沉浸式。

2. 如何创建子窗口，并设置子窗口属性。

3. 主窗口与子窗口之间如何传递信息。

 

进入华为专区，解锁更多内容