标签管理模块 - Cordova与OpenHarmony混合开发实战-编程阁

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

📌 概述

标签管理模块用于管理日记的标签系统。这个模块提供了创建、编辑和删除标签的功能，支持标签的快速搜索和批量管理。通过Cordova框架，我们能够在Web层实现灵活的标签管理界面，同时利用OpenHarmony的数据库能力实现高效的标签查询。

标签管理模块采用了云标签设计，显示使用频率最高的标签。用户可以快速添加常用标签，提高日记编辑的效率。

🔗 完整流程

标签创建流程：用户在日记编辑时可以快速创建新标签。输入标签名称后，应用会自动保存标签到数据库。同时，应用会更新标签的使用频率统计。

标签管理流程：用户可以在标签管理页面查看所有标签及其使用情况。可以编辑标签名称或删除不需要的标签。删除标签时，应用会自动从所有日记中移除该标签。

标签搜索流程：用户可以通过关键词搜索标签。应用会实时显示匹配的标签列表，方便用户快速找到需要的标签。

🔧 Web代码实现

// 加载所有标签asyncfunctionloadTags(){try{consttags=awaitdb.getAllTags();returntags.sort((a,b)=>b.usageCount-a.usageCount);}catch(error){console.error('加载标签失败:',error);return[];}}// 添加标签asyncfunctionaddTag(tagName){try{constexistingTag=awaitdb.getTagByName(tagName);if(existingTag){// 增加使用频率awaitdb.updateTag(existingTag.id,{usageCount:(existingTag.usageCount||0)+1});}else{// 创建新标签awaitdb.addTag({name:tagName,usageCount:1,createdAt:newDate()});}returntrue;}catch(error){console.error('添加标签失败:',error);returnfalse;}}// 搜索标签asyncfunctionsearchTags(keyword){try{constallTags=awaitloadTags();returnallTags.filter(tag=>tag.name.toLowerCase().includes(keyword.toLowerCase()));}catch(error){console.error('搜索标签失败:',error);return[];}}

这些函数处理标签的加载、添加和搜索。addTag函数支持自动增加使用频率。

// 渲染标签管理页面asyncfunctionrenderTagManage(){consttags=awaitloadTags();consthtml=`<div class="tag-container"> <div class="tag-header"> <h1>标签管理</h1> <div class="tag-controls"> <input type="text" id="tag-search" placeholder="搜索标签..." class="search-box"> <button class="btn-primary" onclick="showAddTagModal()">添加标签</button> </div> </div> <div class="tag-cloud"> <h2>热门标签</h2> <div class="tags">${tags.slice(0,20).map(tag=>`<span class="tag-item" style="font-size:${calculateTagSize(tag.usageCount)}px">${tag.name}<span class="tag-count">(${tag.usageCount})</span> </span>`).join('')}</div> </div> <div class="tag-list"> <h2>所有标签</h2> <table class="tag-table"> <thead> <tr> <th>标签名称</th> <th>使用次数</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody>${tags.map(tag=>`<tr> <td>${tag.name}</td> <td>${tag.usageCount}</td> <td>${formatDate(tag.createdAt)}</td> <td> <button class="btn-small" onclick="editTag(${tag.id})">编辑</button> <button class="btn-small btn-danger" onclick="deleteTag(${tag.id})">删除</button> </td> </tr>`).join('')}</tbody> </table> </div> </div>`;document.getElementById('page-container').innerHTML=html;attachTagListeners();}// 计算标签大小functioncalculateTagSize(usageCount){constminSize=12;constmaxSize=24;constmaxUsage=Math.max(...tags.map(t=>t.usageCount));returnminSize+(usageCount/maxUsage)*(maxSize-minSize);}// 删除标签asyncfunctiondeleteTag(tagId){constconfirmed=confirm('确定要删除这个标签吗？');if(!confirmed)return;try{awaitdb.deleteTag(tagId);showSuccess('标签已删除');renderTagManage();}catch(error){showError('删除标签失败: '+error.message);}}

这个渲染函数生成了标签管理界面，包括热门标签云和完整的标签列表。

🔌 原生代码实现

// TagPlugin.ets - 标签管理原生插件 import { fileIo } from '@kit.BasicServicesKit'; @Entry @Component struct TagPlugin { // 导出标签列表 exportTags(tags: string, callback: (path: string) => void): void { try { const data = JSON.parse(tags); const exportPath = `/data/exports/tags_${Date.now()}.json`; const file = fileIo.openSync(exportPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE); fileIo.writeSync(file.fd, JSON.stringify(data, null, 2)); fileIo.closeSync(file.fd); callback(exportPath); } catch (error) { console.error('[TagPlugin] 导出失败:', error); callback(''); } } // 批量删除标签 batchDeleteTags(tagIds: string, callback: (success: boolean) => void): void { try { const ids = JSON.parse(tagIds); // 批量删除逻辑 callback(true); } catch (error) { console.error('[TagPlugin] 批量删除失败:', error); callback(false); } } build() { Column() { Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() }) } } }

这个原生插件提供了标签的导出和批量删除功能。

Web-Native通信代码

// 导出标签functionexportNativeTags(tags){returnnewPromise((resolve,reject)=>{cordova.exec((path)=>{if(path){showSuccess(`标签已导出到:${path}`);resolve(path);}else{reject(newError('导出失败'));}},(error)=>{console.error('导出失败:',error);reject(error);},'TagPlugin','exportTags',[JSON.stringify(tags)]);});}