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

何小豆儿在此  金牌会员 | 2024-12-14 12:30:57 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 973|帖子 973|积分 2919

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

在本文中，我们将深入探讨怎样使用HarmonyOS NEXT来实现一个功能完备的登录页面。通过这个实战案例，你将结合页面布局、数据本地化存储、网络请求等多方面了解到HarmonyOS NEXT在构建现代应用时的强盛能力和机动性。


  
1. 整体布局

界说了一个 LoginPage 组件，该组件使用了 @Entry 和 @Component 装饰器来标志它是一个入口组件和可复用的 UI 组件。LoginPage 组件包含了一些状态变量（@State）和方法（build、handleLogin、handleForgotPassword）。
2. 状态变量



  • account: 用户名输入框的值，默以为空字符串。
  • password: 暗码输入框的值，默以为空字符串。
  • text: 顶部的接待文字，默以为空字符串。
  • loading: 是否正在加载，默以为 false。
  • rememberPassword: 是否记住暗码，默以为 false。
  • stopLogin: 是否停止主动登录，默以为 false。
3. 方法



  • aboutToAppear: 组件即将表现时的生命周期方法，用于初始化状态变量。
  • build: 组件的构建方法，界说了页面的布局和组件。
  • handleLogin: 处理处罚登录逻辑的方法。
  • handleForgotPassword: 处理处罚忘记暗码逻辑的方法。
4. 代码剖析

4.1 aboutToAppear 方法

  1. async aboutToAppear() {
  2.   const params = router.getParams() as JumpParams;
  3.   this.stopLogin = params.stopLogin || false;
  4.   this.rememberPassword = await PreferencesUtils.get('rememberPassword') as boolean;
  6.   if (this.rememberPassword) {
  7.     this.account = await PreferencesUtils.get("account") as string;
  8.     this.password = await PreferencesUtils.get("password") as string;
  9.   }
  11.   if (this.account && this.password && !this.stopLogin) {
  12.     this.handleLogin();
  13.   }
  14. }
复制代码


  • router.getParams(): 获取路由通报的参数，范例为 JumpParams。这里主要是为了通过路由获取参数，来判定是否举行主动登录操纵。默认用户正常进入登岸页的时间必要主动登录，但是假如是点击了退出登录来到了登岸页则不举行主动登录。大概还有更多的特殊情况，这一点可以通过路由传参实现。
  • PreferencesUtils.get: 从本地存储中获取数据，这里主要是获取用户是否记住暗码的状态，还有记录下的账户与暗码。
  • 条件判定:

    • 假如用户选择了记住暗码，从本地存储中读取用户名和暗码。
    • 假如用户名和暗码都已存在且 路由参数stopLogin 为 false，主动调用 handleLogin 方法举行登录。

4.2 build 方法

  1. build() {
  2.   Stack() {
  3.     Column() {
  4.       // 顶部的欢迎文字
  5.       Text(this.text)
  6.       Column() {
  7.         RelativeContainer() {
  8.           Text('您好！')
  9.             .fontSize(24)
  10.             .fontWeight(FontWeight.Bold)
  11.             .fontColor(Color.Red)
  12.             .alignRules({
  13.               top: { anchor: '__container__', align: VerticalAlign.Top },
  14.               center: { anchor: '__container__', align: VerticalAlign.Center }
  15.             })
  16.             .width('100%');
  18.           Text('欢迎使用xx系统！')
  19.             .fontSize(22)
  20.             .fontColor(Color.Black)
  21.             .alignRules({
  22.               bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  23.               center: { anchor: '__container__', align: VerticalAlign.Center }
  24.             })
  25.             .width('100%')
  26.             .margin({ top: 80 });
  27.         }
  28.         .height('30%')
  29.         .width('100%')
  30.         .padding({ left: 32, right: 32 })
  31.         .backgroundColor(Color.White);
  33.         // 用户名和密码输入框
  34.         Column() {
  35.           // 用户名输入框
  36.           Column() {
  37.             TextInput({ placeholder: '请输入用户名', text: this.account })
  38.               .onChange((value: string) => {
  39.                 this.account = value;
  40.               })
  41.               .fontSize(18)
  42.               .fontColor(Color.Black)
  43.               .width('100%')
  44.               .height(50)
  45.               .padding({ left: 10, right: 10 });
  46.             Divider().height(1).color('#194487fe'); // 下划线
  47.           }
  49.           // 密码输入框
  50.           Column() {
  51.             TextInput({ placeholder: '请输入密码', text: this.password })
  52.               .onChange((value: string) => {
  53.                 this.password = value;
  54.               })
  55.               .fontSize(18)
  56.               .fontColor(Color.Black)
  57.               .width('100%')
  58.               .height(50)
  59.               .padding({ left: 10, right: 10 })
  60.               .type(InputType.Password);
  61.             Divider().height(1).color('#194487fe'); // 下划线
  62.           }.margin({ top: 32 });
  63.         }
  64.         .width('100%')
  65.         .padding({ left: 32, right: 32 })
  66.         .backgroundColor(Color.White);
  68.         // 记住密码与忘记密码行
  69.         Row() {
  70.           Row() {
  71.             // 根据用户是否选择记住密码，显示不同的图标
  72.             Image($r(this.rememberPassword ? 'app.media.radio_normal_checkmark' : 'app.media.radio_normal'))
  73.               .width(20)
  74.               .height(20)
  75.               .onClick(async () => {
  76.                 // 切换记住密码的状态
  77.                 this.rememberPassword = !this.rememberPassword;
  78.                 await PreferencesUtils.put("rememberPassword", this.rememberPassword);
  79.               });
  81.             Text('记住密码')
  82.               .fontSize(14)
  83.               .fontColor(Color.Red)
  84.               .margin({ left: 10.5 })
  85.               .onClick(async () => {
  86.                 // 也可以点击文字时切换记住密码的状态
  87.                 this.rememberPassword = !this.rememberPassword;
  88.                 await PreferencesUtils.put("rememberPassword", this.rememberPassword);
  89.                 if (!this.rememberPassword) {
  90.                   await PreferencesUtils.put("account", '');
  91.                   await PreferencesUtils.put("password", '');
  92.                 }
  93.               });
  94.           }
  96.           Text('忘记密码')
  97.             .fontSize(14)
  98.             .fontColor(Color.Gray)
  99.             .onClick(() => {
  100.               // 实现忘记密码功能，跳转或弹出窗口
  101.               this.handleForgotPassword();
  102.             });
  103.         }
  104.         .justifyContent(FlexAlign.SpaceBetween)
  105.         .margin({ top: 21 })
  106.         .padding({ left: 32, right: 32 })
  107.         .width('100%');
  109.         // 登录按钮
  110.         Button('登 录')
  111.           .width('60%')
  112.           .height(50)
  113.           .backgroundColor(Color.Red)
  114.           .fontSize(18)
  115.           .fontColor(Color.White)
  116.           .onClick(() => {
  117.             // 处理登录逻辑，并且在用户选择记住密码时保存密码
  118.             this.handleLogin();
  119.           })
  120.           .margin({ top: 56 });
  122.         // 底部图片
  123.         Image($r('app.media.login_bottom'))
  124.           .width('100%');
  125.       }
  126.       .height('100%')
  127.       .width('100%')
  128.       .backgroundColor(Color.White)
  129.       .justifyContent(FlexAlign.SpaceBetween);
  131.       if (this.loading) {
  132.         LoadingProgress().height(180).color('#cd0401');
  133.       }
  134.     }
  135.   }
  136. }
复制代码


  • Stack: 容器组件，用于堆叠其他组件。
  • Column: 垂直布局组件。
  • Text: 文本组件，用于表现文本内容。
  • RelativeContainer: 相对布局容器，用于精确控制子组件的位置。
  • TextInput: 输入框组件，用于输入用户名和暗码。

    • onChange: 当输入框内容发生变化时的回调函数。
    • type(InputType.Password): 设置输入框为暗码输入范例。

  • Divider: 分割线组件，用于在输入框下方添加下划线。
  • Row: 程度布局组件。
  • Image: 图像组件，用于表现记住暗码的图标。

    • onClick: 点击图标时切换记住暗码的状态，并保存到本地存储。

  • Button: 按钮组件，用于触发登录操纵。
  • LoadingProgress: 加载进度组件，当 loading 为 true 时表现。
4.2.1 总体布局

这段代码界说了一个 build 方法，用于构建一个登录界面。界面包含以下几个主要部门：

  • 顶部的接待文字
  • 用户名和暗码输入框
  • 记住暗码和忘记暗码选项
  • 登录按钮
  • 底部图片
  • 加载进度条（可选）
代码界说了一个登录界面，包含接待文字、用户名和暗码输入框、记住暗码和忘记暗码选项、登录按钮和底部图片。通过使用 Stack、Column 和 Row 布局组件，以及 Text、TextInput、Image 和 Button 等 UI 组件，构建了一个功能完备的登录页面。加载进度条部门是可选的，用于在登录过程中表现加载状态。
4.2.2 根部局

  1. build() {
  2.   Stack() {
  3.     // 页面内容
  4.   }
  5. }
复制代码


  • Stack 是 HarmonyOS 中的一种布局组件，它可以将子组件叠放在一起。
  • Stack 作为根布局，包含整个页面的全部内容。
4.2.3 顶部的接待文字

  1. Column() {
  2.   // 顶部的欢迎文字
  3.   Text(this.text)
  4.   Column() {
  5.     RelativeContainer() {
  6.       Text('您好！')
  7.         .fontSize(24)
  8.         .fontWeight(FontWeight.Bold)
  9.         .fontColor(Color.Red)
  10.         .alignRules({
  11.           top: { anchor: '__container__', align: VerticalAlign.Top },
  12.           center: { anchor: '__container__', align: VerticalAlign.Center }
  13.         })
  14.         .width('100%');
  16.       Text('欢迎使用xx系统！')
  17.         .fontSize(22)
  18.         .fontColor(Color.Black)
  19.         .alignRules({
  20.           bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  21.           center: { anchor: '__container__', align: VerticalAlign.Center }
  22.         })
  23.         .width('100%')
  24.         .margin({ top: 80 });
  25.     }
  26.     .height('30%')
  27.     .width('100%')
  28.     .padding({ left: 32, right: 32 })
  29.     .backgroundColor(Color.White);
  30.   }
  31. }
复制代码


  • Column 是一个垂直布局组件，用于将子组件垂直排列。
  • Text(this.text) 表现一个变量 this.text，可能是动态的接待文字。
  • 内部的 Column 包含一个 RelativeContainer，用于更机动地对齐子组件。
  • RelativeContainer 是一个相对布局组件，可以使用 alignRules 来指定子组件的对齐方式。

    • Text('您好！') 设置了字体巨细、加粗、字体颜色和对齐方式。
    • Text('接待使用xx体系！') 设置了字体巨细、字体颜色和对齐方式，并且设置了上边距。

  • RelativeContainer 设置了高度、宽度、内边距和配景颜色。
4.2.4 用户名和暗码输入框

  1. Column() {
  2.   // 用户名输入框
  3.   Column() {
  4.     TextInput({ placeholder: '请输入用户名', text: this.account })
  5.       .onChange((value: string) => {
  6.         this.account = value;
  7.       })
  8.       .fontSize(18)
  9.       .fontColor(Color.Black)
  10.       .width('100%')
  11.       .height(50)
  12.       .padding({ left: 10, right: 10 });
  13.     Divider().height(1).color('#194487fe'); // 下划线
  14.   }
  16.   // 密码输入框
  17.   Column() {
  18.     TextInput({ placeholder: '请输入密码', text: this.password })
  19.       .onChange((value: string) => {
  20.         this.password = value;
  21.       })
  22.       .fontSize(18)
  23.       .fontColor(Color.Black)
  24.       .width('100%')
  25.       .height(50)
  26.       .padding({ left: 10, right: 10 })
  27.       .type(InputType.Password);
  28.     Divider().height(1).color('#194487fe'); // 下划线
  29.   }.margin({ top: 32 });
  30. }
  31. .width('100%')
  32. .padding({ left: 32, right: 32 })
  33. .backgroundColor(Color.White);
复制代码


  • 外部的 Column 包含用户名和暗码输入框。
  • 内部的 Column 用于单独包装用户名输入框和暗码输入框，以便更好地控制样式。

    • TextInput 是一个输入框组件，用于用户输入文本。
    • placeholder 是输入框的占位符文本。
    • text 是输入框当前表现的文本，绑定到 this.account 和 this.password。
    • onChange 是输入框的值改变时的回调函数，用于更新 this.account 和 this.password。
    • fontSize、fontColor、width、height 和 padding 设置了输入框的样式。
    • type(InputType.Password) 将输入框范例设置为暗码输入框。

  • Divider 是一个分隔线组件，用于在输入框下方添加一条线，模拟下划线效果。
4.2.5 记住暗码与忘记暗码行

  1. Row() {
  2.   Row() {
  3.     // 根据用户是否选择记住密码，显示不同的图标
  4.     Image($r(this.rememberPassword ? 'app.media.radio_normal_checkmark' : 'app.media.radio_normal'))
  5.       .width(20)
  6.       .height(20)
  7.       .onClick(async () => {
  8.         // 切换记住密码的状态
  9.         this.rememberPassword = !this.rememberPassword;
  10.         await PreferencesUtils.put("rememberPassword", this.rememberPassword);
  11.       });
  13.     Text('记住密码')
  14.       .fontSize(14)
  15.       .fontColor(Color.Red)
  16.       .margin({ left: 10.5 })
  17.       .onClick(async () => {
  18.         // 也可以点击文字时切换记住密码的状态
  19.         this.rememberPassword = !this.rememberPassword;
  20.         await PreferencesUtils.put("rememberPassword", this.rememberPassword);
  21.         if (!this.rememberPassword) {
  22.           await PreferencesUtils.put("account", '');
  23.           await PreferencesUtils.put("password", '');
  24.         }
  25.       });
  26.   }
  28.   Text('忘记密码')
  29.     .fontSize(14)
  30.     .fontColor(Color.Gray)
  31.     .onClick(() => {
  32.       // 实现忘记密码功能，跳转或弹出窗口
  33.       this.handleForgotPassword();
  34.     });
  35. }
  36. .justifyContent(FlexAlign.SpaceBetween)
  37. .margin({ top: 21 })
  38. .padding({ left: 32, right: 32 })
  39. .width('100%');
复制代码


  • Row 是一个程度布局组件，用于将子组件程度排列。
  • 内部的 Row 包含记住暗码的图标和文本。

    • Image 是一个图像组件，根据 this.rememberPassword 的值表现差别的图标。
    • onClick 是点击事件的回调函数，用于切换记住暗码的状态并保存到偏好设置中。
    • Text('记住暗码') 表现记住暗码的文本，设置了字体巨细、颜色和左边距，并绑定了点击事件。

  • 外部的 Row 包含忘记暗码的文本，设置了字体巨细、颜色，并绑定了点击事件。
  • justifyContent(FlexAlign.SpaceBetween) 使子组件在程度方向上均匀分布。
  • margin 和 padding 设置了外边距和内边距。
  • width 设置了组件的宽度。
4.2.6 登录按钮

  1. Button('登 录')
  2.   .width('60%')
  3.   .height(50)
  4.   .backgroundColor(Color.Red)
  5.   .fontSize(18)
  6.   .fontColor(Color.White)
  7.   .onClick(() => {
  8.     // 处理登录逻辑，并且在用户选择记住密码时保存密码
  9.     this.handleLogin();
  10.   })
  11.   .margin({ top: 56 });
复制代码


  • Button 是一个按钮组件，用于触发登录操纵。
  • width 和 height 设置了按钮的宽度和高度。
  • backgroundColor 和 fontColor 设置了按钮的配景颜色和字体颜色。
  • onClick 是按钮的点击事件回调函数，用于处理处罚登录逻辑。
  • margin 设置了按钮的上边距。
4.2.7 底部图片

  1. Image($r('app.media.login_bottom'))
  2.   .width('100%');
复制代码


  • Image 是一个图像组件，用于表现底部图片。
  • width 设置了图片的宽度。
  • $r 是资源引用函数，用于引用应用中的资源。
4.2.8 加载进度条（可选）

  1. if (this.loading) {
  2.   LoadingProgress().height(180).color('#cd0401');
  3. }
复制代码


  • LoadingProgress 是一个加载进度条组件，用于表现加载状态。
  • height 和 color 设置了进度条的高度和颜色。
  • if (this.loading) 控制加载进度条的表现，只有当 this.loading 为 true 时才会表现加载进度条。
4.3 handleLogin 方法

  1. async handleLogin() {
  2.   if (this.rememberPassword) {
  3.     // 如果用户选择了记住密码，保存账户和密码到本地存储
  4.     await PreferencesUtils.put("account", this.account);
  5.     await PreferencesUtils.put("password", this.password);
  6.   }
  8.   // 执行登录逻辑
  9.   this.loading = true;
  10.   Login<LoginResponse>({
  11.     username: this.account,
  12.     password: this.password,
  13.     uuid: '',
  14.     code: '',
  15.   }).then(async (res) => {
  16.     if (res.code !== 0) {
  17.       promptAction.showToast({
  18.         message: res.msg,
  19.         duration: 1000,
  20.       });
  21.       this.loading = false;
  22.     } else {
  23.       // 保存用户数据和 token
  24.       await PreferencesUtils.put("userData", res.data);
  25.       await PreferencesUtils.put("token", res.data.token);
  27.       // 获取权限
  28.       const permission = await GetPermission<PermissionResponse>();
  29.       await PreferencesUtils.put("permission", permission);
  30.       await PreferencesUtils.put("SystemUser_Permission", permission.data.dataPermission);
  32.       // 获取菜单权限
  33.       const menuRes = await GetMenu<PermissionResponse>();
  34.       await PreferencesUtils.put("User_Manage", menuRes.data || []);
  36.       // 跳转到主页
  37.       router.replaceUrl({ url: 'pages/MainPage' }).then(() => {
  38.         console.info('Succeeded in jumping to the pages/MainPage.');
  39.       }).catch((err: BusinessError) => {
  40.         console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`);
  41.       });
  43.       this.loading = false;
  44.     }
  45.   }).catch((err: string) => {
  46.     promptAction.showToast({
  47.       message: err,
  48.       duration: 1000,
  49.     });
  50.     this.loading = false;
  51.     console.error(`Failed to login, message is ${err}`);
  52.   });
  53. }
复制代码


  • 保存用户名和暗码:

    • 假如用户选择了记住暗码，使用 PreferencesUtils.put 方法将用户名和暗码保存到本地存储。

  • 执行登录逻辑:

    • 设置 loading 为 true，表现加载进度。
    • 调用 Login API 举行登录，传入用户名、暗码、UUID 和验证码。
    • 乐成回调:

      • 假如 res.code 不为 0，表现错误提示。
      • 假如 res.code 为 0，保存用户数据和 token 到本地存储。
      • 调用 GetPermission API 获取权限，并保存到本地存储。
      • 调用 GetMenu API 获取菜单权限，并保存到本地存储。
      • 使用 router.replaceUrl 方法跳转到主页，并处理处罚跳转乐成和失败的情况。

    • 失败回调:

      • 表现错误提示，并设置 loading 为 false。


4.4 handleForgotPassword 方法

  1. handleForgotPassword() {
  2.   // 前往忘记密码页面
  3.   router.pushUrl({ url: 'pages/Forgot' });
  4. }
复制代码


  • 跳转到忘记暗码页面:

    • 使用 router.pushUrl 方法跳转到忘记暗码页面。

5. 关键函数



  • PreferencesUtils.get 和 PreferencesUtils.put: 用于从本地存储中读取和保存数据。
  • router.getParams: 用于获取路由通报的参数。
  • router.replaceUrl 和 router.pushUrl: 用于在页面之间举行跳转。
  • promptAction.showToast: 用于表现短暂的提示信息。
7. 页面效果

进入页面：

登录接口请求中：

6. 总结

这段代码实现了一个完备的登录页面，包罗用户名和暗码的输入、记住暗码功能、忘记暗码功能以及登录逻辑。它使用了 HarmonyOS NEXT 的组件和 API，通过状态变量管理页面的状态，通过异步方法处理处罚登录、权限获取和页面跳转等操纵。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

何小豆儿在此

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表