HarmonyOS开发之ArkTS使用：用户登录页面应用

目录

目录

前言

关于HarmonyOS

环境准备

新建项目

设计用户登录页面

1. 布局设计

2. 编写ArkTS代码

运行和测试

结束语

---

前言

随着HarmonyOS（鸿蒙操作系统）的不断发展，越来越多的开发者开始投入到这个全新的生态系统中，而ArkTS（Adaptive Runtime for TypeScript）作为HarmonyOS的声明式UI编程语言，为开发者提供了高效、简洁的开发体验，尤其是对于前端开发者入手鸿蒙OS开发来说更是如鱼得水。那么本文就来介绍如何使用ArkTS，这里以创建一个简单的用户登录页面应用来做具体分享。

关于HarmonyOS

关于HarmonyOS的基本内容，HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统，它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。也是我们的国光操作系统，值得推荐！

环境准备

在开始之前，请确保已经安装了DevEco Studio（华为开发者联盟提供的官方IDE）以及HarmonyOS SDK，与此同时，还需要对ArkTS的基本语法和组件有一定的熟悉和了解，这样才能更好的快速入手体验。

新建项目

接下来就是直接去做创建项目的操作，上面如果把开发环境安装完毕之后，就可以直接创建项目了，大概步骤如下所示：

1. 打开DevEco Studio，选择“Create New Project”；
2. 然后在项目模板中选择“Empty Feature Ability (ArkTS)”；
3. 填写项目信息，比如项目名称、保存位置等，这里就不再过多介绍，具体以实际情况填写即可，然后点击“Finish”即可。

设计用户登录页面

创建新的项目之后，先要根据设计的登录页面来开发，这里着重分享一下用户登录页面的设计的内容。具体步骤如下所示：

1. 布局设计

在新建项目的resources/base/layout目录下创建一个新的XML布局文件，比如login_layout.xml，然后在这个文件中，可以使用ArkUI提供的组件来设计登录页面的布局，使用TextField组件来输入用户名和密码，使用Button组件来提交登录请求等设置。

2. 编写ArkTS代码

然后在对应的.ets文件中（通常是与布局文件同名的.ets文件），可以使用ArkTS来编写页面的逻辑代码。以下是一个简单的示例，具体如下所示：

# ArkTS页面源码

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

@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
    })
  }
}

上面的登录页面实现之后，运行之后，具体效果如下所示：

运行和测试

在DevEco Studio中点击运行按钮（或使用快捷键），将应用部署到模拟器或真机上进行测试。在登录页面中输入用户名和密码，然后点击“登录”按钮，查看控制台输出以验证代码是否按预期工作。到此为止，整个开发流程全部结束，本篇文章内容也要到此结束。

结束语

通过本文内容，介绍了如何使用ArkTS来创建一个简单的用户登录页面应用，通过设计布局、编写ArkTS代码和运行测试等步骤，你可以快速掌握ArkTS的基本用法并开发出具有交互性的HarmonyOS应用。需要说明的是本文示例代码是一个较为简单的 HarmonyOS 应用程序示例，但是涵盖了常见的 UI 布局、状态管理、事件处理和导航等内容，是一个比较全面的入门案例，你也可以在这个示例代码中做自己的修改。我觉得理解这些概念对于开发更复杂的 HarmonyOS 应用程序是很有帮助的，希望这篇文章对你有所帮助！