#HarmonyOS NEXT 体验官#开发一个灵感速记APP 原创 精华
Hello_Kun
发布于 2024-7-29 17:55
浏览
2收藏
@toc
1 简介
生活中的零碎信息太容易忘记，｢灵感速记｣作为记录琐碎的小帮手，时刻记录用户关心的内容，分类整理，高效编辑，快捷分享。Less is More，借助HarmonyOS NEXT丰富的原生能力，一步操作完成各种所想，抓住每一刻灵感。 视频简介：灵感速记https://ost.51cto.com/show/29442
- 目标用户：学生、记者、产品经理、艺术创作者
本篇将介绍如何使用HarmonyOS NEXT原生能力开发灵感速记APP。效果为：
- 化繁为简，便捷高效
- 聊天式一键添加备忘、关联日程、强提醒消息、私密消息等轻量笔记。
- 可分类、搜索、分享、删除等管理记录的每条内容。
- 统一生态，有趣好用:
- 可共享消息到生态互联设备（灵动看板）。
- 支持多端布局。
2 环境搭建
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
软件要求
- DevEco Studio版本：DevEco Studio NEXT Developer Preview2及以上。
- HarmonyOS SDK版本：HarmonyOS NEXT Developer Preview2 SDK及以上。
硬件要求
- 设备类型：华为手机。
- HarmonyOS系统：HarmonyOS NEXT Developer Preview2及以上。
环境搭建
- 安装DevEco Studio，详情请参考下载和安装软件。
- 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，详情请参考配置开发环境。
- 开发者可以参考以下链接，完成设备调试的相关配置：
3 代码结构解读
本篇文档只对核心代码进行讲解，对于完整代码，开源后提供下载链接。
.
|-- common
| |-- BreakPointSystem.ets //断点-多端布局
| |-- CommonConstant.ets //常量
| |-- DateUtil.ets //时间日期工具
| |-- InspiDataModule.ets //灵感数据模型
| |-- Logger.ets //日志工具
| |-- calendar.ets //日历日程工具
| |-- database //RDB数据库，实现持久化存储
| | |-- InspirationTable.ets
| | |-- RDB.ets
| | `-- inspirationData.ets
| |-- messageManager //后台提醒、日程消息
| | |-- BackgroundReminder.ets
| | `-- CalenderMeaasge.ets
| |-- microphone //语音输入
| | `-- Recorder.ets
| `-- shareTool.ets //分享工具
|-- entryability
| `-- EntryAbility.ts
|-- entryformability
| `-- EntryFormAbility.ets
|-- pages
| |-- Index.ets //入口页面
| `-- SettingPage.ets //设置页面
|-- subview
| |-- AddPanel.ets //添加笔记组件
| |-- InspiComponent.ets //笔记列表组件
| |-- InspirationItemView.ets //单条笔记组件
| |-- InspirationTotalView.ets//笔记分类视图
`-- widget22
`-- pages
`-- Widget22Card.ets //2*2桌面卡片
4 构建应用主界面
灵感速记应用程序遵循多端、极简页面、功能一触即达的设计理念。以手机端为例，如下图所示，首页布局了95%的功能，自下而上依次是添加和共享笔记、笔记查看、管理笔记的三大功能区。
在主页面中使用断点来分配布局，例如在手机端首页只展示消息列表视图，在折叠屏或平板上屏幕右侧新增了分类视图。整体的布局框架如下：
build() {
Stack() {
Row() {
Column() {
// menu
Row（）{ ... }
// inspiration内容
// 配合List组件，循环渲染，可滚动内容
List({ space: 6, scroller: this.listScroller }) {
ForEach(this.Inspirations : this.searchInspirations,
(item: InspirationData, index: number) => {
ListItem() {
InspirationItemView({
InspiItem: item,
...
})
}
if (!this.isSearchPageShow && !this.isInsert && !this.isEditMode) {
// 添加新内容+按钮
Image($r('app.media.add_filled'))
// 共享到灵动看板桌面 弹窗
Image($r('app.media.panel_icon'))
.onClick(() => {
this.isShowDeskPanel = true
})
}
.width(this.MycurrentBreakpoint != 'sm' ? '50%' : '100%')
// 断点来实现多端布局
if (this.MycurrentBreakpoint != 'sm') {
Column() {
// 内容按颜色整理的详情页
InspirationTotalView({
Inspirations: this.Inspirations
})
}
.width('50%')
.height('100%')
}
}.width('100%').height('100%')
}
}
5 笔记数据管理
数据定义
应用开发与数据结构息息相关，在进行其他功能开发前，规划如下灵感速记的数据，主要包含笔记文本内容、记录时间、类别、完成情况等。
export default class InspirationData {
id: number = -1;
inspirationName: string = '';
updateTime: string = '';
progressValue: number = 0;
inspirationType:number = InspirationType.CREATE_IDEA;
inspirationColor:string = CommonConstants.CREATE_COLOR;
inspirationDone: boolean = false;
inspirationAlarm: boolean = false;
inspirationPic: string = '';
inspirationPicIndex: number = 0;
inspirationIcon: string ='app.media.create_idea_filled';
constructor() {
...
}
}
数据持久化
用户记录的笔记希望能持久化保存，便于用户随时查找翻阅笔记。
HarmonyOS NEXT中的ArkData （方舟数据管理）为开发者提供数据存储、数据管理和数据同步能力。其中，数据存储提供通用数据持久化能力，根据数据特点，分为用户首选项、键值型数据库和关系型数据库。灵感速记的数据较为复杂，选择关系型数据库（RDB）进行存储。
- 首先获取一个RdbStore，其中包括建库、建表、升降级等操作。
import { relationalStore } from '@kit.ArkData';
export default class Rdb {
private rdbStore: relationalStore.RdbStore | null = null;
private tableName: string;
private sqlCreateTable: string;
private columns: Array<string>;
constructor(tableName: string, sqlCreateTable: string, columns: Array<string>) {
this.tableName = tableName;
this.sqlCreateTable = sqlCreateTable;
this.columns = columns;
}
getRdbStore(callback: Function = () => {
}) {
let context: Context = getContext(this) as Context;
relationalStore.getRdbStore( AppStorage.get('context'), CommonConstants.STORE_CONFIG, (err, rdb) => {
...
this.rdbStore = rdb;
this.rdbStore.executeSql(this.sqlCreateTable);
});
}
insertData(data: relationalStore.ValuesBucket, callback: Function = () => {
}) {
let resFlag: boolean = false;
const valueBucket: relationalStore.ValuesBucket = data;
if (this.rdbStore) {
this.rdbStore.insert(this.tableName, valueBucket, (err, ret) => {
...
});
}
}
deleteData(predicates: relationalStore.RdbPredicates, callback: Function = () => {
}) {
let resFlag: boolean = false;
if (this.rdbStore) {
this.rdbStore.delete(predicates, (err, ret) => {
...
});
}
}
updateData(predicates: relationalStore.RdbPredicates, data: relationalStore.ValuesBucket, callback: Function = () => {
}) {
let resFlag: boolean = false;
const valueBucket: relationalStore.ValuesBucket = data;
if (this.rdbStore) {
this.rdbStore.update(valueBucket, predicates, (err, ret) => {
...
});
}
}
query(predicates: relationalStore.RdbPredicates, callback: Function = () => {
}) {
if (this.rdbStore) {
this.rdbStore.query(predicates, this.columns, (err, resultSet) => {
..
});
}
}
}
- 其次创建灵感速记笔记的RDB数据表,赋予数据的增删改查能力。
import { relationalStore } from '@kit.ArkData';
import Rdb from './RDB';
export class InspirationTable {
private accountTable = new Rdb(CommonConstants.INSPIRATION_TABLE.tableName, CommonConstants.INSPIRATION_TABLE.sqlCreate,
CommonConstants.INSPIRATION_TABLE.columns);
constructor(callback: Function = () => {
}) {
this.accountTable.getRdbStore(callback);
}
getRdbStore(callback: Function = () => {
}) {
this.accountTable.getRdbStore(callback);
}
insertData(inspiration: InspirationData, callback: Function) {
...
this.accountTable.insertData(valueBucket, callback);
}
deleteData(inspiration: InspirationData, callback: Function) {
...
this.accountTable.deleteData(predicates, callback);
}
updateData(inspiration: InspirationData, callback: Function) {
...
this.accountTable.updateData(predicates, valueBucket, callback);
}
InspirationTable()
export default new InspirationTable() ;
function generateBucket(inspiration: InspirationData): relationalStore.ValuesBucket {
let obj: relationalStore.ValuesBucket = {};
obj.inspirationName = inspiration.inspirationName;
obj.updateTime = inspiration.updateTime;
...
return obj;
}
6 笔记功能开发
展示的每条笔记都是一个List元素，默认是一条高度固定的消息条。在用户单击后Item后，通过条件渲染，启用如下编辑选项：选择类别、可编辑内容、复制与华为分享、插入图片。
- 选择类别
每种笔记类别都有专属的图标和颜色，根据用户的选择实时渲染整条List Item,如下所示为用户选择默认紫色灵感类别时，临时渲染的内容做相应的渲染，当用户选择√后，再做持久化保存。
// idea type button
if (this.isExpanded) {
Row({ space: 10 }) {
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r(CommonConstants.CREATE_IMG))
.fancyImage(20)
}.fancyButton(CommonConstants.CREATE_COLOR)
.onClick(() => {
this.InspiItem.inspirationColor = CommonConstants.CREATE_COLOR
this.InspiItem.inspirationType = InspirationType.CREATE_IDEA
this.InspiItem.inspirationIcon = CommonConstants.CREATE_IMG
})
...
}.justifyContent(FlexAlign.Center).width(this.edite_width)
.position({ x: 0, y: -15 })
}
如果用户选择了强提醒类别，会触发通知时间设置，到点自动发送通知和震动响铃。
if (this.InspiItem.inspirationType === InspirationType.ATTENTION_IDEA) {
DatePickerDialog.show({
start: this.startDate,
end: new Date("2100-12-31"),
selected: this.selectedDate,
showTime: true,
useMilitaryTime: true,
disappearTextStyle: {
color: CommonConstants.ATTENTION_COLOR,
font: { size: '14fp', weight: FontWeight.Bold }
},
textStyle: {
color: CommonConstants.ATTENTION_COLOR,
font: { size: '18fp', weight: FontWeight.Normal }
},
selectedTextStyle: { color: '#ff182431', font: { size: '22fp', weight: FontWeight.Regular } },
onDateAccept: (value: Date) => {
// 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
this.selectedDate = value
BackgroundReminder.publishReminder(this.InspiItem, value);
if (this.updateItem !== undefined) {
console.info('inspitest-点击修改内容')
this.updateItem(this.isInsert, this.InspiItem)
this.isInsert = false
}
// this.isExpanded = false;
this.animationClick(false);
}
}
如果用户选择了日程类别，会触发日程时间选择，自动关联到系统日历。
else if (this.InspiItem.inspirationType === InspirationType.TODO_IDEA) {
CalendarPickerDialog.show({
selected: this.selectedDate,
onAccept: (value) => {
CalenderMessage.publishCalenderEvent(this.InspiItem, value);
if (this.updateItem !== undefined) {
console.info('inspitest-点击修改内容')
this.updateItem(this.isInsert, this.InspiItem)
this.isInsert = false
}
// this.isExpanded = false;
this.animationClick(false);
console.info("calendar onAccept:" + JSON.stringify(value))
}
})
}
- 可编辑内容
笔记内容包括最近编辑时间（Text）、可编辑笔记文本（InpuText）、选择的图片（Image）。这部分功能使用基础组件即可实现。 - 复制、华为分享
- 使用pasteboard接口实现复制。
// copy
Column() {
Image($r('app.media.ic_public_copy')).fancyImage(25)
}
.width('20%')
.onClick(() => {
if (this.TempInspiName === '') {
promptAction.showToast({
message: '内容为空',
duration: 1500
})
return;
}
let text: string = this.TempInspiName;
let pasteData: pasteboard.PasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
let systemPasteBoard: pasteboard.SystemPasteboard = pasteboard.getSystemPasteboard();
systemPasteBoard.setData(pasteData).catch((err: BusinessError) => {
console.error(`Failed to set pastedata. Code: ${err.code}, message: ${err.message}`);
});
let subText = this.TempInspiName.substring(0, 4);
if (subText.length < this.TempInspiName.length) { //只提示部分内容
subText = subText + '...'
}
})
- 使用systemShare接口即可实现华为分享。
// share
Column() {
Image($r('app.media.ic_public_share')).fancyImage(25)
}.width('20%')
.onClick(() => {
let ShareDta: systemShare.SharedData = new systemShare.SharedData({
utd: utd.UniformDataType.PLAIN_TEXT,
content: this.TempInspiName
});
// 构建ShareController
let ShareController: systemShare.ShareController = new systemShare.ShareController(ShareDta);
// 获取UIAbility上下文对象
let ShareContext: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
// 注册分享面板关闭监听
ShareController.on('dismiss', () => {
console.log('Share panel closed');
// 分享结束，可处理其他业务。
});
// 进行分享面板显示
ShareController.show(ShareContext, {
previewMode: systemShare.SharePreviewMode.DETAIL,
selectionMode: systemShare.SelectionMode.SINGLE
});
})
- 插入图片
通过picker.PhotoViewPicker访问用户相机和相册,保护用户隐私，使用也快捷方便。
//add camera or photoPicker
Column() {
Image($r('app.media.ic_public_camera'))
.fancyImage(25)
}
.width('16%')
.onClick(() => {
if (this.TempInspiPicIndex < 5) {
const photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 5 - this.TempInspiPicIndex;
const photoViewPicker = new picker.PhotoViewPicker();
//调用select()接口拉起图库界面进行文件选择,文件选择成功后，返回PhotoSelectResult结果集
photoViewPicker.select(photoSelectOptions)
.then(async (photoSelectResult: picker.PhotoSelectResult) => {
//用一个全局变量存储返回的uri
this.selectedImage = photoSelectResult.photoUris
for (let i = 0; i < photoSelectResult.photoUris.length; i += 1) {
this.TempInspiPic += photoSelectResult.photoUris[i] + '|';
this.TempInspiPicIndex += 1;
}
console.info('photoViewPicker.select to file succeed and uris are:' + this.TempInspiPic);
})
.catch((err: BusinessError) => {
console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
} else {
promptAction.showToast({
message: '图片超出限制',
duration: 1500
})
}
})
通过开发上述编辑选项功能，实现的内容编辑效果如下图所示：
7 动效开发
APP的开发离不开动画，HarmonyOS NEXT ArkUI中提供多种动画接口（属性动画、转场动画等），灵感速记中使用了转场动画、弹簧效果等动效，给用户舒适的视觉体验。
通过基础的组件转场接口transition与TransitionEffect的组合使用，定义出一镜到底的操作效果。如笔记内容在展开或收起时，加入下动画修饰：
.transition(TransitionEffect.asymmetric(
TransitionEffect.opacity(0)
.animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200, delay: 150 }),
TransitionEffect.opacity(0)
.animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200 }),
))
笔记展开、收起动画效果立竿见影：
8 共享消息与灵动看板
灵感速记的共享消息功能，是将APP记录的内容分享到生态硬件（灵动看板），在灵动开板上点击完成，APP也有相应的记录。共享消息功能将笔记“用起来”，挖掘更多应用场景。共享消息功能主要使用了IoT技术实现，技术思路如下图：
在APP内置了本地html网页，用于实现配置mqtt参数以及收发数据，该过程涉及应用侧与前端页面的交互，HarmonyOS NEXT的ArkWeb（方舟Web）提供了能力运行前端JavaScript函数、数据双向传输等能力。
这里讲解如何实现html与ArkTS之间数据交互。
首先,在启动app时,要在Index.ets的aboutToAppear()中创建一个和H5页面通信的消息通道,实现如下:
TryWebPort(): void {
try {
// 1、创建两个消息端口。
this.ports = this.webviewController.createWebMessagePorts();
// 2、在应用侧的消息端口(如端口1)上注册回调事件。
this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
let msg = 'Got msg from HTML:';
...
})
// 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
this.webviewController.postMessage('__init_port__', [this.ports[0]], '*');
} catch (error) {
promptAction.showToast({duration:2000,message:'发送失败'})
let e: business_error.BusinessError = error as business_error.BusinessError;
console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
}
}
其次,需要在本地src/main/resources/rawfile/index.html 中创建一个用于接收的监听端口,具体实现如下:
// 页面
var h5Port;
var output = document.querySelector('.output');
window.addEventListener('message', function (event) {
if (event.data === '__init_port__') {
if (event.ports[0] !== null) {
h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
h5Port.onmessage = function (event) {
// 2. 接收ets侧发送过来的消息.
var msg = 'Got message from ets:';
var result = event.data;
if (typeof(result) === 'string') {
console.info(`received string message from html5, string is: ${result}`);
msg = result;
} else if (typeof(result) === 'object') {
if (result instanceof ArrayBuffer) {
console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
msg = msg + 'lenght is ' + result.byteLength;
} else {
console.info('not support');
}
} else {
console.info('not support');
}
// this.PositionName = msg.toString();
}
}
}
})
本地的H5可以通过与ets建立的消息通道,直接发送数据到用户页面,这个通道也可以用来接收H5发送回来的数据.
// 使用h5Port往ets侧发送消息.
function PostMsgToEts(data) {
console.info('H5 to Ets data:'+data);
if (h5Port) {
h5Port.postMessage(data);
} else {
console.error('h5Port is null, Please initialize first');
}
}
// 调用接口发送数据到ets用户页面,便于存储和展示
this.PostMsgToEts(jsonObjTaskNumber.toString()+jsonObjTaskChecked.toString());
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
已于2024-7-29 17:55:36修改
赞
5
收藏 2
回复
相关推荐
很完整的实例，必须支持！
好文！
感觉很实用