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

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

本页面实战效果预览图

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

一.HarmonyOS应用开发

1.1HarmonyOS 详解

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

以下是一些 HarmonyOS 的关键特点和设计理念:

  1. 全场景适配:HarmonyOS 被设计为一个全场景操作系统,可以在各种终端设备上运行,无论是小型传感器设备还是大型的显示屏幕设备。
  2. 分布式架构:HarmonyOS 引入了分布式架构的概念,使得多个设备能够协同工作,共同完成任务。这使得设备之间的通信更加灵活,用户体验更加一致。
  3. 一次开发,多端部署:HarmonyOS 提倡一次开发,多端部署的理念,开发者可以使用相同的代码和开发工具,将应用程序轻松部署到不同类型的设备上。
  4. 微内核架构:HarmonyOS 使用微内核架构,将操作系统内核划分为一个小型的内核和一系列服务。这有助于提高系统的可靠性和安全性,并简化系统的维护和升级。
  5. 面向未来的技术:HarmonyOS 支持面向未来的技术,包括分布式数据管理、分布式安全、分布式图形等。这使得系统更具创新性,适应未来设备和应用的发展。
  6. 开放源代码:HarmonyOS 是一个开源操作系统,这意味着开发者可以访问其源代码,并根据需要进行修改和定制。这有助于推动开发者社区的参与和生态系统的发展。

总体而言,HarmonyOS 是为了适应未来全球数字化生活的需求而设计的一种操作系统。它的目标是提供更加统一、开放、灵活的操作系统平台,使得开发者能够更轻松地创建跨设备的应用程序,并为用户提供一致的、流畅的使用体验。

1.2 ArkTS详解

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

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

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

2.1 ArkTS页面源码

import router from '@ohos.router'
import prompt from '@ohos.prompt'
import promptAction from '@ohos.promptAction'
// import {Login, AuthMode} from "@ohos/agconnect-auth-component";
@Entry
@Component
struct LoginPage {
  @State password: string = ''
  @State username: string = ''
  @State phone: string = ''
  build() {
    Column() {
      Text("登陆")
        .fontSize(50)
        .fontWeight(FontWeight.Bold).margin({
        bottom: 60
      })
      Row() {
        Text("用户名")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Row() {
        Image($r("app.media.name")).width(30)
        TextInput({
          placeholder: "请输入用户名"
        }).width(300).onChange((val: string) => {
          this.username = val
        })
      }.margin({
        bottom: 8,
        top: 8
      }).width("100%")

      Divider().strokeWidth(4)

      Row() {
        Text("密码")
          .fontSize(18)
          .fontWeight(FontWeight.Bold).margin({
          bottom: 8,
          top: 8
        })
      }.width("100%")

      Row() {
        Image($r("app.media.password")).width(30)

        TextInput({
          placeholder: "请输入密码"
        }).width(300).onChange((val: string) => {
          this.password = val
        }).type(InputType.Password)
      }.width("100%")

      Divider().strokeWidth(4)
      Row() {
        Blank()
        Text("忘记密码?")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
      }.width("100%")

      Button("登陆").width("90%").height(60).backgroundColor(Color.Orange).onClick(() => {
        if (this.username == "admin" && this.password == "admin") {
          router.replaceUrl({
            url: "page/homepage",
            params: {
              name: this.username
            }
          })
        }
        else {
          promptAction.showToast({
            message:"密码或用户名错误,请重新输入"
          })
        }
      }).margin({
        top: 30,
      })

      Row() {
        Button('第三方登陆')
          .width("140vp")
          .height("80vp")
          .fontSize(20)
          .margin({
            bottom: 40,
            top: 60,
            right: 20
          })
        Button('立即注册')
          .width("140vp")
          .height("80vp")
          .fontSize(20)
          .margin({
            bottom: 40,
            top: 60,
          })
      }
      Image($r("app.media.logo")).width(80)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .padding({
      left: 20,
      right: 20
    })
  }
}

2.2 代码解析

这段代码是使用 HarmonyOS的 UI 组件进行页面布局和交互的代码。以下是对代码的分析:

  1. 导入模块:

import router from '@ohos.router'
import prompt from '@ohos.prompt'
import promptAction from '@ohos.promptAction'

这里导入了一些 HarmonyOS 提供的模块,包括用于导航的 ​​router​​​ 模块和用于提示的 ​​prompt​​​ 和 ​​promptAction​​ 模块。

  1. 页面定义:

@Entry
@Component
struct LoginPage {
  // ...
}

使用了 HarmonyOS 的注解(​​@Entry​​​ 和 ​​@Component​​​)来定义一个名为 ​​LoginPage​​ 的页面组件。

  1. 状态管理:

@State password: string = ''
@State username: string = ''
@State phone: string = ''

使用 ​​@State​​​ 注解定义了三个状态变量 ​​password​​​、​​username​​​ 和 ​​phone​​。

  1. UI 布局:

build() {
  Column() {
    // ... UI 布局代码
  }
  .width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
  .padding({
    left: 20,
    right: 20
  })
}

在 ​​build​​​ 方法中,使用 HarmonyOS 提供的 UI 组件进行页面布局,包括 ​​Column​​​、​​Row​​​、​​Text​​​、​​Image​​​、​​TextInput​​​、​​Divider​​ 等。通过这些组件的嵌套和设置属性,构建了登录页面的 UI 结构。

  1. 事件处理:

Button("登陆").onClick(() => {
  // ... 按钮点击事件处理代码
})

当点击登录按钮时,会执行相应的事件处理代码。在这里,根据输入的用户名和MM进行简单的验证,如果是 admin/admin 则导航到首页,否则显示错误提示。

  1. 页面元素设置:设置了页面中的文字大小、字体加粗、边距、背景颜色等属性,以及按钮的点击事件处理。

2.3 心得

这段代码展示了 HarmonyOS 应用程序开发的一些关键概念和技术。以下是一些心得:

  1. 声明式 UI 布局:HarmonyOS 使用声明式 UI 的方式,通过组合不同的 UI 组件和设置属性来构建用户界面。这种方式使得 UI 布局清晰易读,更容易理解和维护。
  2. 状态管理:使用 ​​@State​​ 注解来定义状态变量,这些变量用于跟踪用户输入的数据。状态管理是构建交互式应用程序的关键,它允许界面与数据同步更新。
  3. 事件处理:通过为按钮等组件添加事件处理函数,实现了用户交互。在这里,按钮的点击事件触发了简单的用户名和mm验证,并根据验证结果执行不同的操作。
  4. 路由导航:使用 ​​router​​ 模块进行路由导航,根据验证结果跳转到不同的页面。这是应用程序导航的重要组成部分,使得用户能够在不同的界面之间进行切换。
  5. 模块化开发:通过导入 ​​router​​​、​​prompt​​​ 和 ​​promptAction​​ 等模块,代码实现了模块化开发的思想。这种模块化的方式使得代码更加结构清晰,易于维护。
  6. UI 组件的灵活使用:代码中使用了多种 UI 组件,如 ​​Text​​​、​​Image​​​、​​TextInput​​​、​​Button​​ 等,展示了 HarmonyOS 提供的丰富组件库。这些组件可以通过链式调用方法来设置各种样式和属性,提供了灵活的界面设计选项。

总体来说,这段代码是一个入门级别的 HarmonyOS 应用程序示例,涵盖了常见的 UI 布局、状态管理、事件处理和导航等方面。理解这些概念对于开发更复杂的 HarmonyOS 应用程序是很有帮助的。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2024-1-27 10:45:38修改
1
收藏
回复
举报
回复
    相关推荐