鸿蒙实战基础(ArkTS)-窗口管理

基于窗口能力,实现验证码登录的场景,主要完成以下功能:

  1. 登录页面主窗口实现沉浸式。
  2. 输入用户名和密码后,拉起验证码校验子窗口。
  3. 验证码校验成功后,主窗口跳转到应用首页。

登录界面实现沉浸式

完成登录界面布局的编写,并实现沉浸式效果。步骤如下:

  1. 获取主窗口window实例。
  2. 设置主窗口全屏显示。
  3. 设置状态栏与导航栏不显示,其中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.message}`);
        return;
      }
    });
  });
}

创建验证码校验子窗口

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

  1. 调用windowStage的createSubWindow接口,创建子窗口。
  2. 子窗口创建成功后,通过moveWindowTo和resize接口,设置子窗口的位置、大小及相关属性等。
  3. 调用setUIContent接口,为子窗口加载对应的验证码校验页面。
  4. 调用showWindow接口,显示子窗口。
// 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接口的相关限制:

  1. 应用主窗口与子窗口存在大小限制,宽度范围:[320, 2560],高度范围:[240, 2560],单位为vp。

  2. 系统窗口存在大小限制,宽度范围:[0, 2560],高度范围:[0, 2560],单位为vp。

  3. 全屏模式窗口不支持该操作。

验证成功跳转到首页

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

  1. 校验成功后,销毁验证码校验子窗口。
  2. 通知登录主窗口,跳转到首页。

子窗口使用完毕后,需要调用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文档)

最终效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/314891.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

全面解析微服务

导读 微服务是企业应用及数据变革升级的利器,也是数字化转型及运营不可或缺的助产工具,企业云原生更离不开微服务,同时云原生的既要最大化发挥微服务的价值,也要最大化弥补微服务的缺陷。本文梳理了微服务基础设施组件、服务网格、…

企业数据中台整体介绍及建设方案:文件全文51页,附下载

关键词:数据中台解决方案,数据治理,数据中台技术架构,数据中台建设内容,数据中台核心价值 一、什么是数据中台? 数据中台是指通过数据技术,对海量数据进行采集、计算、存储、加工,…

富唯智能新研发的复合机器人,轻松破解汽车底盘零配件生产中的难题

随着汽车工业的快速发展,对于底盘零配件的需求也日益增长。为了满足市场需求,智能物流解决方案在汽车底盘零配件生产中扮演着越来越重要的角色。如何实现高效、准确的生产和物流管理,以满足市场快速变化的需求,成为了汽车生产商亟…

在加载第三方库过程中,无法加载到库的问题(使用readelf, patchelf命令)

无法加载到库问题 问题及分析过程readelf 命令patchelf命令 问题及分析过程 在开发一个程序过程中,需要加载第三方库iTapTradeAPI, 在CMakeList.txt中已经设置了CMAKE_INSTALL_RPATH,但是发布到生产之后由于目录问题无法加载到libiTapTradeAPI库了 下面…

Vue过滤器详解

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介基本用法多个过滤器的串联过滤器在指令中的应用全局过滤器 ⭐ 本期推荐 ⭐ 专栏简介 Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏!创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每…

活动回顾∣“全邻友好,艺术大咖交流会”——员村街开展社区微型养老博览会长者文艺汇演活动

为进一步营造邻里守望,共建美好社区的氛围,促进社区长者参与社区服务,展示社区长者健康、积极向上的精神风貌,2024年1月10日,员村街开展“全邻友好,艺术大咖交流会”——微型养老博览会活动,让长…

电影《艾里甫与赛乃姆》简介

电影《艾里甫与赛乃姆》由天山电影制片厂于1981年摄制,该片由傅杰执导,由买买提祖农司马依、布维古丽、阿布里米提沙迪克、努力曼阿不力孜、买买提依不拉音江、阿不都热合曼艾力等主演。 该片改编自维吾尔族民间爱情叙事长诗《艾里甫与赛乃姆》&#xf…

ModuleNotFoundError: No module named ‘simple_knn‘

【报错】使用 AutoDL 复现 GaussianEditor 时引用 3D Gaussian Splatting 调用simple_knn 时遇到 ModuleNotFoundError: No module named ‘simple_knn‘ 报错: 【原因】 一开始以为是版本问题,于是将所有可能的版本都尝试了 (from versions: 0.1, 0.2…

一套成熟的Spring Cloud智慧工地平台源码,自主版权,支持二次开发!

智慧工地源码,java语言开发的智慧工地源码 智慧工地利用移动互联、物联网、云计算、大数据等新一代信息技术,彻底改变传统施工现场各参建方的交互方式、工作方式和管理模式,为建设集团、施工企业、监理单位、设计单位、政府监管部门等提供一揽…

Android开发基础(三)

Android开发基础(三) 本篇将介绍Android权限管理。 Android权限管理 Android权限管理主要是为了保护用户的隐私和设备的安全性; 在Android系统中,应用在请求权限时必须进行明确的申请,根据权限的保护级别&#xff0…

NAND Separate Command Address (SCA) 接口数据传输解读

在采用Separate Command Address (SCA) 接口的存储产品中,DQ input burst和DQ output burst又是什么样的策略呢? DQ Input Burst: 在读取操作期间,数据以一种快速并行的方式通过DQ总线传送到控制器。在SCA接口下,虽然命令和地址信…

预约上门按摩系统开发会涉及哪些关键技术

一套完善的预约上门按摩系统的开发是需要考虑很多方面,无论是从用户下单还是技师、订单、财务以及各个方面的管理,涉及的逻辑和技术非常多,今天就以最简单的方式把预约上门按摩系统的技术方面分享一下。 1.移动端应用程序开发技术&#xff1a…

腾讯云COS桶文件上传下载工具类

1&#xff0c;申请key和密钥 2&#xff0c;引入依赖 <dependency><groupId>com.qcloud</groupId><artifactId>cos_api</artifactId><version>5.6.24</version></dependency>3&#xff0c;工具类 package com.example.activi…

Docker基础命令

Docker常用命令 docker run docker run [OPTIONS] IMAGE [COMMAND] [ARG...] -e设置环境变量&#xff1b;-e usernameyjy --name为容器指定一个名称&#xff1b;--nameyjy -p指定端口映射&#xff0c;格式为&#xff1a;主机(宿主)端口:容器端口 -p 80:8080 -t为容器重新分…

WARNING: IPv4 forwarding is disabled. Networking will not work.

今天用docker部署容器&#xff0c;发现一个问题&#xff0c;docker-compose up启动成功&#xff0c;但无法正常访问接口。 查找问题步骤&#xff1a; 1、直接在服务器运行jar包&#xff0c;发现可以正常启动&#xff0c;也能正常访问接口&#xff0c;排除jar包本身问题以及防…

用C#实现简单的线性回归

前言 最近注意到了NumSharp&#xff0c;想学习一下&#xff0c;最好的学习方式就是去实践&#xff0c;因此从github上找了一个用python实现的简单线性回归代码&#xff0c;然后基于NumSharp用C#进行了改写。 NumSharp简介 NumSharp&#xff08;NumPy for C#&#xff09;是一个在…

STM32F103RCT6开发板M3单片机教程07-TIMER1CH1输出 PWM做LED呼吸灯

概述 本教程使用是&#xff08;光明谷SUN_STM32mini开发板&#xff09; 免费开发板 在谷动谷力社区注册用户&#xff0c;打卡&#xff0c;发帖求助都可以获取积分&#xff0c;当然最主要是发原创应用文档奖励更多积分&#xff0e; (可用积分换取&#xff0c;真的不用钱&…

什么是 CAS

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…

C语言快速排序——qsort函数

上面的是我们标准C语言库里面对qsort函数的介绍&#xff0c;我们先来从排序说起&#xff1a; 这就不得不提出编程中最最基础的排序算法---冒泡排序 对于一个任意的无序数列&#xff0c;我们如果想要把他排成顺序数列的话&#xff0c;我们就可以让每一项跟后面的一项去比较&…

基于汽车胎压检测及温度预警

课题简介 汽车胎压监测系统可分为两种&#xff1a;一种是间接式胎压监测系统&#xff0c;是通过轮胎的转速差来判断轮胎是否异常&#xff1b;另一种是直接式胎压监测系统&#xff0c;通过在轮胎里面加装四个胎压监测传感器&#xff0c;在汽车静止或者行驶过程中对轮胎气压和温…