HarmonyOS学习日记02——登录界面的构建

一、引言

在现代应用开发中，移动端应用的用户体验和性能表现愈发受到重视。作为华为推出的自有操作系统，鸿蒙（HarmonyOS）为开发者提供了一个全新的开发平台，它不仅具备了强大的分布式能力，还能够提供流畅的跨设备用户体验。随着鸿蒙生态的不断扩展，越来越多的开发者开始选择鸿蒙作为移动端应用的开发平台。

本技术文档旨在介绍如何使用鸿蒙系统开发一个包含多个页面（如登录、主页面、个人中心等）的移动应用，并详细解析其中的技术原理和实现方法。文中将重点分析页面间的页面逻辑、数据管理、UI 组件的使用，以及如何实现复杂的页面交互。

通过本文，读者将能够掌握如何使用鸿蒙系统的开发工具，理解页面跳转、数据存储、用户交互等关键技术，实现一个完整的应用。文档还将结合时序图和流程图，帮助开发者更好地理解和应用技术原理，从而更高效地进行开发与调试。

本报告将适用于正在学习鸿蒙开发的开发者，特别是那些希望了解如何组织页面逻辑和管理复杂页面交互的开发人员。通过该文档，读者不仅能够提升技术能力，还能够为实际应用开发提供解决方案。

注：由于博主是鸿蒙开发的初学者，如果文中有任何不准确或不完善之处，欢迎各位读者提出宝贵的意见和建议，感谢您的指正与支持。

二、效果预览

三、技术原理

1.登录页

（1）页面设计

登录页面的构建比较简单，整体布局使用 Column 容器，垂直布局。在一行中需要排列多个元素时使用 Row 容器进行水平布局。

页面中的组成元素包含图片（Image）、文本（Text）、输入框（TextInput）、按钮（Button）等。布局结构图如下

• 使用了 TextInput 组件（带有样式扩展）来输入账号和密码。

• 使用 Button 组件来显示登录按钮，点击后触发登录操作。

• Text 组件用于显示文字信息，比如提示信息、注册链接等。

• 页面使用了 Row 和 Column 进行布局。

• 使用了 Line 组件来分隔账号和密码输入框。

• 为了提升用户体验，页面在登录过程中显示 LoadingProgress，指示登录状态。

• 账号密码验证：输入框验证用户是否填写了账号和密码。

（2）网络请求

a. HttpUtils 类封装

使用 createHttp() 获取 HttpRequest 对象，并在构造方法中赋值。之后，通过封装 request() 方法实现了 get 和 post 请求。

b. get 请求封装

通过 request() 发起 get 请求，获取网络图片，并利用 @kit.CoreFileKit 进行文件管理，保存文件到沙箱路径。

c. post 请求封装

通过封装 request() 实现 post 请求，配置请求头（如设置返回类型为 json 格式以及处理附加参数 extraData，并通过 JSON.parse 解析响应数据。

d.自定义实体类

为了处理复杂的 json 响应，创建了 ResponseData 类，确保数据能够准确映射。

（3）页面跳转

通过创建路由栈对象并传递给 Navigation 组件用于路由跳转。

路由跳转功能主要通过NavPathStack提供的pushPathByName()方法实现。首先，我们需要为登录页的登录按钮绑定一个自定义的login()方法，该方法主要用于登录身份校验，这里我们仅仅进行对账号密码的非空校验，在账号密码均非空时，使用pushPathByName()方法实现从登录页到主页面的跳转。

2.首页

首页的内容比较简单，这里就不进行过多赘述。

页面设计

• 轮播图的实现，需要使用 Swiper 组件，可以使用 ForEach 进行循环渲染。
• 宫格可以通过网格组件 Grid 实现，以及其子组件 GridItem。

3.设置页

为了使代码的易于维护、扩展和测试，我们可以通过使用MVVM架构模式，用于封装首页、设置页的实现，以及首页、设置页所需实体类。

（1）页面设计

• 列表需要使用到的是 List 组件以及其子组件 ListItem。
• 切换状态的按钮通过 Toggle 组件实现。
• 通过 ForEach 循环渲染 ListItem。
• 分组列表的实现主要通过 List 以及 ListItemGroup，数据源需要修改为二维数组，通过二层 ForEach 进行列表的分组。
• 退出登录按钮部分通过 Button 组件实现。

（2）封装数据源

定义一个 getSettingListData() 方法，用于获取设置页列表数据。创建 ItemData 对象并将其放在 ItemData 类型的数组中，最后将该数组返回，通过调用该方法，我们就可以拿到设置页列表的所有信息，从而实现循环渲染。

（3）使用用户首选项（调节字体大小）

效果如下

a. 用户首选项工具类封装

• 通过 getPreferencesSync() 获取首选项实例，读取字体大小偏移量。

• 使用 putSync() 保存修改的字体大小，并通过 flush() 确保持久化。

• 将字体大小偏移量与系统默认值结合，动态调整字体大小。

b. 字体大小调节功能实现

• 在 aboutToAppear 生命周期方法中获取并更新字体大小。

• 将字体大小偏移量与 Text 组件的 fontsize 属性绑定，实时更新字体大小。

c. 自定义弹窗实现

• 创建SliderCustomDialog，使用 Slider 组件调节字体大小。

• 设置从-4到4的字体大小偏移量范围，确保每次调节都同步到首选项。

d. 设置页与弹窗绑定

• 弹窗触发：为字体大小调节按钮绑定自定义弹窗，通过 CustomDialogController 控制弹窗展示。

（4）页签转换

完成首页和设置页的开发后，我们将通过使用 Tabs 组件实现页面间切换。状态变量 currentIndex 是为了监听页签之间的切换，在 tabbar 被点击时，会根据被点击的 index 修改 currentIndex，并通过 tabsController 实现页签的切换。

4.目标页

（1） 数据库工具类封装

• 通过getRdbStore()获取RdbStore实例，封装数据库操作接口。

• 使用SQL语句创建运动表和计划表。

• 通过 batchInsert() 批量插入运动数据，insert() 插入单条计划。

• 封装 querySql() 实现查询所有计划、时长去重和条件查询。

• 通过 update() 和 delete() 方法进行计划的修改和删除，使用 RdbPredicates 作为查询条件。

（2）功能实现

• 动态更新计划的时长选项，通过查询时长数据并更新下拉框。

• 支持增、删、改计划，包括插入新计划、修改已有计划和删除计划。

（3）UI与交互

• 使用 Select 组件和 List 组件渲染计划列表，结合筛选功能。

• 为重置、筛选、编辑、新增、删除按钮绑定相应操作，涉及半模态的操作实现。

五、结论

本项目是我作为一名编程初学者自学鸿蒙（HarmonyOS）过程中的重要实践。在没有 C 语言基础的情况下，我从零开始分析和运行一个完整的鸿蒙应用项目，逐步理解了 ArkTS 编程模型、页面组件的组织结构、系统能力的调用方式，以及资源文件的管理机制。

通过深入学习各个 .ets 控制器和页面文件，我逐步掌握了如何构建基础 UI、管理音视频资源、使用 VoIP 通话能力、封装 HTTP 请求、操作本地数据库，以及实现设置页中的字体调节等功能。虽然起步较晚，过程充满挑战，但通过不断阅读官方文档、调试代码和查阅资料，我一步步攻克了文件引用、资源加载、组件语法等常见问题。

在这个过程中，我深刻体会到了鸿蒙系统模块化、解耦强、资源清晰分层的设计理念。像 app.json、module、module.json5等配置文件对整个项目的运行起着核心作用，而 string.json、color.json  等资源文件也极大地方便了多语言支持和样式统一。通过将这些文件结构理清，我对鸿蒙项目的整体构建流程有了更系统的认识。

这次学习经历让我更加坚定了继续深入鸿蒙开发的决心。未来我希望能探索分布式能力、设备协同等更高级的功能，并将自己学习过程中遇到的坑与经验持续分享出来，帮助和我一样的初学者少走弯路。

如果你也是鸿蒙学习者，欢迎留言交流，一起成长！