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

📌 概述

收藏日记模块用于管理用户标记为收藏的日记。这个模块提供了快速访问用户最喜爱的日记内容的功能。通过Cordova框架，我们能够在Web层实现高效的收藏管理和列表展示，同时利用OpenHarmony的本地存储能力实现快速的数据访问。

收藏日记模块采用了标签化管理，用户可以为收藏的日记添加自定义标签，方便后续的分类查找。同时提供了批量操作功能，用户可以一次性取消多个日记的收藏状态。

🔗 完整流程

收藏操作流程：用户在日记列表或日记详情页面点击收藏按钮时，应用将该日记的ID添加到收藏表中，并更新日记的收藏状态标志。同时，应用会显示一个成功提示，告知用户日记已被收藏。如果用户再次点击收藏按钮，应用会取消收藏，并从收藏表中删除该记录。

收藏列表加载流程：当用户进入收藏日记页面时，应用从数据库中查询所有已收藏的日记，并按照收藏时间倒序排列。应用支持按标签过滤收藏的日记，用户可以快速找到特定类别的收藏内容。

批量操作流程：用户可以选择多个收藏的日记，然后执行批量操作，如批量取消收藏、批量添加标签或批量删除。这些操作通过事务处理确保数据的一致性。

🔧 Web代码实现

// 加载收藏日记列表
async function loadFavoriteDiaries(page = 1, pageSize = 20) {
    try {
        const offset = (page - 1) * pageSize;
        const favorites = await db.getFavoriteDiaries(offset, pageSize);
        const total = await db.getFavoriteDiaryCount();
        
        return {
            data: favorites,
            total: total,
            page: page,
            pageSize: pageSize,
            totalPages: Math.ceil(total / pageSize)
        };
    } catch (error) {
        console.error('加载收藏日记失败:', error);
        return null;
    }
}

// 切换日记收藏状态
async function toggleFavorite(diaryId) {
    try {
        const diary = await db.getDiary(diaryId);
        const isFavorite = diary.isFavorite || false;
        
        if (isFavorite) {
            await db.removeFavorite(diaryId);
            showSuccess('已取消收藏');
        } else {
            await db.addFavorite(diaryId);
            showSuccess('已收藏');
        }
        
        return !isFavorite;
    } catch (error) {
        showError('操作失败: ' + error.message);
        return null;
    }
}

这两个函数处理收藏日记的加载和切换操作。toggleFavorite函数首先检查日记的当前收藏状态，然后执行相应的添加或移除操作。

// 渲染收藏日记列表
async function renderDiaryFavorites() {
    const result = await loadFavoriteDiaries(1, 20);
    
    if (!result) {
        showError('无法加载收藏日记');
        return;
    }
    
    const html = `
        <div class="favorites-container">
            <div class="list-header">
                <h1>收藏日记</h1>
                <p>共 ${result.total} 条收藏</p>
                <div class="list-controls">
                    <button class="btn-small" onclick="clearAllFavorites()">清空全部</button>
                    <button class="btn-small" onclick="exportFavorites()">导出收藏</button>
                </div>
            </div>
            
            <div class="favorites-list">
                ${result.data.length > 0 ? result.data.map(diary => `
                    <div class="favorite-item" data-id="${diary.id}">
                        <div class="favorite-header">
                            <h3>${diary.title}</h3>
                            <span class="favorite-date">${formatDate(diary.createdAt)}</span>
                        </div>
                        <div class="favorite-content">
                            <p>${diary.content.substring(0, 150)}...</p>
                        </div>
                        <div class="favorite-footer">
                            <span class="pet-tag">${diary.petName}</span>
                            <div class="favorite-actions">
                                <button class="btn-small" onclick="app.navigateTo('diary-edit', ${diary.id})">编辑</button>
                                <button class="btn-small" onclick="toggleFavorite(${diary.id})">取消收藏</button>
                            </div>
                        </div>
                    </div>
                `).join('') : '<p class="empty-state">还没有收藏任何日记</p>'}
            </div>
            
            <div class="pagination">
                ${result.totalPages > 1 ? renderPagination(result.page, result.totalPages) : ''}
            </div>
        </div>
    `;
    
    document.getElementById('page-container').innerHTML = html;
}

这个渲染函数生成了收藏日记列表界面。当没有收藏时，显示空状态提示。每个收藏项包含日记标题、日期、内容摘要和操作按钮。

// 批量取消收藏
async function batchRemoveFavorites(diaryIds) {
    try {
        await Promise.all(diaryIds.map(id => db.removeFavorite(id)));
        showSuccess(`已取消 ${diaryIds.length} 条收藏`);
        renderDiaryFavorites();
    } catch (error) {
        showError('批量操作失败: ' + error.message);
    }
}

// 导出收藏日记
async function exportFavorites() {
    try {
        const favorites = await db.getAllFavoriteDiaries();
        const jsonData = JSON.stringify(favorites, null, 2);
        
        // 调用原生导出功能
        exportToFile('favorites.json', jsonData);
        showSuccess('收藏已导出');
    } catch (error) {
        showError('导出失败: ' + error.message);
    }
}

批量操作函数使用Promise.all()并发处理多个取消收藏操作。导出函数将收藏数据序列化为JSON格式，然后调用原生导出功能。

🔌 原生代码实现

// FavoritePlugin.ets - 收藏管理原生插件
import { fileIo } from '@kit.BasicServicesKit';
import { dataShare } from '@kit.DataShareKit';

@Entry
@Component
struct FavoritePlugin {
    // 导出收藏数据
    exportFavorites(jsonData: string, fileName: string, callback: (path: string) => void): void {
        try {
            const exportPath = `/data/exports/${fileName}`;
            const file = fileIo.openSync(exportPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE);
            fileIo.writeSync(file.fd, jsonData);
            fileIo.closeSync(file.fd);
            
            callback(exportPath);
        } catch (error) {
            console.error('[FavoritePlugin] 导出失败:', error);
            callback('');
        }
    }
    
    // 分享收藏日记
    shareFavorite(diaryId: string, diaryTitle: string, callback: (success: boolean) => void): void {
        try {
            const shareData = {
                title: diaryTitle,
                text: `我在宠物日记中收藏了: ${diaryTitle}`,
                url: `app://diary/${diaryId}`
            };
            
            // 调用系统分享功能
            const intent = new Intent();
            intent.setAction('android.intent.action.SEND');
            intent.setType('text/plain');
            intent.putExtra('android.intent.extra.TEXT', shareData.text);
            startActivity(intent);
            
            callback(true);
        } catch (error) {
            console.error('[FavoritePlugin] 分享失败:', error);
            callback(false);
        }
    }
    
    // 同步收藏到云端
    syncFavoritesToCloud(favorites: string, callback: (success: boolean) => void): void {
        try {
            // 云端同步逻辑
            console.log('[FavoritePlugin] 正在同步收藏到云端...');
            callback(true);
        } catch (error) {
            console.error('[FavoritePlugin] 同步失败:', error);
            callback(false);
        }
    }
    
    build() {
        Column() {
            Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() })
        }
    }
}

这个原生插件提供了导出、分享和云端同步功能。通过fileIo模块，我们能够将收藏数据导出为文件。通过Intent机制，我们能够调用系统分享功能。

Web-Native通信代码

// 导出收藏到文件
function exportToFile(fileName, jsonData) {
    return new Promise((resolve, reject) => {
        cordova.exec(
            (path) => {
                if (path) {
                    console.log('导出成功:', path);
                    resolve(path);
                } else {
                    reject(new Error('导出失败'));
                }
            },
            (error) => {
                console.error('导出错误:', error);
                reject(error);
            },
            'FavoritePlugin',
            'exportFavorites',
            [jsonData, fileName]
        );
    });
}

// 分享收藏日记
function shareNativeFavorite(diaryId, diaryTitle) {
    return new Promise((resolve, reject) => {
        cordova.exec(
            (success) => {
                if (success) {
                    showSuccess('分享成功');
                    resolve(true);
                } else {
                    reject(new Error('分享失败'));
                }
            },
            (error) => {
                console.error('分享错误:', error);
                reject(error);
            },
            'FavoritePlugin',
            'shareFavorite',
            [diaryId, diaryTitle]
        );
    });
}

这段代码展示了如何通过Cordova调用原生的导出和分享功能。通过Promise包装，我们能够以异步的方式处理这些操作，并在完成后进行相应的UI更新。

📝 总结

收藏日记模块展示了Cordova与OpenHarmony在数据管理和系统集成方面的应用。在Web层，我们实现了高效的收藏管理和批量操作。在原生层，我们提供了文件导出和系统分享等功能。

通过收藏功能，用户可以快速访问最喜爱的日记内容。通过批量操作和导出功能，用户可以更灵活地管理收藏数据。通过Web-Native通信，我们能够充分利用OpenHarmony的系统功能，为用户提供更完整的收藏体验。

在实际开发中，建议实现收藏标签分类，提供快速搜索功能，并支持云端同步确保数据安全。