当前位置：首页 > news >正文

高级搜索模块 Cordova 与 OpenHarmony 混合开发实战

news 2026/7/8 0:29:05

📌 概述

高级搜索模块提供了多条件搜索喝茶记录的功能。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，允许用户按日期范围、茶叶类型、产地、价格范围和评分等多个条件进行搜索。模块支持条件组合搜索，提供了强大的数据查询能力。用户可以保存常用的搜索条件，快速执行重复搜索。

🔗 完整流程

第一步：搜索条件设置

用户在高级搜索页面设置多个搜索条件。应用会实时验证用户输入的条件，确保条件的有效性。用户可以选择是否保存当前的搜索条件以供后续使用。

第二步：条件组合搜索

当用户点击搜索按钮时，应用会将所有条件组合成一个复杂的查询。应用会在原生层执行这个复杂查询，利用数据库索引快速返回结果。

第三步：搜索结果展示与管理

搜索完成后，应用会将匹配的记录显示为列表形式。用户可以对搜索结果进行排序、导出或进一步筛选。

🔧 Web 代码实现

HTML 高级搜索表单

<divid="advanced-search-page"class="page"><divclass="page-header"><h1>高级搜索</h1></div><formid="advanced-search-form"class="search-form"><divclass="form-group"><labelfor="search-date-start">开始日期</label><inputtype="date"id="search-date-start"name="dateStart"></div><divclass="form-group"><labelfor="search-date-end">结束日期</label><inputtype="date"id="search-date-end"name="dateEnd"></div><divclass="form-group"><labelfor="search-tea-type">茶叶类型</label><selectid="search-tea-type"name="teaType"><optionvalue="">全部</option></select></div><divclass="form-group"><labelfor="search-origin">产地</label><selectid="search-origin"name="origin"><optionvalue="">全部</option></select></div><divclass="form-group"><labelfor="search-price-min">最低价格 (元)</label><inputtype="number"id="search-price-min"name="priceMin"min="0"step="0.01"></div><divclass="form-group"><labelfor="search-price-max">最高价格 (元)</label><inputtype="number"id="search-price-max"name="priceMax"min="0"step="0.01"></div><divclass="form-group"><labelfor="search-rating">最低评分</label><selectid="search-rating"name="rating"><optionvalue="">全部</option><optionvalue="1">1 星及以上</option><optionvalue="2">2 星及以上</option><optionvalue="3">3 星及以上</option><optionvalue="4">4 星及以上</option><optionvalue="5">5 星</option></select></div><divclass="form-actions"><buttontype="submit"class="btn btn-primary">搜索</button><buttontype="button"class="btn btn-secondary"onclick="resetSearchForm()">重置</button><buttontype="button"class="btn btn-info"onclick="saveSearchCondition()">保存条件</button></div></form><divid="advanced-search-results"class="search-results"><!-- 搜索结果动态生成 --></div></div>

高级搜索表单包含多个搜索条件字段。用户可以设置日期范围、茶叶类型、产地、价格范围和评分等条件。

高级搜索逻辑

asyncfunctionhandleAdvancedSearch(event){event.preventDefault();constformData=newFormData(document.getElementById('advanced-search-form'));constconditions={dateStart:formData.get('dateStart'),dateEnd:formData.get('dateEnd'),teaType:formData.get('teaType'),origin:formData.get('origin'),priceMin:parseFloat(formData.get('priceMin'))||null,priceMax:parseFloat(formData.get('priceMax'))||null,rating:parseInt(formData.get('rating'))||null};try{// 执行高级搜索constresults=awaitperformAdvancedSearch(conditions);constresultsContainer=document.getElementById('advanced-search-results');resultsContainer.innerHTML='';if(results.length===0){resultsContainer.innerHTML='<div class="no-data"><p>未找到匹配的记录</p></div>';return;}results.forEach(record=>{constresultEl=createSearchResultElement(record);resultsContainer.appendChild(resultEl);});showToast(`找到${results.length}条记录`,'success');// 记录搜索事件if(window.cordova){cordova.exec(null,null,'TeaLogger','logEvent',['advanced_search_executed',{resultCount:results.length}]);}}catch(error){console.error('Advanced search failed:',error);showToast('搜索失败，请重试','error');}}asyncfunctionperformAdvancedSearch(conditions){constrecords=awaitdb.getAllRecords();returnrecords.filter(record=>{// 日期范围过滤if(conditions.dateStart){constrecordDate=newDate(record.createdAt);conststartDate=newDate(conditions.dateStart);if(recordDate<startDate)returnfalse;}if(conditions.dateEnd){constrecordDate=newDate(record.createdAt);constendDate=newDate(conditions.dateEnd);if(recordDate>endDate)returnfalse;}// 茶叶类型过滤if(conditions.teaType&&record.teaType!==conditions.teaType){returnfalse;}// 产地过滤if(conditions.origin&&record.origin!==conditions.origin){returnfalse;}// 价格范围过滤if(conditions.priceMin!==null&&record.price<conditions.priceMin){returnfalse;}if(conditions.priceMax!==null&&record.price>conditions.priceMax){returnfalse;}// 评分过滤if(conditions.rating!==null&&record.rating<conditions.rating){returnfalse;}returntrue;});}functionresetSearchForm(){document.getElementById('advanced-search-form').reset();document.getElementById('advanced-search-results').innerHTML='';}asyncfunctionsaveSearchCondition(){constformData=newFormData(document.getElementById('advanced-search-form'));constcondition={name:prompt('请输入搜索条件名称:'),dateStart:formData.get('dateStart'),dateEnd:formData.get('dateEnd'),teaType:formData.get('teaType'),origin:formData.get('origin'),priceMin:formData.get('priceMin'),priceMax:formData.get('priceMax'),rating:formData.get('rating'),createdAt:newDate().toISOString()};if(condition.name){try{awaitdb.addSearchCondition(condition);showToast('搜索条件已保存','success');}catch(error){showToast('保存失败','error');}}}

这段代码实现了高级搜索功能。handleAdvancedSearch()处理表单提交。performAdvancedSearch()执行多条件搜索。saveSearchCondition()保存搜索条件供后续使用。

🔌 OpenHarmony 原生代码

复杂查询执行

// entry/src/main/ets/plugins/AdvancedQuery.etsimport{relationalStore}from'@kit.ArkData';exportclassAdvancedQuery{privatestore:relationalStore.RdbStore;asyncexecuteComplexQuery(conditions:SearchConditions):Promise<TeaRecord[]>{constpredicates=newrelationalStore.RdbPredicates('tea_records');// 日期范围条件if(conditions.dateStart){predicates.greaterThanOrEqualTo('created_at',conditions.dateStart);}if(conditions.dateEnd){predicates.lessThanOrEqualTo('created_at',conditions.dateEnd);}// 茶叶类型条件if(conditions.teaType){predicates.equalTo('tea_type',conditions.teaType);}// 产地条件if(conditions.origin){predicates.equalTo('origin',conditions.origin);}// 价格范围条件if(conditions.priceMin!==null){predicates.greaterThanOrEqualTo('price',conditions.priceMin);}if(conditions.priceMax!==null){predicates.lessThanOrEqualTo('price',conditions.priceMax);}// 评分条件if(conditions.rating!==null){predicates.greaterThanOrEqualTo('rating',conditions.rating);}// 执行查询constresultSet=awaitthis.store.query(predicates);constrecords:TeaRecord[]=[];while(resultSet.goToNextRow()){records.push(this.parseRecord(resultSet));}resultSet.close();returnrecords;}privateparseRecord(resultSet:relationalStore.ResultSet):TeaRecord{return{id:resultSet.getColumnValue(resultSet.getColumnIndex('id'))asnumber,teaType:resultSet.getColumnValue(resultSet.getColumnIndex('tea_type'))asstring,origin:resultSet.getColumnValue(resultSet.getColumnIndex('origin'))asstring,price:resultSet.getColumnValue(resultSet.getColumnIndex('price'))asnumber,rating:resultSet.getColumnValue(resultSet.getColumnIndex('rating'))asnumber};}}interfaceSearchConditions{dateStart?:string;dateEnd?:string;teaType?:string;origin?:string;priceMin?:number;priceMax?:number;rating?:number;}interfaceTeaRecord{id:number;teaType:string;origin:string;price:number;rating:number;}