【OpenHarmony/HarmonyOs 】ArkUI 搜索体验实战防抖联想、URL 识别与兴趣推荐前言导航首页的搜索框不应只会“点击后跳到搜索引擎”。优秀的搜索体验需要判断用户输入的是关键词还是网址、及时给出联想、过滤本地收藏并且避免每输入一个字符就请求网络。本文拆解 LinkOS 链界中的搜索与推荐实现。一、搜索输入的三种意图用户输入内容通常属于三类HarmonyOS ArkTS普通关键词应跳到搜索引擎developer.huawei.com域名应直接打开https://github.com完整链接也应直接打开。因此输入变化时不能立即统一搜索而要先做意图识别。二、把输入规范化为 HTTPS URLprivatenormalizeInputToHttpsUrl(strInput:string): string |null{ const raw (strInput ||).trim();if(!raw)returnnull;if(raw.startsWith(https://))returnraw;if(raw.startsWith(http://)) {returnhttps://${raw.substring(http://.length)};} const domainLike /^[a-z0-9.-]\.[a-z]{2,}([/:].*)?$/.test( raw.toLowerCase() ); return domainLike ? https://${raw} :null; }这里有两个业务选择一是无协议域名默认补https://二是把 HTTP 尝试升级为 HTTPS。这样可以让所有后续链路遵守应用的安全约束。正则只承担“快速判断像不像域名”不是完整 URL 解析器。生产环境还应考虑国际化域名、IPv6、端口、非法字符以及目标站点是否真的支持 HTTPS。三、260ms 防抖降低请求量privaterecommendSuggestSeq:number0;privatescheduleRecommendSuggestFetch(input:string):void{constq input.trim();this.recommendSuggestSeq1;constseq this.recommendSuggestSeq;setTimeout(async() {if(seq !this.recommendSuggestSeq)return;awaitthis.fetchRecommendSuggest(q); },260); }这是一种轻量的“序列号防抖”。每次输入都会增加序列号旧定时任务即使到期也会因为序列号不一致而退出。为什么还需要处理响应乱序假设请求 A 先发、请求 B 后发但 A 的网络响应更晚回来。如果没有版本校验旧结果可能覆盖新结果。因此更完整的方案应在发起请求和写入状态时都校验序列号或者使用可取消请求。四、只在合适的时候获取联想if(!query || query.length 2||this.isLikelyUrlQuery(query)) {this.recommendSuggestList [];this.recommendSuggestLoading false;return; }空输入、单字符和 URL 都不请求联想。这样既减少接口压力也避免用户明确输入网址时弹出无关关键词。项目通过 Axios 请求 Bing 建议接口并最多保留 8 条constresp awaithttp.get(https://api.bing.com/osjson.aspx?query${encodeURIComponent(query)});if(Array.isArray(resp.data) resp.data.length2) {constsuggestions resp.data[1];// 校验数组与字符串类型后再写入 State}解析外部 API 时不能假定结构永远正确。数组层级、元素类型和空值都应检查失败时清空联想并保持页面可继续使用。五、本地搜索使用加权排序简单的includes()只能判断匹配与否无法区分结果质量。项目为标题和 URL 设置不同分数let score 0;if (title.startsWith(q)) score 20;if (url.startsWith(q)) score 10;if (title.includes(q)) score 5;if (url.includes(q)) score 3;随后先按得分降序再按更新时间降序。于是“Git”搜索中以 Git 开头的标题会排在 URL 中偶然包含 Git 的站点之前同分时最近编辑内容优先。这种规则容易解释、无需额外依赖也适合几十到几百条本地收藏。数据更多时可将标准化文本预计算或交给数据库索引完成。六、搜索词与网址使用不同动作关键词被编码后交给搜索引擎privatebuildSearchUrl(query:string):string{returnhttps://cn.bing.com/search?q${encodeURIComponent(query.trim())}; }encodeURIComponent()很重要。空格、中文、等字符如果直接拼接会破坏查询参数甚至引入参数注入问题。而候选网址会直接进入统一的openUrl()先安全检查再统计访问并跳转 WebView。所有入口复用同一函数避免某条路径漏掉安全校验。七、兴趣推荐不等于 AI 推荐项目还会根据用户兴趣组合本地候选站点。早期产品完全可以采用“兴趣标签 → 候选表 → 去重 → 排序”的可解释规则不必一开始就引入复杂模型。推荐系统至少应遵循相同 URL 只出现一次用户自定义站点优先级高于系统预置用户明确隐藏的内容不再推荐推荐理由可以展示例如“因为你选择了开发工具”没有兴趣数据时提供稳定的默认集合。八、交互状态不可缺少一个完整搜索面板至少要覆盖输入为空隐藏建议正在请求显示轻量加载提示请求失败不阻塞本地搜索无本地结果显示空状态与添加入口URL 已收藏按钮显示“已添加”并禁用危险链接弹窗说明已拦截。这些状态往往比“请求成功的主路径”更影响真实体验。九、总结搜索体验是一条小型数据流水线输入清洗 → 意图识别 → 防抖 → 本地匹配/远程联想 → 加权排序 → 安全打开。将每一步拆成纯粹的小函数后逻辑更容易测试页面代码也更容易阅读。对 HarmonyOS 导航、知识库或本地文件检索应用这套方法都可以复用。
)
