#星计划# HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】 原创
一.HarmonyOS应用开发实战—开箱即用的登录页面2【ArkTS】
1.1 项目背景
HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。
这是我做项目中用到的应该展示页面。
在这里插入图片描述
1.2 ArkTS详解
ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。 自然简洁语法 ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。 轻量化并发机制 ArkCompiler运行时在HarmonyOS上提供了Worker API支持并发编程。在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。
二.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的组件，该组件包含一个登录界面。
以下是对代码的详细分析：
- 首先，导入了三个模块：
-
router：用于页面跳转。 -
http：用于网络请求。 -
promptAction：用于显示提示信息，如Toast。
-
Index组件定义了三个状态变量：
-
activities: 一个对象数组，初始为空。 -
username: 用户名字符串，初始为空。 -
password:mm字符串，初始为空。
-
S_login方法用于处理登录逻辑：
- 如果用户名和mm都为"admin"，则使用
router.replaceUrl进行页面跳转，跳转到"pages/one"，并将activities作为参数传递。 - 否则，使用
promptAction.showToast显示错误提示信息："mm或用户名错误，请重新输入"。
-
build方法定义了组件的构建结构：
- 使用
Row和Column布局组件创建一个垂直布局的行。 - 在布局中添加以下元素：
- 一个logo图片。
- 文本"XXXXXArkts例示案例"。
- 两个
TextInput组件，分别用于输入用户名和mm。这两个组件的值变化会更新对应的username和password状态变量。 - 一个登录按钮。点击该按钮时，调用
S_login方法进行登录处理。
整个组件就是一个简单的登录界面，用户可以输入用户名和mm进行登录，如果用户名和mm正确，则跳转到"pages/one"页面，否则显示错误提示信息。
2.3 心得
在分析和理解这段OHOS开发的UI组件代码过程中，以下是一些可能的心得体会：
- 模块化导入：代码中通过
import语句导入了所需的模块，如router、http和promptAction。这种模块化的设计有助于代码的组织和复用，使得代码结构更加清晰，同时也方便进行功能扩展。 - 状态管理：组件使用了
@State装饰器来定义状态变量，如activities、username和password。这些状态变量在组件的生命周期中保持，并在状态变化时触发组件的重新渲染。这种方式有利于实现响应式编程，确保界面能够实时反映数据的变化。 - 方法封装：将登录逻辑封装在
S_login方法中，实现了业务逻辑的分离。这种方法有助于提高代码的可读性和可维护性，使得代码更加模块化和易于测试。 - UI构建：使用布局组件（如
Row和Column）和基础组件（如Image、Text、TextInput和Button）构建用户界面。这种声明式的UI构建方式使得界面设计更加直观和灵活，同时也能充分利用平台提供的优化和性能提升。 - 事件处理：在登录按钮上使用
.onClick方法绑定点击事件，调用S_login方法进行登录处理。这种方式清晰地定义了用户交互与业务逻辑之间的关系，使得代码逻辑更加清晰。 - 用户体验：代码中考虑了用户体验的细节，如mm输入框使用
.type(InputType.Password)设置为mm模式，保护用户隐私；错误提示信息使用promptAction.showToast显示，提供友好的反馈。
总的来说，这段代码展示了OHOS开发的一些最佳实践和特点，包括模块化、状态管理、方法封装、声明式UI构建和事件处理等。理解和掌握这些概念和技术，有助于编写出更加高效、可维护和具有良好用户体验的OHOS应用程序。
感谢分享