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

文章目录

一、功能介绍

在鸿蒙开发中，一个完善的登录功能是许多应用程序的基础需求。本文将详细介绍一个鸿蒙 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 componentLoginTitle()// Bottom componentLoginBottom()}}}.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);})