# harmonyosNote

**Repository Path**: Laynechai/harmonyos-note

## Basic Information

- **Project Name**: harmonyosNote
- **Description**: HarmonyOS Next 记事本应用开发实践
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-11
- **Last Updated**: 2025-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# HarmonyOS Next 记事本应用开发实践
作者：知识浅谈

## 一、项目背景

随着鸿蒙生态的不断壮大，越来越多的开发者开始尝试基于 HarmonyOS Next 进行原生应用开发。本文将结合我近期开发的“记事本”项目，分享如何用 ArkTS 语言和鸿蒙原生组件，打造一款简洁高效的本地记事应用。  
本项目参考了[小知天气：HarmonyOS Next 气象应用开发实践](https://ost.51cto.com/posts/33173)和[HarmonyOS Next智能聊天助手开发实践](https://ost.51cto.com/posts/33052)的架构与美化思路，力求在体验和代码结构上做到极致简洁与易维护。

---
源码获取：
效果展示：
![image.png](https://dl-harmonyos.51cto.com/images/202505/d5f2ccc48d95081e3b376649e4302ce3c28b4b.png?x-oss-process=image/resize,w_290,h_609)
![image.png](https://dl-harmonyos.51cto.com/images/202505/213b7ea80dde256fc842453d060c6e51a08dca.png?x-oss-process=image/resize,w_292,h_611)
## 二、技术选型与架构设计

### 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

```typescript
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

```typescript
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

```typescript
@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

```typescript
@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结构略
  }
}
```
**说明**：  
- aboutToAppear 用于页面初始化时加载已有笔记内容。
- 保存时直接调用 service 层方法，完成后 router.back() 返回。

---

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

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

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

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

**最佳实践解决方案**：  
- 使用 ArkTS 的 `onPageShow` 生命周期钩子。该钩子每次页面显示（包括返回时）都会自动触发，非常适合做数据刷新。

**代码实现**：

```typescript
onPageShow() {
  this.loadNotes();
}
```
只需在 NoteList.ets 组件内加上该钩子，配合原有的 loadNotes 方法即可。

**参考资料**：  
- [小知天气：HarmonyOS Next 气象应用开发实践](https://ost.51cto.com/posts/33173)  
- [HarmonyOS Next智能聊天助手开发实践](https://ost.51cto.com/posts/33052)

---


## 五、开发心得与总结

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

---

## 六、开发心得与总结

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

---

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

---