#我的鸿蒙开发手记# HarmonyOS Next 记事本应用开发实践原创

码海浮生

发布于 2025-5-12 08:41

浏览

0收藏

HarmonyOS Next 记事本应用开发实践

一、项目背景

随着鸿蒙生态的不断壮大，越来越多的开发者开始尝试基于 HarmonyOS Next 进行原生应用开发。本文将结合我近期开发的“记事本”项目，分享如何用 ArkTS 语言和鸿蒙原生组件，打造一款简洁高效的本地记事应用。
本项目参考了小知天气：HarmonyOS Next 气象应用开发实践和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
@Component
struct 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
@Component
struct 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结构略
  }
}

说明：