在这里插入图片描述

欢迎大家加入开源鸿蒙跨平台开发者社区,一起共建开源鸿蒙跨平台生态。

本文对应模块: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 层的目标数据一致。

📝 总结

目标管理是应用的重要功能,通过设定和追踪长期目标,用户可以更好地规划人生。通过与原生层的集成,可以实现目标事件的完整同步,使用户在不同层级都能看到最新的目标进度。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐