💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 💡
★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
工作生活小帮手，笔记应用可以集中管理零散信息、提高信息获取和协作效率。
本期案例介绍如何快速基于模板开发一款笔记应用
👉 覆盖20+行业，点击查看往期案例汇总贴，持续更新，点击收藏！一键三连！常看常新！
【第6期】商务办公 · 笔记应用
SDK链接：极光安全认证SDK、腾讯优量汇SDK、美数AdMate SDK、穿山甲广告SDK、腾讯图灵盾风险识别SDK、支付宝SDK、Thinking SDK、七牛云存储SDK、友盟移动统计SDK、Utdid、腾讯微信SDK、腾讯QQ SDK
说明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”
基于以上行业分析，本期将介绍鸿蒙生态市场商务办公类行业模板——笔记应用模板，为行业提供常用功能的开发案例，模板主要分首页、我的两大模块。
本模板主要页面及核心功能如下所示：
|– 首页
| |– 搜索
| |– 笔记分类
| | |– 新建分类
| | |– 重命名
| | └– 删除分类
| |– 排序
| | |– 按创建时间排序
| | └– 按修改时间排序
| |– 笔记列表
| | |– 复制内容
| | |– 移动到其他分类
| | └– 删除
| |– 创建笔记
| | |– 保存
| | └– 分享笔记
| └– 编辑笔记
| |– 保存
| └– 分享笔记
└– 我的
|– 用户信息
| |– 华为账号一键登录
| └– 头像昵称修改
└– 回收站
| |– 搜索笔记
| |– 恢复笔记
| └– 彻底删除
└– 设置
|– 隐私协议
|– 保密设置
| |– 手势密码
| └– 指纹解锁
└– 退出登录
为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
用户可创建和编辑富文本笔记，支持文本样式修改、图片插入、撤销重做、内容复制等功能。
用户可在首页通过搜索框输入关键词进行实时搜索，支持在正常笔记和回收站笔记中进行全文检索，搜索结果实时展示。
详细代码结构如下所示：
|- 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 // 入口页面
本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。
handleLangPress(item: Note) {
// 非多选状态下生效
if (!this.selectedController.isCtrl) {
this.selectedController.isCtrl = true;
item.isSelected = true;
this.selectedController.selectedCount = 1;
}
}
// 全选功能实现
handleSelectAll() {
if (this.selectedController.selectedCount === this.noteList.length) {
this.noteList.forEach(item => item.isSelected = false);
this.selectedController.selectedCount = 0;
} else {
this.noteList.forEach(item => item.isSelected = true);
this.selectedController.selectedCount = this.noteList.length;
}
}
// 多选工具栏构建
@Builder
toolBarBuilder(){
if (this.selectedController.isCtrl){
Row(){
ForEach(toolBarList, (item: ToolBar) => {
Column({ space: 5 }){
Image(item.icon)
.width(24)
.height(24)
Text(item.name)
.fontSize(10)
.fontColor($r(‘sys.color.font_secondary’))
}
.onClick(() => {
this.handleToolBarClick(item.name)
})
}, (item: ToolBar) => JSON.stringify(item))
}
.margin({ top: 10 })
.padding({ bottom: 10 })
.justifyContent(FlexAlign.SpaceAround)
.width(‘100%’)
.height(70)
.backgroundColor($r(‘sys.color.comp_background_list_card’))
}
}
richEditorController: RichEditorController = RichEditorController.instance;
// 撤销重做功能实现
@Builder
toolBar() {
Row({ space: 12 }) {
Image(this.richEditorController.currentIndex < 1 ?
$r(‘app.media.undo_expire’) : $r(‘app.media.undo_effect’))
.width(40)
.height(40)
.onClick(() => {
this.richEditorController.onDo(); // 撤销
});
Image(this.richEditorController.currentIndex >= this.richEditorController.historyRecordArray.length – 1 ?
$r(‘app.media.redo_expire’) : $r(‘app.media.redo_effect’))
.width(40)
.height(40)
.onClick(() => {
this.richEditorController.reDo(); // 重做
});
}
}
// 内容复制功能
copyNoteText() {
let copyText = this.currentNote?.description || ”;
let plainTextData = new unifiedDataChannel.UnifiedData();
let plainText = new unifiedDataChannel.PlainText();
plainText.details = {
key: ‘delayPlaintext’,
value: copyText,
};
plainText.textContent = copyText;
plainText.abstract = ‘delayTextContent’;
plainTextData.addRecord(plainText);
let systemPasteboard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
systemPasteboard.setUnifiedData(plainTextData);
}
@Builder
categoryEnd(item: Category){
Row() {
Image($r(‘app.media.edit_category’))
.width(40)
.height(40)
.margin({ left: 16, right: 16})
.onClick(() => {
this.isEditCategoryName = true;
this.categoryId = item.id;
// 打开编辑分类弹窗
})
Image($r(‘app.media.delete_category’))
.width(40)
.height(40)
.onClick(() => {
this.categoryId = item.id;
// 打开删除分类弹窗
})
}
.width(112)
.height(48)
}
// 分类删除对话框
@ComponentV2
struct DeleteCategoryDialog {
@Param @Require params: DeleteCategoryParam;
noteService: NoteService = NoteService.instance;
categoryService: CategoryService = CategoryService.instance;
build() {
Column({ space: 30 }) {
// 仅删除分类选项
Row() {
Text(‘仅删除分类’)
.fontSize(16)
.onClick(() => {
this.noteService.moveNotesCategory(this.params.categoryId);
this.categoryService.deleteCategoryById(this.params.categoryId);
});
}
// 删除分类和笔记选项
Row() {
Text(‘删除分类和笔记’)
.fontSize(16)
.fontColor(Color.Red)
.onClick(() => {
let notes = this.noteService.getNoteList(this.params.categoryId);
notes.forEach((item) => {
this.noteService.deleteNote(item.id);
});
this.categoryService.deleteCategoryById(this.params.categoryId);
});
}
}
}
}
@Styles
topAreaStyle() {
.width(‘100%’)
.padding(new BreakpointType<Padding>({
sm: {
top: 12,
bottom: 20,
left: $r(‘sys.float.padding_level8’),
right: $r(‘sys.float.padding_level8’),
},
md: {
top: 12,
bottom: 20,
left: $r(‘sys.float.padding_level12’),
right: $r(‘sys.float.padding_level12’),
},
lg: {
top: 12,
bottom: 20,
left: $r(‘sys.float.padding_level16’),
right: $r(‘sys.float.padding_level16’),
},
}).getValue(this.globalInfo.currentBreakpoint));
}
// 不同视图模式适配
@Builder
showNoteList() {
if (this.noteSearchController.isSearching && this.noteList.length === 0) {
SearchNoResult()
}
if (!this.noteSearchController.isSearching && this.noteList.length === 0){
EmptyNotes()
} else if (this.showListType === SHOW_METHOD_ENUM.normalList) {
this.cardList() // 列表视图
} else {
this.waterCardList() // 瀑布流视图
}
}
// 瀑布流布局实现
@Builder
waterCardList() {
Column() {
WaterFlow() {
LazyForEach(this.dataList, (item: Note) => {
FlowItem() {
this.cardItem(item, 9) // 9行文本显示
}
.width(‘100%’)
.gesture(
LongPressGesture({ repeat: false, fingers: 1, duration: 500 })
.onAction((event: GestureEvent|undefined) => {
if(event){
this.handleLangPress(item)
}
})
)
}, (item:Note) => item.id)
}
.columnsTemplate(‘1fr 1fr’) // 两列布局
.columnsGap(obtainGutter(this.globalInfo.currentBreakpoint, ‘WaterFlow’))
.rowsGap(16)
}
}
以上代码展示了商务笔记应用的核心功能实现，包括多选管理、富文本编辑、分类管理和响应式布局等关键技术方案。
本模板提供了两种代码集成方式，供开发者自由选用。
开发者可以选择直接基于模板工程开发自己的应用工程。
将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。
根据自己的业务内容修改模板，进行定制化开发。
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
以上是第6期“商务办公-笔记应用”行业案例的内容，更多行业敬请期待~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板开发者社群”，精彩上新&活动不错过！
👉 HarmonyOS官方模板优秀案例系列持续更新， 点击查看往期案例汇总贴， 点击收藏 方便查找！
👉【互动有礼】邀请你成为HarmonyOS官方模板产品经理，优化方案由你制定！点击参加
👉 HarmonyOS组件模板相关推荐：鸿蒙应用开发者激励计划2025，点击查看
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。