HarmonyOS Next 记事本应用开发实践

作者：知识浅谈

2025-05-16
广东
本文字数：2456 字
阅读完需：约 8 分钟

一、项目背景

随着鸿蒙生态的不断壮大，越来越多的开发者开始尝试基于 HarmonyOS Next 进行原生应用开发。本文将结合我近期开发的“记事本”项目，分享如何用 ArkTS 语言和鸿蒙原生组件，打造一款简洁高效的本地记事应用。

本项目参考了小知天气：HarmonyOS Next 气象应用开发实践和HarmonyOS Next智能聊天助手开发实践的架构与美化思路，力求在体验和代码结构上做到极致简洁与易维护。

源码获取：公众号：知识浅谈 回复 记事本源码效果展示：

二、技术选型与架构设计

1. 技术栈

开发语言：ArkTS（HarmonyOS Next 原生声明式 UI）
开发环境：DevEco Studio 4.0+
数据存储：@ohos.data.preferences（本地持久化）
UI 组件：原生 ArkUI 组件，声明式开发范式

2. 目录结构

├─entry│  ├─src/main/ets/pages/        # 页面│  ├─src/main/ets/model/        # 数据模型│  ├─src/main/ets/service/      # 业务服务│  └─resources/base/media/      # 图标资源

复制代码

3. 主要模块

NoteList.ets：笔记列表页，支持动态刷新、卡片美化
NoteEdit.ets：笔记编辑页，支持新增/编辑，UI 美观
NoteItem.ets：笔记数据模型
NoteService.ets：数据持久化服务

三、核心功能实现与代码详解

1. 数据模型与服务

NoteItem.ets

export class NoteItem {  id: string = '';  title: string = '';  content: string = '';  createTime: string = '';  updateTime: string = '';
  constructor() {    this.id = this.generateId();    const now = new Date().toISOString();    this.createTime = now;    this.updateTime = now;  }
  private generateId(): string {    return 'note_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);  }}

复制代码

说明：

每条笔记有唯一 id，自动生成，方便后续查找和更新。
createTime、updateTime 用 ISO 字符串，便于排序和显示。

NoteService.ets

import dataPreferences from '@ohos.data.preferences';import { NoteItem } from '../model/NoteItem';
export class NoteService {  // ...省略部分代码  async getAllNotes(): Promise<NoteItem[]> {    await this.init();    if (!this.preferences) {      throw new Error('Preferences not initialized');    }    const notesJson: string = await this.preferences.get(NoteService.NOTES_KEY, '[]') as string;    const notes: NoteItem[] = JSON.parse(notesJson);    return notes.sort((a: NoteItem, b: NoteItem) =>      new Date(b.updateTime).getTime() - new Date(a.updateTime).getTime()    );  }  // ...省略其他CRUD方法}

复制代码

说明：

所有笔记数据都存储在本地，使用 JSON 序列化。
通过 updateTime 排序，最新的笔记排在最前。

2. 列表页与编辑页

NoteList.ets

@Entry@Componentstruct NoteList {  @State notes: NoteItem[] = [];  private noteService: NoteService = new NoteService();
  // 页面每次显示时自动刷新  onPageShow() {    this.loadNotes();  }
  async loadNotes(): Promise<void> {    this.notes = await this.noteService.getAllNotes();  }
  build() {    Column() {      // ...UI结构略    }  }}

复制代码

说明：

使用 @State 修饰 notes，保证数据变化自动驱动 UI 刷新。
onPageShow 是鸿蒙 ArkTS 的页面生命周期钩子，每次页面显示都会调用，非常适合做“返回自动刷新”。

NoteEdit.ets

@Entry@Componentstruct NoteEdit {  @State note: NoteItem = new NoteItem();  private noteService: NoteService = new NoteService();  private noteId: string = '';
  aboutToAppear(): void {    const params: Record<string, string> = router.getParams() as Record<string, string>;    if (params && params['noteId']) {      this.noteId = params['noteId'];      this.loadNote();    }  }
  async saveNote(): Promise<void> {    if (this.noteId) {      await this.noteService.updateNote(this.note);    } else {      await this.noteService.createNote(this.note);    }    router.back(); // 返回列表页  }
  build() {    // ...UI结构略  }}

复制代码

说明：

aboutToAppear 用于页面初始化时加载已有笔记内容。
保存时直接调用 service 层方法，完成后 router.back() 返回。

四、遇到的问题与解决方案

问题：页面返回后列表不刷新

现象：

在 NoteEdit.ets 保存笔记后返回 NoteList.ets，发现新建或修改的笔记没有立即显示，必须手动重启页面才会刷新。

原因分析：

鸿蒙 ArkTS 的 aboutToAppear 只在页面首次进入时触发，router.back() 返回不会再次触发。
传统的参数传递、事件总线等方式在 ArkTS 下实现较为繁琐。

最佳实践解决方案：

使用 ArkTS 的 onPageShow 生命周期钩子。该钩子每次页面显示（包括返回时）都会自动触发，非常适合做数据刷新。

代码实现：

onPageShow() {  this.loadNotes();}

复制代码

只需在 NoteList.ets 组件内加上该钩子，配合原有的 loadNotes 方法即可。

参考资料：

五、开发心得与总结

声明式开发范式极大提升了 UI 开发效率，组件化、状态驱动让页面逻辑更清晰。
onPageShow 钩子是页面间数据同步的利器，推荐所有需要“返回自动刷新”的场景都用它。
本地存储用法简单，适合轻量级数据场景，如记事本、待办等。
UI 美化建议多参考社区优秀项目，如天气、聊天助手等，快速提升产品观感。
HarmonyOS Next 生态日益完善，建议多关注鸿蒙开发者社区的最新实践和案例。

六、开发心得与总结

声明式 UI 开发极大提升了开发效率，状态驱动让页面逻辑更清晰。
onPageShow 钩子是页面间数据同步的利器，推荐所有需要“返回自动刷新”的场景都用它。
遇到页面不刷新的问题时，优先考虑生命周期钩子而非参数传递，更简洁高效。
UI 美化建议多参考社区优秀项目，如天气、聊天助手等，快速提升产品观感。

欢迎大家留言交流 HarmonyOS Next 应用开发经验！

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/1391801221241de69915403cd】。文章转载请联系作者。

知识浅谈

关注

公众号：知识浅谈 2022-06-22 加入

🍁 作者：知识浅谈，InfoQ签约作者，CSDN博客专家/签约讲师，华为云云享专家，阿里云签约博主，51CTO明日之星 📌 擅长领域：全栈工程师、爬虫、ACM算法 💒 公众号：知识浅谈 🔥网站：vip.zsqt.cc

发布

暂无评论

创作场景

HarmonyOS Next 记事本应用开发实践

一、项目背景

二、技术选型与架构设计

1. 技术栈

2. 目录结构

3. 主要模块

三、核心功能实现与代码详解

1. 数据模型与服务

NoteItem.ets

NoteService.ets

2. 列表页与编辑页

NoteList.ets

NoteEdit.ets

四、遇到的问题与解决方案

问题：页面返回后列表不刷新

五、开发心得与总结

六、开发心得与总结

知识浅谈

评论