HarmonyOS鸿蒙Next官方模板优秀案例 （第6期：商务办公 · 笔记应用） 💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡

★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★

工作生活小帮手，笔记应用可以集中管理零散信息、提高信息获取和协作效率。

本期案例介绍如何快速基于模板开发一款笔记应用

👉 覆盖20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！

【第6期】商务办公 · 笔记应用

一、概述

1.行业洞察

1）行业诉求：

• 用户忠诚度低 ：工具性产品功能相对单一，缺乏互动入口，用户黏性很低。
• 同质化严重 ：开源框架等技术的发展降低了开发门槛，许多工具应用在功能上高度重叠，尤其是SaaS工具市场，各种功能相似、定位重叠的产品层出不穷，导致用户选择困难，开发者也难以脱颖而出。
• 个性化需求满足难度大 ：随着用户需求的不断变化和多样化，工具应用需要覆盖的场景也越来越多，但很多工具提供的是通用功能，无法快速满足客户的各种差异化需求，尤其是一些静态分析工具等专业工具，用户难以开发自定义规则，对误报和漏报的规则也无法快速修改。。

2）行业常用三方SDK

说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”

2.案例概览（下载模板）

基于以上行业分析，本期将介绍鸿蒙生态市场商务办公类行业模板——笔记应用模板，为行业提供常用功能的开发案例，模板主要分首页、我的两大模块。

• Stage开发模型 + 声明式UI开发范式。
• 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件。
• 本模板已集成账号服务，只需做少量配置和定制即可快速实现华为账号一键登录。

本模板主要页面及核心功能如下所示：

笔记模板
 |-- 首页
 |    |-- 搜索
 |    |-- 笔记分类
 |    |    |-- 新建分类
 |    |    |-- 重命名 
 |    |    └-- 删除分类
 |    |-- 排序
 |    |    |-- 按创建时间排序
 |    |    └-- 按修改时间排序     
 |    |-- 笔记列表
 |    |    |-- 复制内容
 |    |    |-- 移动到其他分类
 |    |    └-- 删除
 |    |-- 创建笔记
 |    |    |-- 保存
 |    |    └-- 分享笔记
 |    └-- 编辑笔记
 |         |-- 保存
 |         └-- 分享笔记
 └-- 我的
      |-- 用户信息
      |    |-- 华为账号一键登录
      |    └-- 头像昵称修改
      └-- 回收站
      |    |-- 搜索笔记
      |    |-- 恢复笔记
      |    └-- 彻底删除
      └-- 设置
           |-- 隐私协议
           |-- 保密设置
           |    |-- 手势密码
           |    └-- 指纹解锁
           └-- 退出登录

二、应用架构设计

1.分层模块化设计

• **产品定制层：**专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。
• **基础特性层：**用于存放相对独立的功能UI和业务逻辑实现。
  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。
• **公共能力层：**存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

2.业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案

1.富文本笔记编辑

1）场景说明

用户可创建和编辑富文本笔记，支持文本样式修改、图片插入、撤销重做、内容复制等功能。

2）技术方案

• 基于RichEditorController实现富文本编辑能力。
• 使用StyledString管理带样式的文本内容。
• 采用操作记录栈(historyRecordArray)实现撤销重做功能。
• 集成系统剪贴板服务实现内容复制。

2.笔记分类管理

1）场景说明

• 用户可创建、重命名、删除笔记分类，支持分类间笔记移动，右滑操作支持快速编辑和删除。

2）技术方案

• 采用SwipeAction实现右滑操作菜单。
• 使用自定义弹窗组件进行分类管理。
• 通过CategoryService统一管理分类数据。
• 支持分类下笔记的批量迁移。

3.搜索功能

1）场景说明

用户可在首页通过搜索框输入关键词进行实时搜索，支持在正常笔记和回收站笔记中进行全文检索，搜索结果实时展示。

2）技术方案

• 用SearchController实现搜索框交互。
• 支持实时搜索和提交搜索两种模式。
• 通过NoteService进行底层数据检索。
• 使用@Trace装饰器实现状态管理。
• 支持分类内搜索和全局搜索。

四、模板代码

1.工程结构（下载模板）

详细代码结构如下所示：

Notes
  |- common                                        // 公共层
  |   |- datasource/src/main/ets/                  // 公共资源
  |   |    |- CategoryService.ets                  // 分类服务
  |   |    |- Data.ets                             // mock数据
  |   |    |- Model.ets                            // 建立模型
  |   |    └- NoteService.ets                      // 笔记服务
  |   └- utils/src/main/ets                        // 公共组件模块(hsp)
  |        |- constants 
  |        |     CommonConstants.ets               // 公共常量        
  |        |     DateConstants.ets                 // 日期格式化常量                   
  |        └- utils                                // 工具类
  |              AccountUtil.ets                   // 账号
  |              AppUtil.ets                       // 应用  
  |              DateUtil.ets                      // 日期处理
  |              LogUtil.ets                       // 日志工具   
  |              ObjectUtil.ets                    // 对象工具   
  |              ShowToast.ets                     // 吐司   
  |              StringUtil.ets                    // 字符串工具
  |
  |- components                                    // 公共组件
  |   |- richeditor/src/main/ets/                  // 富文本组件
  |   |    |- common 
  |   |    |     Constants.ets                     // 公共常量         
  |   |    |- components                           
  |   |    |     RichEditorArea.ets                // 富文本编辑
  |   |    |     SnapshotPreview.ets               // 截图预览
  |   |    |- model 
  |   |    |     AlignmentInfo.ets                 // 编辑富文本框段落选项       
  |   |    └- util
  |   |          CommonUtils.ets                   // 常用(沉睡/截图)     
  |   |          ControllerUtil.ets                // 本项目使用      
  |   |          ImageUtils.ets                    // 图片处理
  |   |          PickerUtil.ets                    // 选择、保存图片    
  |   |          PopupUtils.ets                    // 截图计算
  |   |          RichEditorUtil.ets                // 富文本编辑器工具类
  |   |    
  |   └- secretlock/src/main/ets/                  // 应用密码设置组件
  |        |- components                           
  |        |     SecretLockSwitch.ets              // 密码设置开关
  |        |- model 
  |        |     AuthOptions.ets                   // 认证参数类
  |        |     SecretLock.ets                    // 密码锁-保密设置(持久化)
  |        |- pages                           
  |        |     DrawLock.ets                      // 密码设置绘制页面
  |        └- util                           
  |              AuthUtil.ets                      // 生物识别认证工具类    
  |
  └- product/phone                               
      └---src/main/ets