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

简介: 本文介绍了基于HarmonyOS 5.0(Next)和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统,具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码,涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容,展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码,开发者可以快速上手并构建高效、美观的应用界面。

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),如 messageloadingWidthuserNamepassword
  3. 界面布局

    • 使用 RowColumn 组件来创建布局。
    • 包含了一个图像、两个文本元素、两个文本输入框(分别用于输入账号和密码)、两个按钮("登录" 和 "注册账号")、一个加载进度条、一组按钮("方式一"、"方式二"、"方式三")等。
  4. 事件处理

    • 在账号和密码的文本输入框中,使用 onChange 监听器更新 userNamepassword 状态。
    • 在 "登录" 按钮中,使用 onClick 监听器验证输入的账号和密码,然后根据验证结果执行相应的操作,如页面跳转或显示错误提示。
  5. 样式设置

    • 对各个组件进行了样式设置,包括大小、颜色、边框等。
  6. 异步操作

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

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

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

2.3 心得

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

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

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

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

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

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

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

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

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

相关文章
|
1月前
|
数据安全/隐私保护
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
37 3
|
1月前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
56 2
|
1天前
|
人工智能 搜索推荐 数据挖掘
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
原生鸿蒙版小艺APP成功接入DeepSeek-R1,为HarmonyOS用户带来更智能高效的交互体验。通过此次升级,用户在编程、学习和工作中的问题可迅速获得专业解答。同时,此举为HarmonyOS应用开发者提供了新的技术参考,激发了更多创新应用场景的开发,助力打造差异化竞争优势,推动HarmonyOS生态繁荣发展。
98 68
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
|
1月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
165 68
|
1月前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
100 47
Harmony OS开发-ArkTS语言速成二
|
1月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
66 13
|
1月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
65 10
|
2月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏
本篇教程将带你实现一个水果掉落小游戏,掌握基本的动态交互逻辑和鸿蒙组件的使用,进一步了解事件处理与状态管理。
57 14
|
1月前
|
UED 开发者
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
53 8
|
1月前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
56 5

热门文章

最新文章