HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】

简介: ### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。

HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】

一、HarmonyOS 5.0美学与科技的完美融合

在科技飞速发展的今天,每一个细微的创新都可能引领一场变革。华为,作为科技领域的领航者,再次以HarmonyOS 5.0(Next)这一里程碑式的操作系统升级,向我们展示了科技的力量与魅力。它不仅是一次技术的飞跃,更是对未来智能生活的一次深刻洞察和重塑。

在这里插入图片描述

HarmonyOS 5.0(Next)首次引入了“光感美学”的设计理念,将光与影的巧妙结合融入系统界面。通过先进的算法和图像处理技术,系统界面呈现出更加细腻、生动的光影效果,为用户带来前所未有的视觉盛宴。这种设计不仅提升了系统的美观度,更在无形中增强了用户与设备之间的情感连接。

HarmonyOS 5.0(Next)在分布式软总线技术的基础上,进一步实现了多设备间的深度协同。无论是智能家居、智能穿戴还是智能办公设备,都能轻松接入鸿蒙生态,实现无缝流转和智能联动。用户只需轻轻一触,即可将手机上的视频、音乐、文档等内容快速分享到电视、平板或电脑上,真正实现了“一机在手,万物互联”的智能生活体验。
在这里插入图片描述

小艺助手,作为HarmonyOS 5.0(Next)的智能核心,得到了全面的升级和优化。它不仅能够准确理解用户的指令和需求,还能根据用户的习惯和偏好提供个性化的服务和建议。无论是日程管理、健康监测还是娱乐推荐,小艺助手都能轻松应对,让用户的生活更加便捷和高效。

在隐私安全方面,HarmonyOS 5.0(Next)采用了全新的安全架构和防护措施。系统深度整合了硬件级安全芯片和软件级安全防护机制,为用户的数据安全提供了全方位的保障。同时,系统还提供了丰富的隐私设置选项,让用户能够根据自己的需求灵活调整隐私权限,确保个人信息的安全和隐私。

1.1 项目背景

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

1.2 ArkTS详解

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

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

在这里插入图片描述

2.1 ArkTS页面源码

import router from '@ohos.router';
import http from '@ohos.net.http';
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
   
  @State activities: object[] = [
    {
   
    },
    {
   
    },
  ];
  @State username: string = ''
  @State password: string = ''


  S_login() {
   
    if (this.username == "admin" && this.password == "admin") {
   
      router.replaceUrl({
   
        // url: "pages/one",
        url: "pages/one",
        params: {
   
          activities:this.activities
        }
      })
    }
    else {
   
      promptAction.showToast({
   
        message:"密码或用户名错误,请重新输入"
      })
    }
  }



  build() {
   
    Row() {
   
      Column({
   space:17}) {
   
        Image($r("app.media.logo")).width(80)
        Text("XXXXXArkts例示案例")
        TextInput({
    placeholder: '输入用户名' })
          .width(300)
          .height(60)
          .fontSize(20)
          .onChange((value: string) => {
   
            this.username = value
          })
        TextInput({
    placeholder: '输入密码' })
          .width(300)
          .height(60)
          .fontSize(20)
          .type(InputType.Password)
          .onChange((value: string) => {
   
            this.password = value
          })
        Button('登录')
          .width(300)
          .height(60)
          .fontSize(20)
          .backgroundColor('#0F40F5')
          .onClick(() => {
   
            this.S_login();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.2 代码解析

这段代码是一个使用OHOS(OpenHarmony Operating System)开发的UI组件。它定义了一个名为Index的组件,该组件包含一个登录界面。

以下是对代码的详细分析:

  1. 首先,导入了三个模块:

    • router:用于页面跳转。
    • http:用于网络请求。
    • promptAction:用于显示提示信息,如Toast。
  2. Index组件定义了三个状态变量:

    • activities: 一个对象数组,初始为空。
    • username: 用户名字符串,初始为空。
    • password: 密码字符串,初始为空。
  3. S_login方法用于处理登录逻辑:

    • 如果用户名和密码都为"admin",则使用router.replaceUrl进行页面跳转,跳转到"pages/one",并将activities作为参数传递。
    • 否则,使用promptAction.showToast显示错误提示信息:"密码或用户名错误,请重新输入"。
  4. build方法定义了组件的构建结构:

    • 使用RowColumn布局组件创建一个垂直布局的行。
    • 在布局中添加以下元素:
      • 一个logo图片。
      • 文本"XXXXXArkts例示案例"。
      • 两个TextInput组件,分别用于输入用户名和密码。这两个组件的值变化会更新对应的usernamepassword状态变量。
      • 一个登录按钮。点击该按钮时,调用S_login方法进行登录处理。

整个组件就是一个简单的登录界面,用户可以输入用户名和密码进行登录,如果用户名和密码正确,则跳转到"pages/one"页面,否则显示错误提示信息。

2.3 心得

在分析和理解这段OHOS开发的UI组件代码过程中,以下是一些可能的心得体会:

  1. 模块化导入:代码中通过import语句导入了所需的模块,如routerhttppromptAction。这种模块化的设计有助于代码的组织和复用,使得代码结构更加清晰,同时也方便进行功能扩展。

  2. 状态管理:组件使用了@State装饰器来定义状态变量,如activitiesusernamepassword。这些状态变量在组件的生命周期中保持,并在状态变化时触发组件的重新渲染。这种方式有利于实现响应式编程,确保界面能够实时反映数据的变化。

  3. 方法封装:将登录逻辑封装在S_login方法中,实现了业务逻辑的分离。这种方法有助于提高代码的可读性和可维护性,使得代码更加模块化和易于测试。

  4. UI构建:使用布局组件(如RowColumn)和基础组件(如ImageTextTextInputButton)构建用户界面。这种声明式的UI构建方式使得界面设计更加直观和灵活,同时也能充分利用平台提供的优化和性能提升。

  5. 事件处理:在登录按钮上使用.onClick方法绑定点击事件,调用S_login方法进行登录处理。这种方式清晰地定义了用户交互与业务逻辑之间的关系,使得代码逻辑更加清晰。

  6. 用户体验:代码中考虑了用户体验的细节,如密码输入框使用.type(InputType.Password)设置为密码模式,保护用户隐私;错误提示信息使用promptAction.showToast显示,提供友好的反馈。

总的来说,这段代码展示了OHOS开发的一些最佳实践和特点,包括模块化、状态管理、方法封装、声明式UI构建和事件处理等。理解和掌握这些概念和技术,有助于编写出更加高效、可维护和具有良好用户体验的OHOS应用程序。

相关文章
|
1月前
|
数据安全/隐私保护
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
48 3
|
1月前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
65 2
|
9天前
|
人工智能 搜索推荐 数据挖掘
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
原生鸿蒙版小艺APP成功接入DeepSeek-R1,为HarmonyOS用户带来更智能高效的交互体验。通过此次升级,用户在编程、学习和工作中的问题可迅速获得专业解答。同时,此举为HarmonyOS应用开发者提供了新的技术参考,激发了更多创新应用场景的开发,助力打造差异化竞争优势,推动HarmonyOS生态繁荣发展。
136 68
原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
|
1天前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
21 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
2天前
|
存储 监控 算法
EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
阿里云EMAS(Enterprise Mobile Application Studio,简称EMAS)性能分析现已全面适配华为HarmonyOS NEXT操作系统,为企业客户及开发者提供覆盖应用全生命周期的性能监测与优化解决方案,助力企业抢占鸿蒙生态先机,赋能开发者打造极致体验。
|
1月前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
61 5
|
4天前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
51 28
|
1月前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
112 47
Harmony OS开发-ArkTS语言速成二
|
2月前
|
API 索引
鸿蒙开发:实现一个超简单的网格拖拽
实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。
86 13
鸿蒙开发:实现一个超简单的网格拖拽
|
2月前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘

热门文章

最新文章