HarmonyOS应用开发实战：基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0（Next）】
一.HarmonyOS Next 5.0
发布时间：2024年10月22日，在华为全场景新品发布会上正式发布。
地位：HarmonyOS NEXT成为全球继苹果iOS和安卓系统后的第三大移动操作系统，标志着华为在操作系统领域的重大突破。
原生智能：
通过系统级AI能力，将AI下沉至操作系统并赋能给多个子系统，提升应用智能化体验。
小艺助手增强记忆能力，支持多达23类常用记忆类型，具备更强的推理规划能力，任务成功率高达90%。
小艺的知识问答能力增强，掌握万亿级tokens的知识量，更开放，通过意图框架接入300+服务。
交互设计更新，常驻屏幕底部，方便用户随时唤醒。
原生互联：
分布软总线全面升级，实现更便捷、开放、自由的全场景体验。
多种设备共享一个系统，设备间可以相互感知，应用、服务和内容在设备间无缝自由流转和分享。
原生安全：
全新的星盾安全架构，重建操作系统的安全体系和秩序。
全面梳理系统授权，禁止开放9类不合理权限，首创安全访问机制，从“管权限”到“管数据”，确保用户隐私安全。
原生流畅：
系统垂直整合与开发者深入合作优化，确保系统应用与三方应用的一致流畅体验。
整机性能显著提升，游戏体验全方位升级。
原生精致：
全新的设计风格，包括沉浸光影、趣味主题、中式对称、引力动效、高效交互等。
提供更加好看、个性、好玩的用户体验。
1.1 项目背景
HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。
这是我做项目中用到的应该展示页面。
1.2 ArkTS详解
ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。
自然简洁语法
ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。
轻量化并发机制
ArkCompiler运行时在HarmonyOS上提供了Worker API支持并发编程。在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。
二.HarmonyOS应用开发实战—开箱即用的登录页面3【ArkTS】
2.1 ArkTS页面源码
import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
@Entry
@Component
struct Login {
@State message: string = 'Hello World'
private userName: string = ''
private password: string = ''
@State loadingWidth: number = 0
build() {
Row() {
Column() {
Image($r('app.media.icon'))
.width(100)
.height(100)
Text('登陆界面')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.margin(15)
Text('登录找以使用更多服务')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor("#a0a0a0")
Column(){
TextInput({
placeholder: '账号'})
.maxLength(10)
.margin({
bottom: 20})
.onChange((value: string) => {
this.userName = value
})
TextInput({
placeholder: '密码'})
.type(InputType.Password)
.maxLength(10)
.margin({
bottom: 20})
.onChange((value: string) => {
this.password = value
})
Row(){
Text('短信验证登录')
.fontColor("#007dff")
Text('忘记密码')
.fontColor("#007dff")
}.justifyContent(FlexAlign.SpaceBetween).width("100%")
Button('登录')
.width('100%')
.margin({
top: 70})
.onClick(() => {
if(this.userName.trim() == '') {
promptAction.showToast({
message: '账户不能为空！',
duration: 2000
})
return
}
if(this.password.trim() == '') {
promptAction.showToast({
message: '密码不能为空！',
duration: 2000
})
return
}
this.loadingWidth = 60
setTimeout(() => {
if(this.userName.trim() === 'admin' && this.password.trim() === '123456'){
router.replaceUrl({
url: "pages/Index"
})
}else {
promptAction.showToast({
message: '账户或密码错误',
duration: 2000
})
}
this.loadingWidth = 0
},2000)
})
Text('注册账号')
.fontColor('#258ffe')
.margin(15)
LoadingProgress()
.color('#007dfe')
.height(this.loadingWidth)
.width(this.loadingWidth)
Text('其他方式登录')
.fontColor('#a0a0a0')
.fontWeight(FontWeight.Bold)
.fontSize(13)
.margin({
top: 10})
Row(){
Button('方式一', {
type: ButtonType.Circle})
.height(65)
.backgroundColor('#efefef')
.fontColor('#000000')
.border({
width: 1
})
Button('方式二', {
type: ButtonType.Circle})
.height(65)
.backgroundColor('#efefef')
.fontColor('#000000')
.border({
width: 1
})
Button('方式三', {
type: ButtonType.Circle})
.height(65)
.backgroundColor('#efefef')
.fontColor('#000000')
.border({
width: 1
})
}.justifyContent(FlexAlign.SpaceAround)
.width('100%')
.margin({
top: 15})
}.width("90%").margin({
top: 30})
}
.width('100%')
}
.height('100%')
.backgroundColor('#efefef')
}
}
2.2 代码解析
这段代码是一个使用 HarmonyOS 框架编写的登录界面的组件。以下是对代码的简要解析：
导入模块：
promptAction: 从@ohos.promptAction模块导入用于显示提示信息的功能。router: 从@ohos.router模块导入用于路由管理的功能。
组件定义：
- 使用
@Entry和@Component注解定义了一个名为Login的组件结构。 - 在组件结构中定义了一些状态（
@State），如message、loadingWidth、userName和password。
- 使用
界面布局：
- 使用
Row和Column组件来创建布局。 - 包含了一个图像、两个文本元素、两个文本输入框（分别用于输入账号和密码）、两个按钮（"登录" 和 "注册账号"）、一个加载进度条、一组按钮（"方式一"、"方式二"、"方式三"）等。
- 使用
事件处理：
- 在账号和密码的文本输入框中，使用
onChange监听器更新userName和password状态。 - 在 "登录" 按钮中，使用
onClick监听器验证输入的账号和密码，然后根据验证结果执行相应的操作，如页面跳转或显示错误提示。
- 在账号和密码的文本输入框中，使用
样式设置：
- 对各个组件进行了样式设置，包括大小、颜色、边框等。
异步操作：
- 使用
setTimeout模拟异步操作，例如在登录按钮点击后，等待2秒后执行验证逻辑，期间显示加载进度条。
- 使用
路由导航：
- 在登录成功的情况下，使用
router.replaceUrl进行路由导航，跳转到名为 "pages/Index" 的页面。
- 在登录成功的情况下，使用
总体而言，这段代码描述了一个简单的登录界面，包括输入账号和密码、点击登录按钮进行验证，显示加载进度条，并根据验证结果进行页面跳转或提示用户。
2.3 心得
这段代码展示了一个基于 HarmonyOS 框架的登录界面组件的实现。以下是我的一些心得：
清晰的组件结构：通过使用
@Entry和@Component注解，代码清晰地定义了一个名为Login的组件。这样的结构使得组件的用途和功能一目了然，有助于代码的维护和理解。响应式设计：通过使用
@State注解，代码引入了一些响应式的状态，如message、loadingWidth、userName和password。这些状态的变化会触发界面的重新渲染，实现了动态更新和交互性。布局和样式设置：使用了 HarmonyOS 提供的
Row、Column、Text、Button等组件，通过链式调用方法设置了各个组件的样式和布局。这种声明式的风格使得界面的构建和设计更为直观。事件处理：通过在文本输入框和按钮上添加监听器，实现了对用户输入和点击事件的响应。例如，在登录按钮点击时，进行账号和密码的验证，并根据验证结果执行相应的操作。
异步操作和加载进度条：通过使用
setTimeout模拟异步操作，代码展示了在进行长时间任务（如登录验证）时如何展示加载进度条，提高用户体验。模块化设计：通过导入
promptAction和router模块，代码展示了如何利用 HarmonyOS 提供的模块来实现一些通用的功能，例如显示提示信息和进行页面导航。路由导航：在登录成功的情况下，使用
router.replaceUrl进行了页面导航，这是一种常见的应用程序导航方式，提供了流畅的用户体验。
总体而言，这段代码展示了 HarmonyOS 框架下一个简单而完整的登录界面组件的实现，结合了界面设计、响应式编程、事件处理和模块化设计等方面的知识。
