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 应用程序是很有帮助的,希望这篇文章对你有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/682289.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

wlan二层旁挂组网实验

实验拓扑图 代码&#xff1a; SW1 <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sysn sw1 [sw1]undo info-center enable Info: Information center is disabled. [sw1]vlan batch 10 20 30 Info: This operation may take a few seconds. …

Error: error:0308010C:digital envelope routines::unsupported 问题如何解决

Error: error:0308010C:digital envelope routines::unsupported 通常与 Node.js 的加密库中对某些加密算法的支持有关。这个错误可能是因为 Node.js 的版本与某些依赖库不兼容导致的。特别是在 Node.js 17 版本中&#xff0c;默认使用 OpenSSL 3&#xff0c;而一些旧的加密方式…

socket实现TCP UDP

1、socket通信建立流程 1.1、创建服务端流程 使用 socket 函数来创建 socket服务。 使用 bind 函数绑定端口。 使用 listen 函数监听端口。 使用 accept 函数接收客户端请求。 1.2、创建客户端流程 使用 socket 函数来创建 socket 服务。 使用 connect 函数连接到 socke…

探索智能编程新境界:我与Baidu Comate的独特体验之旅

文章目录 一、认识Baidu Comate二、VS Code安装Baidu Comate教程三、Baidu Comate功能体验功能概览具体功能1.根据注释自动生成代码2.函数注释3.行间注释4.代码解释5.生成单元测试6.代码优化7.答疑解惑 四、交互体验五、总结 一、认识Baidu Comate ✨Baidu Comate插件是一款基…

漏洞管理是如何在攻击者之前识别漏洞从而帮助人们阻止攻击的

漏洞管理 是主动查找、评估和缓解组织 IT 环境中的安全漏洞、弱点、差距、错误配置和错误的过程。该过程通常扩展到整个 IT 环境&#xff0c;包括网络、应用程序、系统、基础设施、软件和第三方服务等。鉴于所涉及的高成本&#xff0c;组织根本无法承受网络攻击和数据泄露。如果…

Spring底层入门(九)

boot的执行流程分为构造SpringApplication对象、调用run方法两部分 1、Spring Boot 执行流程-构造 通常我们会在SpringBoot的主启动类中写以下的代码&#xff1a; 参数一是当前类的字节码&#xff0c;参数二是main的args参数。 public class StartApplication {public static…

Selenium 自动化 —— 常用的定位器(Locator)

什么是定位器 定位器&#xff08;Locator&#xff09;是识别DOM中一个或多个特定元素的方法。 也可以叫选择器 Selenium 通过By类&#xff0c;提供了常见的定位器。具体语法如下&#xff1a; By.xxx("");我们选择单个元素时可以使用findByElement&#xff1a; Web…

JUC下的ForkJoinPool详解

详细介绍 ForkJoinPool 是 Java 并发包 (java.util.concurrent) 中的一个特殊线程池&#xff0c;专为分治算法设计&#xff0c;能够高效地处理大量可分解的并行任务。它基于工作窃取&#xff08;work-stealing&#xff09;算法&#xff0c;当一个工作线程的任务队列为空时&…

pytest教程-43-钩子函数-pytest_report_header

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_runtest_makereport钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_report_header钩子函数的使用方法。 pytest_report_header 钩子函数允许你在 pytest 的终端报告的头部添…

在此计算机上找不到autocad20*你需要安装autocad20*才可以安装此语言包,安装不成功的解决办法

因为AutoCAD2020未卸载干净导致&#xff0c;需要把AutoCAD2020的注册表清理干净&#xff0c;才可以安装 注册表打开&#xff0c;HKEY LOCAL MACHINE SOFTWARE Classesinstaller Products\7D2F3875100F0000102000060BECB6AB AHKEY LOCAL MACHINE SOFTWARE Classesinstaller Pro…

网工内推 | 技术支持工程师,最高15k,加班有补贴

01 星网信通 招聘岗位&#xff1a;售前技术支持 职责描述&#xff1a; 1、售前技术支持&#xff1a;技术交流、产品选型报价、方案制作等工作&#xff1b; 2、招投标支持&#xff1a;项目招标参数撰写、标书质疑、应标文件技术部分撰写及资质文件归纳准备、现场讲标及技术澄清…

Java 语法 (杂七杂八的知识)

面向对象三大特性 封装, 多态, 继承 基本数据类型 一字节 (Byte) 占八位 (bit) JDK, JRE, JVM JDK (Java Development Kit) : Java 开发工具包, 包括了 JRE, 编译器 javac, 和调试工具 Jconsole, jstack 等 JRE (Java Runtime Environment) : Java 运行时环境, 包括了 JVM , …