【HarmonyOS NEXT】实战——登录页面

【HarmonyOS NEXT】实战——登录页面

在本文中,我们将深入探讨如何使用HarmonyOS NEXT来实现一个功能完备的登录页面。通过这个实战案例,你将结合页面布局、数据本地化存储、网络请求等多方面了解到HarmonyOS NEXT在构建现代应用时的强大能力和灵活性。
在这里插入图片描述

1. 整体结构

定义了一个 LoginPage 组件,该组件使用了 @Entry@Component 装饰器来标记它是一个入口组件和可复用的 UI 组件。LoginPage 组件包含了一些状态变量(@State)和方法(buildhandleLoginhandleForgotPassword)。

2. 状态变量

  • account: 用户名输入框的值,默认为空字符串。
  • password: 密码输入框的值,默认为空字符串。
  • text: 顶部的欢迎文字,默认为空字符串。
  • loading: 是否正在加载,默认为 false
  • rememberPassword: 是否记住密码,默认为 false
  • stopLogin: 是否停止自动登录,默认为 false

3. 方法

  • aboutToAppear: 组件即将显示时的生命周期方法,用于初始化状态变量。
  • build: 组件的构建方法,定义了页面的布局和组件。
  • handleLogin: 处理登录逻辑的方法。
  • handleForgotPassword: 处理忘记密码逻辑的方法。

4. 代码解析

4.1 aboutToAppear 方法
async aboutToAppear() {
   
   
  const params = router.getParams() as JumpParams;
  this.stopLogin = params.stopLogin || false;
  this.rememberPassword = await PreferencesUtils.get('rememberPassword') as boolean;

  if (this.rememberPassword) {
   
   
    this.account = await PreferencesUtils.get("account") as string;
    this.password = await PreferencesUtils.get("password") as string;
  }

  if (this.account && this.password && !this.stopLogin) {
   
   
    this.handleLogin();
  }
}
  • router.getParams(): 获取路由传递的参数,类型为 JumpParams。这里主要是为了通过路由获取参数,来判断是否进行自动登录操作。默认用户正常进入登陆页的时候需要自动登录,但是如果是点击了退出登录来到了登陆页则不进行自动登录。或许还有更多的特殊情况,这一点可以通过路由传参实现。
  • PreferencesUtils.get: 从本地存储中获取数据,这里主要是获取用户是否记住密码的状态,还有记录下的账户与密码。
  • 条件判断:
    • 如果用户选择了记住密码,从本地存储中读取用户名和密码。
    • 如果用户名和密码都已存在且 路由参数stopLoginfalse,自动调用 handleLogin 方法进行登录。
4.2 build 方法
build() {
   
   
  Stack() {
   
   
    Column() {
   
   
      // 顶部的欢迎文字
      Text(this.text)
      Column() {
   
   
        RelativeContainer() {
   
   
          Text('您好!')
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.Red)
            .alignRules({
   
   
              top: {
   
    anchor: '__container__', align: VerticalAlign.Top },
              center: {
   
    anchor: '__container__', align: VerticalAlign.Center }
            })
            .width('100%');

          Text('欢迎使用xx系统!')
            .fontSize(22)
            .fontColor(Color.Black)
            .alignRules({
   
   
              bottom: {
   
    anchor: '__container__', align: VerticalAlign.Bottom },
              center: {
   
    anchor: '__container__', align: VerticalAlign.Center }
            })
            .width('100%')
            .margin({
   
    top: 80 });
        }
        .height('30%')
        .width('100%')
        .padding({
   
    left: 32, right: 32 })
        .backgroundColor(Color.White);

        // 用户名和密码输入框
        Column() {
   
   
          // 用户名输入框
          Column() {
   
   
            TextInput({
   
    placeholder: '请输入用户名', text: this.account })
              .onChange((value: string) => {
   
   
                this.account = value;
              })
              .fontSize(18)
              .fontColor(Color.Black)
              .width('100%')
              .height(50)
              .padding({
   
    left: 10, right: 10 });
            Divider().height(1).color('#194487fe'); // 下划线
          }

          // 密码输入框
          Column() {
   
   
            TextInput({
   
    placeholder: '请输入密码', text
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值