HarmonyOS 鸿蒙NEXT开发案例：商务办公类行业官方模板介绍 （Part1：笔记应用模板）

鸿蒙生态市场

💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了商务办公类行业的一个官方模板——笔记应用模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！

一、概述

1. 行业洞察（待补充）

   1）行业痛点

2. 优秀案例概览

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

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

首页	我的

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

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

二、应用架构设计

1. 分层模块化设计

• 产品定制层：专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。

• 基础特性层：用于存放相对独立的功能UI和业务逻辑实现。

  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

• 公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

  

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

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

三、行业场景技术方案（待补充）

1. 账号管理

   1）场景说明

   2）技术方案

2. 笔记分类

   1）场景说明

   2）技术方案

3. 笔记编辑

   1）场景说明

   2）技术方案

4. 回收站

   1）场景说明

   2）技术方案

四、模板代码

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 
           |- common
           |   LoginConstants.ets                  // 登录常量
           |- components
           |   RightArrow.ets                      // 右箭头                  
           |- entryability
           |   EntryAbility.ets                    // 主页面                                                                                                                      
           └- pages
               mine                                // 我的-相关页面
                |- MineView.ets                    // 我的页面入口
                |- PrivacyAgreement.ets            // 隐私协议(隐私政策)
                |- QuickLoginPage.ets              // 一键登录
                |- SecretSetting.ets               // 保密设置
                |- Setting.ets                     // 设置
                |- Trash.ets                       // 回收站
                └- UserInfoPage.ets                // 用户信息
               EditorCategory.ets                  // 编辑分类
               EditNotes.ets                       // 编辑笔记
               Index.ets                           // 入口页面

3. 模板集成

本模板提供了两种代码集成方式，供开发者自由使用。

1）整体集成

开发者可以选择直接基于模板工程开发自己的应用工程。

• 模板代码获取：

  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。
  • 通过开源仓访问源码，仓库地址。

• 打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。

• 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。

  • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。

  • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

• 根据自己的业务内容修改模板，进行定制化开发。

2）按需集成

若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。

• 组件代码获取：

  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。

• 下载组件源码，根据README中的说明，将组件包配置在自己的工程中。

• 根据API参考和示例代码，将组件集成在自己的对应场景中。