旅行记录应用筛选器管理 - Cordova OpenHarmony 混合开发实战

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

📌 概述

筛选器管理功能允许用户保存和管理自定义的搜索筛选条件。用户可以创建多个筛选器，快速应用预定义的搜索条件。筛选器管理提供了快速访问常用搜索的便利。在 Cordova 与 OpenHarmony 的混合开发框架中，筛选器管理需要实现筛选器的保存、加载和应用功能。

🔗 完整流程

第一步：筛选器数据模型设计

筛选器需要保存用户的搜索条件，包括目的地、日期范围、花费范围、标签等。筛选器需要有名称和描述，便于用户识别。筛选器还需要记录创建时间和最后使用时间。

第二步：筛选器列表展示与操作

筛选器管理页面需要展示所有保存的筛选器。用户可以查看筛选器的详细信息，也可以进行编辑、删除、应用等操作。筛选器可以按名称、最后使用时间等进行排序。

第三步：原生层筛选器缓存与快速应用

OpenHarmony 原生层可以缓存常用的筛选器，提高应用速度。原生层还可以实现筛选器的快速应用，减少计算时间。

🔧 Web 代码实现

筛选器管理页面 HTML 结构

<divid="filters-page"class="page"><divclass="page-header"><h1>筛选器管理</h1><buttonclass="btn btn-primary"onclick="openFilterModal()">➕ 新建筛选器</button></div><divclass="filters-container"><divclass="filters-list"id="filtersList"><!-- 筛选器列表动态加载 --></div></div></div>

HTML 结构包含筛选器列表和新建筛选器按钮。

加载筛选器列表函数

asyncfunctionloadFilters(){try{// 从数据库查询所有筛选器constfilters=awaitdb.getAllFilters();// 按最后使用时间排序filters.sort((a,b)=>{consttimeA=a.lastUsedAt?newDate(a.lastUsedAt).getTime():0;consttimeB=b.lastUsedAt?newDate(b.lastUsedAt).getTime():0;returntimeB-timeA;});// 渲染筛选器列表renderFiltersList(filters);}catch(error){console.error('Error loading filters:',error);showToast('加载筛选器失败');}}

这个函数从数据库查询所有筛选器，按最后使用时间排序。loadFilters 函数是筛选器管理的核心加载函数。函数首先从数据库获取所有保存的筛选器。然后按照最后使用时间进行降序排序，使得最近使用的筛选器显示在最前面，方便用户快速访问常用的筛选器。如果筛选器没有使用过，则使用时间为 0，这样的筛选器会显示在列表的最后。最后调用 renderFiltersList 函数将排序后的筛选器列表渲染到页面上。这种设计提高了用户的工作效率，用户可以快速找到常用的筛选器。

筛选器列表渲染函数

functionrenderFiltersList(filters){constcontainer=document.getElementById('filtersList');container.innerHTML='';filters.forEach(filter=>{constfilterElement=document.createElement('div');filterElement.className='filter-item';filterElement.id=`filter-${filter.id}`;filterElement.innerHTML=`<div class="filter-header"> <h3>${filter.name}</h3> <span class="filter-count">${filter.usageCount||0}次使用</span> </div> <div class="filter-body"> <p class="filter-description">${filter.description||'暂无描述'}</p> <div class="filter-criteria">${filter.destination?`<span>📍${filter.destination}</span>`:''}${filter.minExpense?`<span>💰 ¥${filter.minExpense}-${filter.maxExpense}</span>`:''}</div> </div> <div class="filter-footer"> <button class="btn-small" onclick="applyFilter(${filter.id})"> 应用 </button> <button class="btn-small" onclick="editFilter(${filter.id})"> 编辑 </button> <button class="btn-small btn-danger" onclick="deleteFilter(${filter.id})"> 删除 </button> </div>`;container.appendChild(filterElement);});}

筛选器列表渲染函数为每个筛选器创建一个 DOM 元素。

保存筛选器函数

asyncfunctionsaveFilter(filterData){try{// 验证数据if(!filterData.name||filterData.name.trim()===''){showToast('筛选器名称不能为空');return;}// 创建筛选器对象constfilter={id:filterData.id||Date.now(),name:filterData.name,description:filterData.description,destination:filterData.destination,startDate:filterData.startDate,endDate:filterData.endDate,minExpense:filterData.minExpense,maxExpense:filterData.maxExpense,tags:filterData.tags,createdAt:filterData.createdAt||newDate().toISOString(),updatedAt:newDate().toISOString(),usageCount:filterData.usageCount||0};// 保存到数据库if(filterData.id){awaitdb.updateFilter(filter);showToast('筛选器已更新');}else{awaitdb.addFilter(filter);showToast('筛选器已创建');}// 关闭模态框closeModal();// 重新加载列表loadFilters();// 通知原生层if(window.cordova){cordova.exec((result)=>console.log('Filter saved:',result),(error)=>console.error('Save error:',error),'FilterPlugin','onFilterSaved',[{filterId:filter.id,timestamp:Date.now()}]);}}catch(error){console.error('Error saving filter:',error);showToast('保存失败，请重试');}}

保存筛选器函数创建或更新筛选器，然后保存到数据库。

应用筛选器函数

asyncfunctionapplyFilter(filterId){try{// 获取筛选器数据constfilter=awaitdb.getFilter(filterId);if(filter){// 更新使用次数filter.usageCount=(filter.usageCount||0)+1;filter.lastUsedAt=newDate().toISOString();awaitdb.updateFilter(filter);// 应用筛选器条件constallTrips=awaitdb.getAllTrips();constresults=filterTrips(allTrips,{destination:filter.destination,startDate:filter.startDate,endDate:filter.endDate,minExpense:filter.minExpense,maxExpense:filter.maxExpense,tags:filter.tags});// 导航到搜索结果页面navigateTo('search-results',{results:results});showToast(`已应用筛选器:${filter.name}`);}}catch(error){console.error('Error applying filter:',error);showToast('应用筛选器失败');}}

应用筛选器函数使用保存的筛选器条件进行搜索。

删除筛选器函数

asyncfunctiondeleteFilter(filterId){if(!confirm('确定要删除这个筛选器吗？')){return;}try{// 从数据库删除awaitdb.deleteFilter(filterId);showToast('筛选器已删除');// 从列表移除constelement=document.getElementById(`filter-${filterId}`);if(element){element.remove();}// 通知原生层if(window.cordova){cordova.exec((result)=>console.log('Filter deleted:',result),(error)=>console.error('Delete error:',error),'FilterPlugin','onFilterDeleted',[{filterId:filterId,timestamp:Date.now()}]);}}catch(error){console.error('Error deleting filter:',error);showToast('删除失败，请重试');}}

删除筛选器函数从数据库中删除筛选器。

🔌 OpenHarmony 原生代码实现

筛选器缓存插件

// FilterPlugin.etsimport{BusinessError}from'@ohos.base';exportclassFilterPlugin{privatefilterCache:Map<number,any>=newMap();// 处理筛选器保存事件onFilterSaved(args:any,callback:Function):void{try{constfilterId=args[0].filterId;consttimestamp=args[0].timestamp;// 清除缓存this.filterCache.clear();console.log(`[Filter] Saved:${filterId}at${timestamp}`);callback({success:true,message:'筛选器已保存'});}catch(error){callback({success:false,error:error.message});}}// 处理筛选器删除事件onFilterDeleted(args:any,callback:Function):void{try{constfilterId=args[0].filterId;// 清除缓存this.filterCache.delete(filterId);console.log(`[Filter] Deleted:${filterId}`);callback({success:true,message:'筛选器已删除'});}catch(error){callback({success:false,error:error.message});}}}

筛选器缓存插件在原生层管理筛选器缓存。

📝 总结

筛选器管理功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个筛选器保存和应用系统。Web 层负责 UI 渲染和筛选器操作，原生层负责缓存管理。通过筛选器管理，用户可以快速应用常用的搜索条件。