HarmonyOS开发实例：【手机备忘录】
介绍
本篇Codelab基于用户首选项，实现了备忘录新增、更新、删除以及查找等功能。效果如图所示：
相关概念
- [用户首选项]：提供Key-Value键值型的数据处理能力，应用持久化轻量级数据，并对其修改和查询。
- [Navigator]：路由容器组件，支持路由跳转以及子组件嵌入。
环境搭建
软件要求
- [DevEco Studio]版本：DevEco Studio 3.1 Release。
- OpenHarmony SDK版本：API version 9。
硬件要求
- 开发板类型：[润和RK3568开发板]。
- OpenHarmony系统：3.2 Release。
环境搭建
完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：
- [获取OpenHarmony系统版本]：标准系统解决方案（二进制）。以3.2 Release版本为例：
- 搭建烧录环境。
- 搭建开发环境。
- 开始前请参考[工具准备]，完成DevEco Studio的安装和开发环境配置。
- 开发环境配置完成后，请参考[使用工程向导]创建工程（模板选择“Empty Ability”）。
- 工程创建完成后，选择使用[真机进行调测]。
代码结构解读
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在gitee中提供。
├──entry/src/main/ets // 代码区
│ ├──common
│ │ ├──constants
│ │ │ ├──CommonConstants.ets // 常量类
│ │ │ └──StyleConstants.ets // 样式常量类
│ │ └──utils
│ │ ├──Format.ets // 日期格式化函数
│ │ └──Logger.ets // 日志打印类
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口类
│ ├──model
│ │ └──NotesDataModel.ets // 备忘录方法类
│ ├──pages
│ │ ├──NoteHomePage.ets // 备忘录主页面（列表页）
│ │ └──NotesDetail.ets // 备忘录详情页
│ ├──view
│ │ ├──BottomBar.ets // 备忘录编辑页底部栏
│ │ ├──ConfirmDialog.ets // 自定义弹窗
│ │ └──MemoItem.ets // 自定义备忘录列表组件
│ └──viewmodel
│ └──NotesInfoViewModel.ets // 备忘录默认数据实体
└──entry/src/main/resources // 资源文件目录
备忘录初始化
在这个章节中，需要实现备忘录数据的初始化，并且通过List组件将其渲染出来。效果如图所示：
在saveDefaultData方法中先通过getPreferences方法获取preferences实例，然后调用has方法查找数据库中是否存在“noteIdArr”这个key值，如果不存在调用实例的put方法将noteIdArr以及备忘录数据写入，最后通过flush方法进行数据持久化。
// NotesDataModel.ets
import dataStorage from '@ohos.data.preferences';
...
class NotesDataModel {
private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
/**
* 写入备忘录数据.
*/
async saveDefaultData() {
try {
let preferences = await dataStorage.getPreferences(this.context, CommonConstants.PREFERENCE_INSTANCE_NAME);
let isExist = await preferences.has(CommonConstants.PREFERENCE_NOTE_KEY);
if (!isExist) {
preferences.put(CommonConstants.PREFERENCE_NOTE_KEY, JSON.stringify(noteIdArray));
preferences.flush();
notesItemArr.forEach((item: NotesInfoBean) = > {
let notes: NotesInfoBean = item;
let res = preferences.put(item.noteId, JSON.stringify(notes));
preferences.flush();
res.then(() = > {
Logger.info('Put the value successfully.' + item.noteId);
}).catch((err: Error) = > {
Logger.error(`Put the value failed with err: ${err}`);
})
})
}
} catch (err) {
Logger.error(`Failed to get preferences. Error = ${err}`);
}
}
/**
* 基于笔记类型获取对应备忘录数据.
*
* @param flag the folder type.
* @param allNotes all of notes.
* @returns subNotes.
*/
getSelectNotes(flag: FolderType, allNotes: Array< NotesInfoBean >): Array< NotesInfoBean > {
return allNotes.filter((item: NotesInfoBean) = > item.folder === flag);
}
}
在NoteHomePage.ets文件中调用saveDefaultData函数先将本地数据写入数据库，再调用实例的get方法进行查询操作。
// NoteHomePage.ets
import dataStorage from '@ohos.data.preferences';
...
@Entry
@Component
struct NoteHomePage {
@State folderType: Resource = $r('app.string.notes_all');
@State allNotes: Array< NotesInfoBean > = [];
@State selectNotes: Array< NotesInfoBean > = this.allNotes.sort();
private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
...
build() {
Column() {
...
List({ space: StyleConstants.MEMO_LIST_SPACE }) {
ForEach(this.selectNotes, (item: NotesInfoBean) = > {
ListItem() {
MemoItem({ noteItem: item })
}
}, (item: NotesInfoBean) = > JSON.stringify(item))
}
.margin({ top: $r('app.float.list_container_margin') })
.height(StyleConstants.NOTE_CONTENT_HEIGHT)
.width(StyleConstants.FULL_WIDTH)
}
.backgroundColor($r('app.color.page_background'))
.height(StyleConstants.FULL_HEIGHT)
}
onPageShow() {
this.getAllNotes();
}
async getAllNotes() {
await NotesDataModel.saveDefaultData();
try {
let preferences = await dataStorage.getPreferences(this.context, CommonConstants.PREFERENCE_INSTANCE_NAME);
let noteIds = await preferences.get(CommonConstants.PREFERENCE_NOTE_KEY, '');
while (this.allNotes.length >= 1) {
this.allNotes.pop();
}
JSON.parse(noteIds.toString()).forEach(async (item: NotesInfoBean) = > {
let note = await preferences.get(item.noteId, '');
this.allNotes.push(JSON.parse(note.toString()));
})
} catch (err) {
Logger.error('Get the value of noteIdArr failed with err:', err);
}
}
}
新增备忘录
此章节介绍新增备忘录功能，点击列表页右上角加号进入编辑页，支持输入标题、备忘录内容以及添加图片。效果如图所示：
首先在列表页NoteHomePage.ets中添加跳转逻辑，设置路由参数params，其中operationType字段代表此次操作是新增还是修改。
// NoteHomePage.ets
Navigator({ target: 'pages/NotesDetail', type: NavigationType.Replace }) {
Row() {
Image($rawfile('ic_title_add.svg'))
...
}
.margin({ right: $r('app.float.note_add_margin') })
}
.params({
notesInfo: {
'noteId': new Date().getTime().toString(),
'title': '',
'folder': FolderType.Personal,
'content': '',
'imageArr': [],
'time': new Date().toTimeString().split(' ')[0],
'isFavorite': false
},
operationType: CommonConstants.ADD_NOTE
})
进入编辑页NotesDetail.ets后可以输入标题、内容以及选择对应的笔记类型等，确认保存后备忘录数据实时更新。
// NotesDetail.ets
build() {
...
TextInput({
text: this.notesInfo.title != '' ? this.notesInfo.title : '',
placeholder: this.notesInfo.title != '' ? '' : $r('app.string.note_title_placeholder')
})
...
.onChange((value: string) = > {
if (value !== this.notesInfo.title) {
this.notesInfo.title = value;
this.isDataChanged = true;
}
})
...
TextArea({
text: this.notesInfo.content !== '' ? this.notesInfo.content : '',
placeholder: this.notesInfo.content !== '' ? '' : $r('app.string.note_content_placeholder')
})
.onChange((value: string) = > {
if (value !== this.notesInfo.content) {
this.notesInfo.content = value;
this.isDataChanged = true;
}
})
...
}
onBackPress() {
if (this.isDataChanged || this.notesFolder !== this.notesInfo.folder || this.isCollectChange) {
this.saveDialogController.open();
} else {
router.replaceUrl({
url: 'pages/NoteHomePage'
});
}
return true;
}
// ConfirmDialog.ets
if (this.type === CommonConstants.SAVE_DIALOG) {
this.confirm = async () = > {
let preferences = await dataStorage.getPreferences(this.context, CommonConstants.PREFERENCE_INSTANCE_NAME);
// 保存备忘录数据实时更新
if (this.operationType === CommonConstants.ADD_NOTE) {
this.noteIdArray.push(new NoteIdBean(this.notesInfo.noteId));
preferences.put(CommonConstants.PREFERENCE_NOTE_KEY, JSON.stringify(this.noteIdArray));
preferences.flush();
}
let newNotes = this.notesInfo;
await preferences.put(this.notesInfo.noteId, JSON.stringify(newNotes));
await preferences.flush();
router.replaceUrl({
url: 'pages/NoteHomePage'
});
}
}
更新备忘录
此章节介绍更新数据库操作，与新增备忘录逻辑类似。效果如图所示：
首先在NotesDetail.ets中设置isDataChange和isCollectChange属性，来表示对应noteId的备忘录数据是否已更改。如果isDataChange或者isCollectChange为true表示已更改，在返回列表页时会拉起确认弹窗，确认保存后执行put方法去更改备忘录数据。
// NotesDetail.ets
build() {
Column() {
...
Stack({ alignContent: Alignment.Bottom }) {
Scroll(this.scroller) {
Column() {
TextInput({
text: this.notesInfo.title != '' ? this.notesInfo.title : '',
placeholder: this.notesInfo.title != '' ? '' : $r('app.string.note_title_placeholder')
})
...
.onChange((value: string) = > {
if (value !== this.notesInfo.title) {
this.notesInfo.title = value;
this.isDataChanged = true;
}
})
...
TextArea({
text: this.notesInfo.content !== '' ? this.notesInfo.content : '',
placeholder: this.notesInfo.content !== '' ? '' : $r('app.string.note_content_placeholder')
})
.onChange((value: string) = > {
if (value !== this.notesInfo.content) {
this.notesInfo.content = value;
this.isDataChanged = true;
}
})
...
}
}
...
BottomBar({
imageArr: $imageArr,
notesInfo: $notesInfo,
operationType: $operationType,
noteIdArray: $noteIdArray,
isDataChanged: $isDataChanged
})
}
...
}
.height(StyleConstants.FULL_HEIGHT)
.backgroundColor($r('app.color.white_color'))
}
...
onBackPress() {
if (this.isDataChanged || this.notesFolder !== this.notesInfo.folder || this.isCollectChange) {
this.saveDialogController.open();
} else {
router.replaceUrl({
url: 'pages/NoteHomePage'
});
}
return true;
}
// BottomBar.ets
// 点击收藏
this.clickCollect = () = > {
this.notesInfo.isFavorite = !this.notesInfo.isFavorite;
this.isFavorite = !this.isFavorite;
this.collectImgSrc = this.notesInfo.isFavorite ?
'ic_bottom_star_selected.svg' : 'ic_bottom_star_normal.svg';
}
...
// 点击插入图片
this.clickAddPicture = () = > {
this.imageSrc = this.chooseImage();
if (this.imageSrc === '') {
prompt.showToast({
message: 'Not anymore pictures'
});
} else {
this.imageArr = this.notesInfo.imageArr;
this.imageArr.push(this.imageSrc);
this.isDataChanged = true;
}
}
// ConfirmDialog.ets
if (this.type === CommonConstants.SAVE_DIALOG) {
this.confirm = async () = > {
let preferences = await dataStorage.getPreferences(this.context, CommonConstants.PREFERENCE_INSTANCE_NAME);
if (this.operationType === CommonConstants.ADD_NOTE) {
this.noteIdArray.push(new NoteIdBean(this.notesInfo.noteId));
preferences.put(CommonConstants.PREFERENCE_NOTE_KEY, JSON.stringify(this.noteIdArray));
preferences.flush();
}
// 保存备忘录数据实时更新
let newNotes = this.notesInfo;
await preferences.put(this.notesInfo.noteId, JSON.stringify(newNotes));
await preferences.flush();
router.replaceUrl({
url: 'pages/NoteHomePage'
});
}
}
删除备忘录
上述章节介绍了数据库的新增与更新，此章节来介绍删除操作。效果如图所示：
在BottomBar.ets中点击删除按钮，弹出自定义弹窗选择“是否删除”。在ConfirmDialog.ets中添加删除逻辑，删除操作会调用preferences实例的delete方法，将对应noteId的备忘录数据从数据库中删除，最后执行实例的flush方法实现持久化。
// BottomBar.ets
export default struct BottomBar {
...
deleteDialogController: CustomDialogController = new CustomDialogController({
builder: ConfirmDialog({
notesInfo: $notesInfo,
operationType: $operationType,
noteIdArray: $noteIdArray,
type: CommonConstants.DELETE_DIALOG
}),
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: $r('app.float.dialog_offset_x'), dy: $r('app.float.dialog_margin_bottom') }
});
...
build() {
...
Column() {
Image($r('app.media.ic_bottom_delete'))
.width($r('app.float.ic_bottom_picture_size'))
.aspectRatio(1)
Text($r('app.string.delete_note'))
.fontSize($r('app.float.font_size_smallest'))
.margin({ top: $r('app.float.bottom_txt_margin') })
}
.onClick(() = > {
this.clickDelete = () = > {
if (this.operationType === CommonConstants.MODIFY_NOTE) {
this.deleteDialogController.open();
} else {
prompt.showToast({
message: 'The addition operation cannot be deleted'
});
}
}
this.clickDelete();
})
...
}
...
}
// ConfirmDialog.ets
if (this.type === CommonConstants.SAVE_DIALOG) {
...
} else {
// 删除备忘录数据
this.confirm = async () = > {
let preferences = await dataStorage.getPreferences(this.context, CommonConstants.PREFERENCE_INSTANCE_NAME);
await preferences.delete(this.notesInfo.noteId);
await preferences.flush();
router.replaceUrl({
url: 'pages/NoteHomePage'
});
}
}
this.confirm();
})
审核编辑 黄宇
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
举报投诉
-
鸿蒙
+关注
关注
57文章
2348浏览量
42829 -
HarmonyOS
+关注
关注
79文章
1974浏览量
30163 -
OpenHarmony
+关注
关注
25文章
3718浏览量
16296
发布评论请先 登录
相关推荐
UDS诊断命令备忘录
UDS实践性强，逻辑复杂，很多服务非要体验过一次才能理解，导致包括我在内的初学者感觉晦涩难懂，不明觉厉，因此将自己的理解写下来、整理下来，与君共勉。零、UDS诊断命令备忘录一、简介UDS
发表于 08-26 16:09
怎样去搭建一种基于XR806的开源桌面备忘录
本人计划怼一个开源桌面备忘录/天气预报/相册的项目基于XR806，同时学习鸿蒙操作系统获得晕哥赠送的开发板和芯片，目前处于环境搭建阶段看起来这个芯片玩的人比较少，目前遇到了问题，不知道如何解决，希望
发表于 12-28 06:52
全球半导体联盟与中国半导体行业签署合作备忘录
全球半导体联盟与中国半导体行业签署合作备忘录
全球半导体联盟(GSA)与中国半导体行业协会(CSIA)在苏州联合申明签署合作备忘录。此次合作将为促
发表于 09-24 08:17
•701次阅读
是德科技与中国移动签署谅解备忘录
是德科技（NYSE：KEYS）今日宣布与中国移动通信集团有限公司（CMCC）签署谅解备忘录（MoU）将全力支持 5G 终端先行者计划的实施。
怎样将苹果备忘录笔记Notes“安装”到Win10上
用iPhone、iPad的朋友一直有这样一个困惑，在手机平板上记录的苹果Notes备忘录笔记，要怎么在电脑上查看？
Vedanta与30家日本公司签署谅解备忘录
印度Vedanta Group已与30家日本公司签署谅解备忘录，以开发印度半导体和玻璃显示器制造生态系统。上周在日本东京举行的2022年Vedanta-Avanstrate商业合作伙伴峰会上签署了这些备忘录，来自100多家全球公
设计模式：备忘录设计模式
备忘录设计模式（Memento Design Pattern）是一种行为型设计模式，它的主要目的是在不破坏对象封装性的前提下，捕捉和保存一个对象的内部状态
新思科技同越南政府签署谅解备忘录
在越南总理范明政访美期间，新思科技与越南国家创新中心（nic）签署了关于培养越南集成电路设计人才的谅解备忘录，支持nic成立芯片设计孵化中心。另外，新思科技与越南信息通讯部下属的信息通信技术产业公司签订了支援越南半导体产业发展的谅解备忘录。
实践GoF的23种设计模式：备忘录模式
相对于代理模式、工厂模式等设计模式，备忘录模式（Memento）在我们日常开发中出镜率并不高，除了应用场景的限制之外，另一个原因，可能是备忘录模式
江汽与华为签订合作备忘录 发力鸿蒙
江汽与华为签订合作备忘录进一步深化双方合作；共同发力鸿蒙，江汽与华为将以OpenHarmony为底座的HarmonyOS启动鸿蒙原生应用开发；为用户提供更智能的体验。
苹果iOS 18将支持语音备忘录及数学符号显示
首先是语音备忘录功能。据悉，苹果有意在iOS 18系统中加入此项功能，使iPhone用户能够便捷地录制音频文件，并将其直接嵌入至备忘录之中。
英飞凌与韩国造船海洋签署合作备忘录
近日，全球功率半导体巨头英飞凌科技与韩国造船海洋（HD KSOE）共同签署了一份谅解备忘录（MoU）。此次合作旨在推动低碳节能，通过功率半导体技术联合开发新型船用发动机和推动船舶机械电气化。
工商网监
评论