羽球联盟 HarmonyOS NEXT 实战系列 (12/20)：搜索页如何合并本地数据与远程数据

wangji93

240人浏览 · 2026-07-06 11:34:03

wangji93 共创先锋 · 2026-07-06 11:34:03 发布

文章导读

搜索页最难的不是画输入框，而是让结果在多数据源前提下仍然稳定、可信。
羽球联盟把资讯和装备分成两个结果 Tab，但候选池的合并、去重和排序逻辑是统一的。
远程数据负责新鲜度，本地数据负责完整度，顺序一旦反了，搜索页就会变得很奇怪。

页面效果

很多内容型应用都有一个共同问题：搜索框看上去已经做完了，但用户一搜就觉得“不对劲”。有时明明首页出现过的内容搜不到，有时同一条资讯在结果里重复出现，有时清空关键词后页面还停留在上一轮结果。这些都不是输入框的问题，而是结果组织的问题。

搜索结果页效果

羽球联盟搜索页的处理比较扎实。顶部先告诉用户当前命中了多少条资讯、多少条装备，正文再用 SegmentTab 把两类结果拆开。这样用户不会在一个长列表里混着看资讯卡片和装备卡片，也能快速判断自己这次搜的是“内容”还是“商品信息”。

实战拆解

这页真正的关键，在于搜索不是直接对某个数组 filter() 一下，而是先构造稳定候选池。资讯走 allArticles()，装备走 allEquipments()。如果远程数据为空，就直接退回本地静态数据；如果远程数据已经存在，就先放远程内容，再把本地里未被覆盖的条目补上。这样做的目的非常明确：搜索结果必须和首页刷新后的内容保持一致，但又不能因为远程源不完整而漏掉本地内容。

这里的顺序不能随便换。假如先放本地、后放远程，结果页就会把旧内容顶在前面，读者刚在首页看到的新资讯反而要往后翻；假如完全信任远程源，又会出现远程没有覆盖到的装备或资讯直接消失。羽球联盟实际上是在“新鲜度优先”和“完整度优先”之间做了一个对搜索体验更友好的平衡。

另一个容易被低估的点是命中字段。资讯侧不仅搜标题，还搜摘要、标签和作者；装备侧除了名称，还搜品牌、摘要和标签。真实用户很少会完整记住文章标题，他们更可能记得“某个品牌”“某个球员名”或者“某个装备关键词”。字段覆盖越接近用户记忆方式，搜索页越像真功能。

最后是空态。关键词为空时，页面明确提示“请输入关键词开始搜索”；关键词存在但没有命中时，又给出“没有找到相关资讯/装备”。这两个状态看起来只是文案差异，实际决定了用户能不能判断当前是“还没搜”还是“搜不到”。

关键代码

private allArticles(): Article[] {
  if (this.remoteArticles.length === 0) {
    return ARTICLES;
  }
  const remoteIds: Set<string> = new Set();
  for (const a of this.remoteArticles) {
    remoteIds.add(a.id);
  }
  const merged: Article[] = [];
  for (const a of this.remoteArticles) {
    merged.push(a);
  }
  for (const a of ARTICLES) {
    if (!remoteIds.has(a.id)) {
      merged.push(a);
    }
  }
  return merged;
}

private matchedArticles(): Article[] {
  const kw: string = this.keyword.trim().toLowerCase();
  return this.allArticles().filter((a: Article) => {
    const title: string = (a.title ?? '').toLowerCase();
    const summary: string = (a.summary ?? '').toLowerCase();
    const tag: string = (a.tag ?? '').toLowerCase();
    const author: string = (a.author ?? '').toLowerCase();
    return title.indexOf(kw) >= 0 || summary.indexOf(kw) >= 0
      || tag.indexOf(kw) >= 0 || author.indexOf(kw) >= 0;
  });
}