#星计划# HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】 原创

申公豹CTO
发布于 2024-1-27 11:00
浏览
0收藏

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

1.1 项目背景

HarmonyOS(鸿蒙操作系统)是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统,旨在实现在各种设备之间的无缝协同和共享,包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。

这是我做项目中用到的应该展示页面。

#星计划# HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】-鸿蒙开发者社区在这里插入图片描述

1.2 ArkTS详解

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

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

#星计划# 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。
  1. ​Index​​组件定义了三个状态变量:
  • ​activities​​: 一个对象数组,初始为空。
  • ​username​​: 用户名字符串,初始为空。
  • ​password​​:mm字符串,初始为空。
  1. ​S_login​​方法用于处理登录逻辑:
  • 如果用户名和mm都为"admin",则使用​​router.replaceUrl​​​进行页面跳转,跳转到"pages/one",并将​​activities​​作为参数传递。
  • 否则,使用​​promptAction.showToast​​显示错误提示信息:"mm或用户名错误,请重新输入"。
  1. ​build​​方法定义了组件的构建结构:
  • 使用​​Row​​​和​​Column​​布局组件创建一个垂直布局的行。
  • 在布局中添加以下元素:
  • 一个logo图片。
  • 文本"XXXXXArkts例示案例"。
  • 两个​​TextInput​​​组件,分别用于输入用户名和mm。这两个组件的值变化会更新对应的​​username​​​和​​password​​状态变量。
  • 一个登录按钮。点击该按钮时,调用​​S_login​​方法进行登录处理。

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

2.3 心得

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

  1. 模块化导入:代码中通过​​import​​​语句导入了所需的模块,如​​router​​​、​​http​​​和​​promptAction​​。这种模块化的设计有助于代码的组织和复用,使得代码结构更加清晰,同时也方便进行功能扩展。
  2. 状态管理:组件使用了​​@State​​​装饰器来定义状态变量,如​​activities​​​、​​username​​​和​​password​​。这些状态变量在组件的生命周期中保持,并在状态变化时触发组件的重新渲染。这种方式有利于实现响应式编程,确保界面能够实时反映数据的变化。
  3. 方法封装:将登录逻辑封装在​​S_login​​方法中,实现了业务逻辑的分离。这种方法有助于提高代码的可读性和可维护性,使得代码更加模块化和易于测试。
  4. UI构建:使用布局组件(如​​Row​​​和​​Column​​​)和基础组件(如​​Image​​​、​​Text​​​、​​TextInput​​​和​​Button​​)构建用户界面。这种声明式的UI构建方式使得界面设计更加直观和灵活,同时也能充分利用平台提供的优化和性能提升。
  5. 事件处理:在登录按钮上使用​​.onClick​​​方法绑定点击事件,调用​​S_login​​方法进行登录处理。这种方式清晰地定义了用户交互与业务逻辑之间的关系,使得代码逻辑更加清晰。
  6. 用户体验:代码中考虑了用户体验的细节,如mm输入框使用​​.type(InputType.Password)​​设置为mm模式,保护用户隐私;错误提示信息使用​​promptAction.showToast​​显示,提供友好的反馈。

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
已于2024-1-27 17:06:25修改
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
忙忙忙困困困
忙忙忙困困困

感谢分享

回复
2024-2-4 12:45:09
回复
    相关推荐