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

2024-05-10 00:36
文章标签 harmonyos arkts 页面 登录 用户 应用 开发 使用

本文主要是介绍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 应用程序是很有帮助的，希望这篇文章对你有所帮助！

这篇关于HarmonyOS开发之ArkTS使用：用户登录页面应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/974931。

相关文章

Spark的应用场景有哪些？

Spark的应用场景有哪些？

Spark 是一种与 Hadoop 相似的开源集群计算环境，是专为大规模数据处理而设计的快速通用的计算引擎，现已形成一个高速发展应用广泛的生态系统，主要应用场景如下： 　　1. Spark是基于内存的迭代计算框架，适用于需要多次操作特定数据集的应用场合。需要反复操作的次数越多，所需读取的数据量越大，受益越大，数据量小但是计算密集度较大的场合，受益就相对较小; 　　2. 由于RDD的特性，Spa
阅读更多...
使用Array实现Java堆栈

使用Array实现Java堆栈

本教程给出了使用Array 实现Stack数据结构的示例。堆栈提供将新对象放在堆栈上（方法push（））并从堆栈中获取对象（方法pop（））。堆栈根据后进先出（LIFO）返回对象。请注意，JDK提供了一个默认的Java堆栈实现作为类java.util.Stack。 适用于所有堆栈实现的两个强制操作是： push（）：数据项放置在堆栈指针指向的位置。pop（）：从堆栈指针指向的位置删除并返回数据
阅读更多...
Spring Boot - 使用类类型信息获取所有已加载的bean

Spring Boot - 使用类类型信息获取所有已加载的bean

Spring启动会在内部加载大量bean，以最少的配置运行您的应用程序。在这个例子中，我们将学习如何找出所有那些Spring boot加载的bean及其类类型信息。 使用ApplicationContext获取所有已加载的bean 要自动执行方法，当应用程序完全加载时，我正在使用CommandLineRunner接口。CommandLineRunner用于指示bean 在Spring应用程序中
阅读更多...
Apache Shiro对web应用的支持-08

Apache Shiro对web应用的支持-08

Apache Shiro for Web Applications 虽然Apache Shiro旨在用于保护任何基于JVM的应用程序，但它最常用于保护Web应用程序。它极大地简化了基于简单URL模式匹配和过滤器链定义来保护Web应用程序的方式。除了Shiro的API之外，Shiro的Web支持还包括一个丰富的JSP标记库来控制页面输出。 特征 简单的ShiroFilter web.xml定
阅读更多...
使用ThreadPoolExecutor创建线程池有哪些关键参数

使用ThreadPoolExecutor创建线程池有哪些关键参数

1、ThreadPoolExecutor类的全参数构造方法： /*** Creates a new {@code ThreadPoolExecutor} with the given initial* parameters.** @param corePoolSize the number of threads to keep in the pool, even* if they
阅读更多...
关于Java的数组的使用

关于Java的数组的使用

关于一维数组的使用 代码示例一如下： package com;public class test_array {public static void main(String[] args){//1.如何定义 一个 数组//1.1数组的声明String[] names;int[] scores;//1.2数组的初始化：//1.2.1静态初始化：初始化数组与数组元素赋值同时进行nam
阅读更多...
Android_03_数据库的使用总结

Android_03_数据库的使用总结

前言： 1>区分SQL和SQLite SQL 是一门 ANSI 的标准计算机语言，用来访问和操作数据库系统。SQL 语句用于取回和更新数据库中的数据。 SQL 可与数据库程序协同工作，比如 MS Access、DB2、Informix、MS SQL Server、Oracle、Sybase 以及其他数据库系统。 不幸地是，存在着很多不同版本的 SQL 语言，但是为了与 ANSI 标准相
阅读更多...
Android_02_关于SharePreferences的使用

Android_02_关于SharePreferences的使用

前言： 我们使用SharePreferences的主要目的是针对一些简单的数据进行存取，其是通过键值对来存取的， 其实质是通过xml文件进行保存的；对于一些简单数据的存取，我们可以用SharePreferences，替代 其他几种复杂的数据存取的方式，比如文件的读写或者数据库的操作； 本示例演示的内容是：通过SharedPreferences来实现记住密码的功能，无需第二次再输入密码
阅读更多...
Source Insight的安装及使用

Source Insight的安装及使用

第一步：source insight的下载及安装 source insight的资源下载见如下链接： http://download.csdn.net/detail/u010661782/9454935 第二步：source insight的使用 1>新建工程 project  ----->  new project  ------>   填写工程名和工程存放
阅读更多...
Java的clone()方法使用详解

Java的clone()方法使用详解

前言： 我们知道，在java的object类中，有这么一个方法clone()，这个方法有什么用呢？怎样才能正确地使用这个方法呢？ 下面一一来进行阐述一下 clone()方法详解： 1>clone()方法的作用 顾名思义，clone()方法的作用就是克隆的意思，引入这个方法，这样就便于我们构建属于自己的一些本地对象副本。 这样我们就不用担心因为副本对象的引用而使原生的对象发生改变。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2