【鸿蒙开发】05 登录Demo解析

news2024/12/26 23:42:54

文章目录

一、功能介绍

在鸿蒙开发中，一个完善的登录功能是许多应用程序的基础需求。本文将详细介绍一个鸿蒙 App 登录 Demo，包括其功能介绍、代码解析以及代码 demo 的下载地址。

本文初始代码从华为开发者网站下载，根据该Demo进行内容调整。

一、功能介绍

这个鸿蒙 App 登录 Demo 实现了以下主要功能：

用户输入验证：
对用户输入的用户名和密码进行基本的格式验证，确保输入的内容符合要求。例如，检查用户名是否为空、密码长度是否在合理范围内（最少不能低于6位）等。

具体的验证逻辑代码路径：entry/src/main/ets/common/utils/CommonUtils.ets:66
登录逻辑处理：
当用户点击登录按钮时，系统会将用户输入的用户名和密码发送到模拟的服务器端（在本 Demo 中通常是模拟的接口或本地数据存储）进行验证。如果验证通过，则跳转到主页面或其他成功页面；如果验证失败，则显示相应的错误提示信息。
错误提示：
在用户输入错误或登录失败时，清晰地显示错误信息，以便用户了解问题所在并进行修正。例如，“用户名不能为空”、“密码错误” 等提示。
界面友好：
具有简洁明了的登录界面设计，易于用户操作。同时，支持不同屏幕尺寸和分辨率的设备，确保在各种鸿蒙设备上都能有良好的显示效果。

二、代码解析

以下是对登录 Demo 主要代码部分的解析：

界面布局：
类地址：entry/src/main/ets/pages/LoginPage.ets:
定义了登录界面的各个组件，如输入框、按钮、提示标签等。通过设置组件的属性，可以调整它们的外观和行为。例如：

@Entry
@Component
struct LoginPage {
  @StorageProp('currentDeviceSize') currentDeviceSize: string = CommonConstants.SM;

  onPageShow() {
    MultipleDevicesUtils.register();
  }

  build() {
    GridRow({
      columns: {
        sm: StyleConstants.COLUMNS_SM,
        md: StyleConstants.COLUMNS_MD,
        lg: StyleConstants.COLUMNS_LG
      },
      gutter: {
        x: StyleConstants.GRID_GUTTER
      }
    }) {
      GridCol({
        span: {
          sm: StyleConstants.SPAN_SM,
          md: StyleConstants.SPAN_MD,
          lg: StyleConstants.SPAN_LG
        }, offset: {
          md: StyleConstants.OFFSET_MD,
          lg: StyleConstants.OFFSET_LG
        }
      }) {
        Column() {
          // Title component
          LoginTitle()
          // Bottom component
          LoginBottom()
        }
      }
    }
    .backgroundColor($r('app.color.background'))
  }
}

在这个布局文件中，我们有两个TextField用于输入用户名和密码，一个Button作为登录按钮，以及一个Text用于显示错误信息。

首先，在AbilitySlice（鸿蒙应用的页面类）中，获取界面布局中的各个组件，并为登录按钮设置点击事件监听器。

 Button($r('app.string.login'))
        .id(CommonConstants.LOGIN_BUTTON_ID)
        .width(StyleConstants.FULL_PARENT)
        .height($r('app.float.login_button_height'))
        .fontSize($r('app.float.normal_text_size'))
        .fontWeight(FontWeight.Medium)
        .backgroundColor($r('app.color.login_button_color'))
        .margin({
          top: $r('app.float.login_button_top'),
          bottom: $r('app.float.login_button_bottom')
        })
        .onClick(() => {
          CommonUtils.loginArkTS(this.account, this.password);
        })