06-文章搜索页面

文章搜索页面

6-1：开篇

再上一章中，我们完成了 热搜首页 的开发，虽然经历了 ”千辛万苦“ ，但是对大家来说，应该也是收获满满。

那么在这一章节，我们将会进入新的篇章，来到 文章搜索 页面的开发。那么在 文章搜索 的页面开发中，我们又会经历哪些 奇奇怪怪的 bug ，又将会获得哪些新的收获呢？

让我们一起期待吧！

6-2：文章搜索 - 分析文章搜索页面

1. 【慕课热搜】
   1. 展示 8 个热搜内容
2. 【搜索历史】
   1. 按照【从后向前】的顺序，展示搜索历史
   2. 点击【小垃圾筒】可删除历史记录
3. 【搜索结果】
   1. 不输入内容直接回车，按照当前的 placeholder 索引
   2. 输入内容，按照当前内容索引
   3. item 的展示分为三类
      1. 无图片展示
      2. 单个图片展示
      3. 三个图片展示
   4. item 中关键字高亮
   5. 点击 【叉号】返回【搜索历史】
   6. 点击【取消】返回【慕课热搜】

6-3：文章搜索 - 使用分包，创建 search-blog 页面

分包

1. 什么是分包

   分包指：将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载

2. 分包的好处

   • 可以优化小程序首次启动的下载时间
   • 在多团队共同开发时可以更好的解耦协作

微信小程序 提供了分包的能力，而 uniapp 也对其进行了支持。

实现分包

1. 打开 pages.json，新建 subPackages 节点

   "subPackages": []
   

2. 节点中每个对象为一个分包，其中

   1. root：分包包名
   2. name：分包别名
   3. pages：分包下的页面
      1. path：分包下的页面路径
      2. style：页面的样式

3. "subPackages": [
       {
         "root": "subpkg",
         "name": "sub-1",
         "pages": [
           {
             "path": "pages/search-blog/search-blog",
             "style": {
               "navigationBarTitleText": "",
               "enablePullDownRefresh": false
             }
           }
         ]
       }
     ]
   

   可在详情查看分包数据：
   

6-4：文章搜索 - 完成跳转，渲染搜索框

页面跳转

渲染搜索框

6-5：文章搜索 - 为 my-search 组件赋予搜索的能力

my-search

search-blog.vue

因为 uni-search-bar 组件没有提供 文本居左的属性，所以想要让文本居左显示，需要修改 uni-search-bar 的源代码：

.uni-searchbar__box {
  // 处理初始 searchbar 位置
  justify-content: start;
}

6-6：文章搜索 - 显示推荐搜索

api/search.js

import request from '../utils/request';

/**
 * 默认搜索内容
 */
export function getDefaultText() {
  return request({
    url: '/search/default-text'
  });
}

search-blog.vue

  created() {
    this.loadDefaultText();
  },
  methods: {
    /**
     * 获取推荐搜索文本
     */
    async loadDefaultText() {
      const { data: res } = await getDefaultText();
      this.defaultText = res.defaultText;
    }
   }

6-7：文章搜索 - 创建三个业务组件

search-blog.vue

    
    <view class="search-hot-list-box">
      
      <search-hot-list />
    view>
    
    <view class="search-history-box">
      <search-history />
    view>
    
    <view class="search-result-box">
      <search-result-list />
    view>

6-8：文章搜索 - 控制业务组件的展示效果

6-9：热搜列表 - 数据获取

api/search.js

/**
 * 热搜搜索列表
 */
export function getSearchHotList() {
  return request({
    url: '/search/hot-list'
  });
} 	

search-hot-list.vue

6-10：热搜列表 - 数据展示

search-blog.vue

    <view class="search-hot-list-box card" v-if="showType === HOT_LIST">
      
      <search-hot-list />
    view>

styles/global.scss

// 卡片视图
.card {
  border: 1px solid #f9f9f9;
  border-radius: 5px;
  margin: 12px;
  padding: 12px;
  box-shadow: 2px 2px 5px 1px rgba(143, 143, 143, 0.1);
}

search-hot-list.vue

6-11：热搜列表 - 热搜点击处理

search-hot-list.vue

search-blog.vue

...

6-12：搜索历史 - 渲染基本结构

search-history.vue

6-13：搜索历史 - 美化基本样式

search-history.vue

6-14：搜索历史 - 保存历史数据到 searchData

search-history.vue

当 onSearchConfirm 被回调时，将赋值之后的 this.searchVal 保存到 searchData 中。

所以我们需要对代码进行一些修改，把 searchData 从 search-history 中转移到 search-blog 中

search-blog

search-history

6-15：搜索历史 - 处理 searchData 的删除操作

删除分为两种：

1. 删除指定数据
2. 删除全部数据

search-history

search-history

...

6-16：搜索历史 - 找出现在的问题

到目前，我们已经完成了 搜索历史 的展示和删除的功能，但是还有一个 数据持久化 的功能未实现。

未实现的功能我们先不着急，我们先回头看一下我们现在的代码。

在现在的代码中，我们在 search-blog 中通过 searchData 保存了所有的搜索历史数据。

而在真正的搜索历史页面中，反而是通过 props 接收了 父组件传递过来的数据。

把 添加、删除搜索历史的功能，都放到了 search-blog 页面里进行了实现，反而把 删除的激活 操作放到了 search-history 组件中。

这样的一系列操作，我们光描述都要花费上 一分钟 的时间，更不用说让别人去读你的代码了。

如果我们在这样的代码基础之上，再去实现 数据持久化 的功能，那么咱们的代码就会的更加复杂，难以理解了。

所以说，我们现在迫切需要做一件事情，那就是：让 search-blog 和 search-history 解耦，让 searchData 和 组件 解耦 ！

那么这个事情，我们怎么做呢？

这里请允许我先卖一个关子。

欲知后事如何，请见下一章**《全局状态管理》**

6-17：总结

本章节中，我们完成了 部分 的文章搜索功能。

1. 使用 分包 创建了 search-blog 页面
2. 分析页面得到了 三个组件
   1. 热搜列表：search-hot-list
   2. 搜索历史：search-history
   3. 搜索结果：search-result-list
3. 定义了规则，控制了三个组件的展示规律
4. 完成了 热搜列表 的功能
5. 在完成 搜索历史 时，遇到了问题：search-blog 和 search-history、searchData 和 组件 之间 强耦合

想要解决这个问题，那么我们需要用到一个新的东西，叫做 《全局状态管理工具》，那么这个东西怎么用呢？他有什么样的价值呢？

我们下一章再见！