HarmonyOS应用开发实战：基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0（Next）】

一.HarmonyOS Next 5.0

发布时间：2024年10月22日，在华为全场景新品发布会上正式发布。
地位：HarmonyOS NEXT成为全球继苹果iOS和安卓系统后的第三大移动操作系统，标志着华为在操作系统领域的重大突破。

原生智能：
通过系统级AI能力，将AI下沉至操作系统并赋能给多个子系统，提升应用智能化体验。
小艺助手增强记忆能力，支持多达23类常用记忆类型，具备更强的推理规划能力，任务成功率高达90%。
小艺的知识问答能力增强，掌握万亿级tokens的知识量，更开放，通过意图框架接入300+服务。
交互设计更新，常驻屏幕底部，方便用户随时唤醒。
原生互联：
分布软总线全面升级，实现更便捷、开放、自由的全场景体验。
多种设备共享一个系统，设备间可以相互感知，应用、服务和内容在设备间无缝自由流转和分享。
原生安全：
全新的星盾安全架构，重建操作系统的安全体系和秩序。
全面梳理系统授权，禁止开放9类不合理权限，首创安全访问机制，从“管权限”到“管数据”，确保用户隐私安全。
原生流畅：
系统垂直整合与开发者深入合作优化，确保系统应用与三方应用的一致流畅体验。
整机性能显著提升，游戏体验全方位升级。
原生精致：
全新的设计风格，包括沉浸光影、趣味主题、中式对称、引力动效、高效交互等。
提供更加好看、个性、好玩的用户体验。

1.1 项目背景

HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。
这是我做项目中用到的应该展示页面。

1.2 ArkTS详解

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。
自然简洁语法
ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。
轻量化并发机制
ArkCompiler运行时在HarmonyOS上提供了Worker API支持并发编程。在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。

二.HarmonyOS应用开发实战—开箱即用的登录页面3【ArkTS】

2.1 ArkTS页面源码

import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
@Entry
@Component
struct Login {
  @State message: string = 'Hello World'

  private userName: string = ''
  private password: string = ''

  @State loadingWidth: number = 0

  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width(100)
          .height(100)
        Text('登陆界面')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .margin(15)
        Text('登录找以使用更多服务')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor("#a0a0a0")
        Column(){
          TextInput({placeholder: '账号'})
            .maxLength(10)
            .margin({bottom: 20})
            .onChange((value: string) => {
              this.userName = value
            })
          TextInput({placeholder: '密码'})
            .type(InputType.Password)
            .maxLength(10)
            .margin({bottom: 20})
            .onChange((value: string) => {
              this.password = value
            })
          Row(){
            Text('短信验证登录')
              .fontColor("#007dff")
            Text('忘记密码')
              .fontColor("#007dff")
          }.justifyContent(FlexAlign.SpaceBetween).width("100%")
          Button('登录')
            .width('100%')
            .margin({top: 70})
            .onClick(() => {
              if(this.userName.trim() == '') {
                promptAction.showToast({
                  message: '账户不能为空！',
                  duration: 2000
                })
                return
              }

              if(this.password.trim() == '') {
                promptAction.showToast({
                  message: '密码不能为空！',
                  duration: 2000
                })
                return
              }
              this.loadingWidth = 60
              setTimeout(() => {
                if(this.userName.trim() === 'admin' && this.password.trim() === '123456'){
                  router.replaceUrl({
                    url: "pages/Index"
                  })
                }else {
                  promptAction.showToast({
                    message: '账户或密码错误',
                    duration: 2000
                  })
                }
                this.loadingWidth = 0
              },2000)

            })
          Text('注册账号')
            .fontColor('#258ffe')
            .margin(15)
          LoadingProgress()
            .color('#007dfe')
            .height(this.loadingWidth)
            .width(this.loadingWidth)
          Text('其他方式登录')
            .fontColor('#a0a0a0')
            .fontWeight(FontWeight.Bold)
            .fontSize(13)
            .margin({top: 10})
          Row(){
            Button('方式一', {type: ButtonType.Circle})
              .height(65)
              .backgroundColor('#efefef')
              .fontColor('#000000')
              .border({
                width: 1
              })
            Button('方式二', {type: ButtonType.Circle})
              .height(65)
              .backgroundColor('#efefef')
              .fontColor('#000000')
              .border({
                width: 1
              })
            Button('方式三', {type: ButtonType.Circle})
              .height(65)
              .backgroundColor('#efefef')
              .fontColor('#000000')
              .border({
                width: 1
              })
          }.justifyContent(FlexAlign.SpaceAround)
          .width('100%')
          .margin({top: 15})
        }.width("90%").margin({top: 30})
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#efefef')
  }
}

2.2 代码解析

这段代码是一个使用 HarmonyOS 框架编写的登录界面的组件。以下是对代码的简要解析：

1. 导入模块：

   • promptAction: 从 @ohos.promptAction 模块导入用于显示提示信息的功能。
   • router: 从 @ohos.router 模块导入用于路由管理的功能。

2. 组件定义：

   • 使用 @Entry 和 @Component 注解定义了一个名为 Login 的组件结构。
   • 在组件结构中定义了一些状态（@State），如 message、loadingWidth、userName 和 password。

3. 界面布局：

   • 使用 Row 和 Column 组件来创建布局。
   • 包含了一个图像、两个文本元素、两个文本输入框（分别用于输入账号和密码）、两个按钮（“登录” 和 “注册账号”）、一个加载进度条、一组按钮（“方式一”、“方式二”、“方式三”）等。

4. 事件处理：

   • 在账号和密码的文本输入框中，使用 onChange 监听器更新 userName 和 password 状态。
   • 在 “登录” 按钮中，使用 onClick 监听器验证输入的账号和密码，然后根据验证结果执行相应的操作，如页面跳转或显示错误提示。

5. 样式设置：

   • 对各个组件进行了样式设置，包括大小、颜色、边框等。

6. 异步操作：

   • 使用 setTimeout 模拟异步操作，例如在登录按钮点击后，等待2秒后执行验证逻辑，期间显示加载进度条。

7. 路由导航：

   • 在登录成功的情况下，使用 router.replaceUrl 进行路由导航，跳转到名为 “pages/Index” 的页面。

总体而言，这段代码描述了一个简单的登录界面，包括输入账号和密码、点击登录按钮进行验证，显示加载进度条，并根据验证结果进行页面跳转或提示用户。

2.3 心得

这段代码展示了一个基于 HarmonyOS 框架的登录界面组件的实现。以下是我的一些心得：

1. 清晰的组件结构：通过使用 @Entry 和 @Component 注解，代码清晰地定义了一个名为 Login 的组件。这样的结构使得组件的用途和功能一目了然，有助于代码的维护和理解。

2. 响应式设计：通过使用 @State 注解，代码引入了一些响应式的状态，如 message、loadingWidth、userName 和 password。这些状态的变化会触发界面的重新渲染，实现了动态更新和交互性。

3. 布局和样式设置：使用了 HarmonyOS 提供的 Row、Column、Text、Button 等组件，通过链式调用方法设置了各个组件的样式和布局。这种声明式的风格使得界面的构建和设计更为直观。

4. 事件处理：通过在文本输入框和按钮上添加监听器，实现了对用户输入和点击事件的响应。例如，在登录按钮点击时，进行账号和密码的验证，并根据验证结果执行相应的操作。

5. 异步操作和加载进度条：通过使用 setTimeout 模拟异步操作，代码展示了在进行长时间任务（如登录验证）时如何展示加载进度条，提高用户体验。

6. 模块化设计：通过导入 promptAction 和 router 模块，代码展示了如何利用 HarmonyOS 提供的模块来实现一些通用的功能，例如显示提示信息和进行页面导航。

7. 路由导航：在登录成功的情况下，使用 router.replaceUrl 进行了页面导航，这是一种常见的应用程序导航方式，提供了流畅的用户体验。

总体而言，这段代码展示了 HarmonyOS 框架下一个简单而完整的登录界面组件的实现，结合了界面设计、响应式编程、事件处理和模块化设计等方面的知识。