目标管理与进度追踪-Cordova 与 OpenHarmony 混合开发实战
本文介绍了开源鸿蒙应用中Web层目标管理模块的实现方案。该系统采用三层架构:Web层的GoalManager负责业务逻辑处理,DatabaseModule实现数据持久化,IndexedDB作为底层存储。核心功能包括目标创建(初始化进度为0)、进度更新(验证进度值)、完成管理(记录完成时间)以及统计分析(活跃/完成目标数、平均进度)。同时通过Cordova插件与原生层进行目标事件同步,确保跨平台数据

欢迎大家加入开源鸿蒙跨平台开发者社区,一起共建开源鸿蒙跨平台生态。
本文对应模块:Web 层的目标管理与进度追踪实现,包括目标创建、进度更新、完成状态管理、与原生层的目标事件同步机制。
📌 概述
目标管理是应用的重要功能,帮助用户设定和追踪长期目标。目标管理包括目标创建、进度更新、完成状态管理等功能。GoalManager 类是目标管理的核心,负责管理用户的各类目标。通过目标管理,用户可以更好地规划长期计划,逐步实现自己的梦想。
🔗 目标管理的完整流程
目标管理分为三层:Web 层的 GoalManager(目标管理器)负责目标的创建和进度管理,DatabaseModule(数据库模块)负责数据的持久化,IndexedDB 是底层的本地数据库。当用户创建目标时,GoalManager 将目标信息保存到数据库。当用户更新进度时,GoalManager 更新目标的进度值。当用户完成目标时,GoalManager 标记目标为已完成。
目标管理与任务管理不同,它关注的是长期的大目标。用户可以为自己设定多个目标,例如学习新技能、完成项目、健身目标等。每个目标可以有多个里程碑或步骤。通过定期更新进度,用户可以看到自己离目标有多远。目标完成时,用户会获得成就感,这可以激励用户继续设定新的目标。
目标管理的实现需要考虑以下几个方面:首先是目标的创建和管理,需要支持添加、编辑、删除目标。其次是进度的更新,需要允许用户更新目标的完成百分比。第三是完成状态的管理,需要正确处理目标的完成时间。第四是统计信息的展示,需要显示活跃目标数、已完成目标数和平均进度。最后是与原生层的集成,需要通过 Cordova 插件将目标事件通知给原生层。
目标管理在实际应用中非常有用。用户可以通过目标管理来规划自己的人生,例如职业发展、学习计划、健身目标等。目标管理还可以帮助用户识别自己的优先级,集中精力在最重要的事情上。通过长期的目标追踪,用户可以逐步实现自己的梦想,获得更大的成就感。
🔧 目标管理器实现
目标管理器的核心实现包括目标创建、进度更新、完成管理、统计计算等功能。目标创建时需要初始化进度为0。进度更新时需要验证进度值。完成管理时需要记录完成时间。
// 目标管理器的关键方法
class GoalManager {
constructor() {
this.goals = [];
}
async init() {
await this.loadGoals();
}
async createGoal(goalData) {
const id = await db.addGoal({
...goalData,
status: 'active',
progress: 0,
createdAt: new Date().toISOString()
});
await this.loadGoals();
return id;
}
async updateGoalProgress(id, progress) {
await db.updateGoal(id, { progress });
await this.loadGoals();
}
async completeGoal(id) {
await db.updateGoal(id, {
status: 'completed',
progress: 100,
completedAt: new Date().toISOString()
});
await this.loadGoals();
}
getGoalStats() {
const stats = {
total: this.goals.length,
active: 0,
completed: 0,
avgProgress: 0
};
let totalProgress = 0;
this.goals.forEach(goal => {
if (goal.status === 'active') stats.active++;
else if (goal.status === 'completed') stats.completed++;
totalProgress += goal.progress;
});
stats.avgProgress = this.goals.length > 0 ? Math.round(totalProgress / this.goals.length) : 0;
return stats;
}
async loadGoals() {
this.goals = await db.getAllGoals();
}
}
const goalManager = new GoalManager();
代码解释:
GoalManager 类提供了目标管理的核心功能。init() 方法初始化时加载所有目标。createGoal() 方法创建新目标,初始化状态为活跃,进度为0,并记录创建时间。updateGoalProgress() 方法更新目标的进度百分比。completeGoal() 方法将目标标记为已完成,设置进度为100,并记录完成时间。getGoalStats() 方法返回目标的统计信息,包括总目标数、活跃目标数、已完成目标数和平均进度。loadGoals() 方法从数据库加载所有目标数据。
🔌 原生层的目标事件同步
HarmonyOS 原生层也需要与 Web 层的目标管理进行集成。原生层可以通过 Cordova 插件来接收来自 Web 层的目标事件。
// ArkTS 代码示例 - 目标管理同步插件
import { CordovaPlugin, CallbackContext } from '@magongshou/harmony-cordova/Index';
import { PluginResult, MessageStatus } from '@magongshou/harmony-cordova/Index';
export class GoalSyncPlugin extends CordovaPlugin {
// 监听 Web 层的目标创建事件
async onGoalCreated(callbackContext: CallbackContext, args: string[]): Promise<void> {
try {
const goalData = JSON.parse(args[0]);
console.log('[GoalSyncPlugin] 目标已创建:', goalData.title);
const result = PluginResult.createByString(MessageStatus.OK, '目标已同步');
callbackContext.sendPluginResult(result);
} catch (error) {
const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
callbackContext.sendPluginResult(result);
}
}
// 监听 Web 层的进度更新事件
async onProgressUpdated(callbackContext: CallbackContext, args: string[]): Promise<void> {
try {
const progressData = JSON.parse(args[0]);
console.log('[GoalSyncPlugin] 进度已更新:', progressData.progress, '%');
const result = PluginResult.createByString(MessageStatus.OK, '进度已同步');
callbackContext.sendPluginResult(result);
} catch (error) {
const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
callbackContext.sendPluginResult(result);
}
}
// 监听 Web 层的目标完成事件
async onGoalCompleted(callbackContext: CallbackContext, args: string[]): Promise<void> {
try {
const completionData = JSON.parse(args[0]);
console.log('[GoalSyncPlugin] 目标已完成:', completionData.goalId);
const result = PluginResult.createByString(MessageStatus.OK, '完成已同步');
callbackContext.sendPluginResult(result);
} catch (error) {
const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
callbackContext.sendPluginResult(result);
}
}
}
原生代码解释:
GoalSyncPlugin 是一个 Cordova 插件,提供了原生层与 Web 层目标管理的交互接口。onGoalCreated 方法监听 Web 层的目标创建事件,接收新创建的目标信息。原生层可以根据这个事件在原生层也创建对应的目标。onProgressUpdated 方法监听 Web 层的进度更新事件,接收更新的进度值。原生层可以根据这个事件更新原生层的进度显示。onGoalCompleted 方法监听 Web 层的目标完成事件,接收完成的目标ID。原生层可以根据这个事件显示完成提示或播放庆祝音效。
Web 层通知原生目标事件
Web 层可以调用原生插件来通知原生层目标相关的事件:
// JavaScript 代码 - 通知原生目标事件
function notifyGoalCreated(title, description) {
cordova.exec(
function() { console.log('原生层已收到目标创建通知'); },
function(error) { console.error('通知失败:', error); },
'GoalSyncPlugin',
'onGoalCreated',
[JSON.stringify({ title, description })]
);
}
function notifyProgressUpdated(goalId, progress) {
cordova.exec(
function() { console.log('原生层已收到进度更新通知'); },
function(error) { console.error('通知失败:', error); },
'GoalSyncPlugin',
'onProgressUpdated',
[JSON.stringify({ goalId, progress })]
);
}
function notifyGoalCompleted(goalId, completedAt) {
cordova.exec(
function() { console.log('原生层已收到目标完成通知'); },
function(error) { console.error('通知失败:', error); },
'GoalSyncPlugin',
'onGoalCompleted',
[JSON.stringify({ goalId, completedAt })]
);
}
Web 层代码解释:
notifyGoalCreated 函数使用 cordova.exec() 调用原生插件的 onGoalCreated 方法,传递目标的标题和描述。这样可以从 Web 层通知原生层新目标已创建。notifyProgressUpdated 函数调用原生插件的 onProgressUpdated 方法,传递目标ID和进度值。这样可以从 Web 层通知原生层进度已更新。notifyGoalCompleted 函数调用原生插件的 onGoalCompleted 方法,传递目标ID和完成时间。这样可以从 Web 层通知原生层目标已完成。通过这些函数,Web 层可以将目标事件同步给原生层,使原生层能够保持与 Web 层的目标数据一致。
📝 总结
目标管理是应用的重要功能,通过设定和追踪长期目标,用户可以更好地规划人生。通过与原生层的集成,可以实现目标事件的完整同步,使用户在不同层级都能看到最新的目标进度。
更多推荐




所有评论(0)