HarmonyOS 应用开发实战：基于 ArkTS 的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0（Next）】
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 页面源码
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 框架下一个简单而完整的登录界面组件的实现，结合了界面设计、响应式编程、事件处理和模块化设计等方面的知识。
版权声明: 本文为 InfoQ 作者【申公豹】的原创文章。
原文链接:【http://xie.infoq.cn/article/ad3a27db6f78875ebc8759f67】。文章转载请联系作者。
申公豹本豹 2023-06-05 加入
🏆2022年InfoQ写作平台-签约作者 🏆
评论