5. 搜索

搜索功能是需要复用的！所以我们把它单独拿出来当做一个组件！

5.0 创建 search 分支

运行如下的命令，基于 master 分支在本地创建 search 子分支，用来开发搜索相关的功能：

bash

git branch
git checkout -b search

5.1 自定义搜索组件

功能：搜索历史记录，搜索建议

注：uniapp 和原生小程序使用组件有什么不同？

1.uniapp 中创建组件之后，在使用组件时不需要任何定义，只需要引入组件名即可！——>这点非常方便，甚至比 vue 还方便，但是组件必须创建在指定的目录下面！

2.原生小程序需要在 js 中定义 Component 节点等操作

5.1.1 自定义 my-search 组件

在项目根目录的 components 目录（新版可能是 uni_modules 目录）上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：
勾选：创建同名目录：就是把组件放到一个单独的目录中
在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件：
cate.vue：
xml
```

<my-search></my-search>
```
定义 my-search 组件的 UI 结构如下：
uni-icons：属于 uniapp 提供的扩展组件（uin ui）
注：新版本的 uni-ui 组件在 uni_modules 目录下面：之前的是在 components 目录下面
修改 type=“”下面的名字即可
xml
```
<template>
  <view class="my-search-container">
    
    <view class="my-search-box">
      
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>
```
注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框

美化自定义 search 组件的样式：

scss

.my-search-container {
  background-color: #c00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

由于自定义的 my-search 组件高度为 50px，因此，需要重新计算分类页面窗口的可用高度：

onLoad() {
  const sysInfo = uni.getSystemInfoSync()
  // 屏幕高度 - navigationBar高度 - tabBar高度 是默认的，如果再减就要自己加了
  // 可用高度 = （屏幕高度 - navigationBar高度 - tabBar高度） - 自定义的search组件高度
  this.wh = sysInfo.windowHeight - 50
}

5.1.2 通过 props 自定义属性增强组件的通用性

为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸。

通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值：

props: {
  // 背景颜色
  bgcolor: {
    type: String,
    default: '#C00000'
  },
  // 圆角尺寸
  radius: {
    type: Number,
    // 单位是 px
    default: 18
  }
}

通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性：

xml

<!--这里把background-color写在html的style属性里面（注：vue3.2可以把js写在css里面）-->
<view class="my-search-container" :style="{'background-color': bgcolor}">
  <view class="my-search-box" :style="{'border-radius': radius + 'px'}">
    <uni-icons type="search" size="17"></uni-icons>
    <text class="placeholder">搜索</text>
  </view>
</view>

移除对应 scss 样式中的 背景颜色 和 圆角尺寸：

scss

.my-search-container {
  // 移除背景颜色，改由 props 属性控制
  // background-color: #C00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  // 移除圆角尺寸，改由 props 属性控制
  // border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

5.1.3 为自定义组件封装 click 自定义事件

封装 click 事件的实际意义：

就是把业务逻辑抛给外面，组件里面是不写业务逻辑的，只是提供了相关的自定义事件，外界绑定这个自定

义事件并且进行业务逻辑的书写，这样的好处就是便于组件的复用！

在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数：

点击上面整个的大长条都会跳转到搜索页面！

xml

<!--view标签可以绑定click事件（这个事件决定了组件上面绑定的event的真实类型是什么，因为在触发这个事件的时候 在函数中顺便触发一下外部的那个自定义事件，就营造出了确实是在组件上触发了点击事件的效果），因为这个已经封装好click事件了-->
<view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler">
  <uni-icons type="search" size="17"></uni-icons>
  <text class="placeholder">搜索</text>
</view>

在 my-search 自定义组件的 methods 节点中，声明事件处理函数如下：

methods: {
  // 点击了模拟的 input 输入框
  searchBoxHandler() {
    // 为组件封装click事件，这样外界才可以为该组件绑定click事件：触发外界通过 @click 绑定的 click 事件处理函数（这里用的名字是myclick，因为是自定义事件）
    this.$emit('myclick') //$emit(event, props)，要在组件里面进行自定义事件的触发，否则外面监听不到事件的触发！但是$emit多用于子给父传值，这里只是用来触发事件了
  }
}

在分类页面中使用 my-search 自定义组件时，即可通过 @click 为其绑定点击事件处理函数：

xml

<!-- 使用自定义的搜索组件：@click事件由组件里面触发 -->
<my-search @myclick="gotoSearch"></my-search>

同时在分类页面 cate.vue 中，定义 gotoSearch 的事件处理函数如下：

methods: {
   // 跳转到分包中的搜索页面
   gotoSearch() {
     uni.navigateTo({ //跳转到非tabBar页面：搜索页面
       url: '/subpkg/search/search'
     })
   }
}

5.1.4 实现首页搜索组件的吸顶效果

吸顶效果：

就是页面在向下滑动的时候，组件一直位于顶部，不会消失

在 home 首页定义如下的 UI 结构：

xml

<!-- 使用自定义的搜索组件：外面必须包裹一个view标签 -->
<view class="search-box">
  <my-search @click="gotoSearch"></my-search>
</view>

在 home 首页定义如下的事件处理函数：

gotoSearch() {
  uni.navigateTo({
    url: '/subpkg/search/search'
  })
}

通过如下的样式实现吸顶的效果：

scss

.search-box {
  // 设置定位效果为“吸顶” ——> 主要通过这个来实现的
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}

5.2 搜索页面：搜索建议

5.2.1 渲染搜索页面的基本结构

search.vue：

定义如下的 UI 结构：

xml

<view class="search-box">
  <!-- 使用 uni-ui 提供的搜索组件 uni-search-bar -->
  <!--@input是输入事件，:radius搜索框圆角，cancelButton是右边的取消按钮-->
  <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>

效果如下：

修改 uni_modules -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为 #C00000 的红色背景：直接去源代码 uni-search-bar.vue 里面修改即可！

css

.uni-searchbar {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  position: relative;
  padding: 16rpx;
  /* 将默认的 #FFFFFF 改为 #C00000 */
  background-color: #c00000;
}

实现搜索框的吸顶效果：

search.vue

scss

.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}

定义如下的 input 输入事件处理函数：

methods: {
  input(e) {
    // e.valueOf() 是最新的用户输入的搜索内容
    console.log(e.valueOf())
  }
}

5.2.2 实现搜索框跳转之后自动获取焦点

修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可：直接去源代码 uni-search-bar.vue 里面修改即可！
js
```
data() {
  return {
    show: true,
    showSync: true,
    searchVal: ""
  }
}
```
使用手机扫码预览，即可在真机上查看效果。

5.2.3 实现搜索框的防抖处理

防抖的意思：

抖，就是指我们每输入一个字的时候，都会触发事件，都会触发请求，这样下面的搜索建议就会不停变化、抖动起来。

防抖，每隔一定时间，如果用户没有输入数据（没有触发新的输入事件），再进行请求数据。

在 data 中定义防抖的延时器 timerId 如下：

data() {
  return {
    // 延时器的 timerId
    timer: null,
    // 搜索关键词 kw
    kw: ''
  }
}

修改 input 事件处理函数如下：

input(e) {
  // 如果 500 毫秒内，触发了新的输入事件，清除 timer 对应的延时器（清除了timerId就是清楚了延时器，因为timerId指向的就是延时器）
  clearTimeout(this.timer)
  // 重新启动一个延时器setTimeout()，并把返回值 timerId 赋值给 this.timer
  this.timer = setTimeout(() => {
    // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
    this.kw = e.value
    console.log(this.kw)
  }, 500)
}

5.2.4 根据关键词查询搜索建议列表

在 data 中定义如下的数据节点，用来存放搜索建议的列表数据：

data() {
  return {
    // 搜索结果列表
    searchResults: []
  }
}

在防抖的 setTimeout 中，调用 getSearchList 方法获取搜索建议列表：

//注：定时器里面的回调函数必须是箭头函数
this.timer = setTimeout(() => {
  this.kw = e.value; //给关键词变量kw赋值，或者直接this.kw = e，或者this.kw = e.valueOf()
  // 根据关键词，查询搜索建议列表：这个必须要写在延时器里面（因为延时器是异步的，请求也是异步的）
  this.getSearchList();
}, 500);

在 methods 中定义 getSearchList 方法如下：

// 根据搜索关键词，搜索商品建议列表
async getSearchList() {
  // 判断关键词是否为空
  if (this.kw === '') {
    this.searchResults = [] //搜索结果为空
    return
  }
  // 发起请求，获取搜索建议列表
  // get方法的两个参数：路径，对象
  //其中对象就是要拼接的参数，拼接后的格式为 ?属性1=值1&属性2=值2
  // '/api/public/v1/goods/qsearch', { query: this.kw } 相当于 '/api/public/v1/goods/qsearch?query=this.kw'
  const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw })
  if (res.meta.status !== 200) return uni.$showMsg()
  this.searchResults = res.message //给搜索结果赋值
}

5.2.5 渲染搜索建议列表

定义如下的 UI 结构：

xml

<!-- 搜索建议列表 -->
<view class="sugg-list">
  <view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)">
    <view class="goods-name">{{item.goods_name}}</view>
    <uni-icons type="arrowright" size="16"></uni-icons>
  </view>
</view>

美化搜索建议列表：

scss

.sugg-list {
  padding: 0 5px; //左右5像素

  .sugg-item {
    font-size: 12px;
    padding: 13px 0; //上下13像素
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center; //纵向居中
    justify-content: space-between; //横向是两边贴边对齐

    .goods-name {
      // 文字不允许换行（单行文本）
      white-space: nowrap;
      // 溢出部分隐藏
      overflow: hidden;
      // 文本溢出后，使用 ... 代替！
      text-overflow: ellipsis;

      margin-right: 3px;
    }
  }
}

点击搜索建议的 Item 项，跳转到商品详情页面：

gotoDetail(goods_id) {
  uni.navigateTo({
    // 指定详情页面的 URL 地址，并传递 goods_id 参数
    url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
  })
}

5.3 搜索页面：搜索历史

5.3.1 渲染搜索历史记录的基本结构

在 data 中定义搜索历史的假数据：

data() {
  return {
    // 搜索关键词的历史记录
    historyList: ['a', 'app', 'apple']
  }
}

渲染搜索历史区域的 UI 结构：

xml

<!-- 搜索历史 -->
<view class="history-box">
  <!-- 标题区域 -->
  <view class="history-title">
    <text>搜索历史</text>、
    <!--垃圾桶图标-->
    <uni-icons type="trash" size="17"></uni-icons>
  </view>
  <!-- 列表区域 -->
  <view class="history-list">
    <!--使用uni-tag组件：text属性就是展示的内容-->
    <uni-tag :text="item" v-for="(item, i) in historyList" :key="i"></uni-tag>
  </view>
</view>

美化搜索历史区域的样式：

scss

.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}

5.3.2 实现搜索建议和搜索历史的按需展示

当搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域
当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域

使用 v-if 和 v-else 控制这两个区域的显示和隐藏，示例代码如下：

xml

<!-- 搜索建议列表 -->
<view class="sugg-list" v-if="searchResults.length !== 0">
  <!-- 省略其它代码... -->
</view>

<!-- 搜索历史 -->
<view class="history-box" v-else>
  <!-- 省略其它代码... -->
</view>

5.3.3 将搜索关键词存入 historyList

直接将搜索关键词 push 到 historyList 数组中即可

methods: {
  // 根据搜索关键词，搜索商品建议列表
  async getSearchList() {
    // 省略其它不必要的代码...

    // 1. 查询到搜索建议之后，调用 saveSearchHistory() 方法保存搜索关键词
    this.saveSearchHistory()
  },
  // 2. 保存搜索关键词的方法
  saveSearchHistory() {
    // 2.1 直接把搜索关键词 push 到 historyList 数组中
    this.historyList.push(this.kw)
  }
}

上述实现思路存在的问题：
- 关键词前后顺序的问题（可以调用数组的 reverse() 方法对数组进行反转）：因为后搜索的是新的，应该在上面，但是这样是在后面的！
- 关键词重复的问题（可以使用 Set 对象进行去重操作）

5.3.4 计算属性解决关键字前后顺序的问题

data 中的 historyList 不做任何修改，依然使用 push 进行末尾追加

定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值：

computed: {
  historys() {
    // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
    // 而是应该新建一个内存无关的数组 [...this.historyList]，再进行 reverse 反转
    return [...this.historyList].reverse()
  }
}

页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys：
xml
```
<view class="history-list">
  <uni-tag :text="item" v-for="(item, i) in historys" :key="i"></uni-tag>
</view>
```

5.3.5 Set 集合解决关键词重复的问题

修改 saveSearchHistory 方法如下：

// 保存搜索关键词为历史记录
saveSearchHistory() {
  // this.historyList.push(this.kw)

  // 1. 将 Array 数组转化为 Set 对象，new Set()时会进行去重
  const set = new Set(this.historyList)
  // 2. 调用 Set 对象的 delete 方法，移除对应的元素（如果本来就有这个kw了，就删除，保证重新搜索时，这个kw排在前面，确保顺序正确）
  set.delete(this.kw)
  // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素（如果已经有这个kw，就不会添加了）
  set.add(this.kw)
  // 4. 将 Set 对象转化为 Array 数组
  this.historyList = Array.from(set)
}

5.3.6 将搜索历史记录持久化存储到本地

修改 saveSearchHistory 方法如下：

// 保存搜索关键词为历史记录
saveSearchHistory() {
  const set = new Set(this.historyList)
  set.delete(this.kw)
  set.add(this.kw)
  this.historyList = Array.from(set)
  // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地Storage
  uni.setStorageSync('kw', JSON.stringify(this.historyList)) //将某个对象（也可以是数组对象，或者自定义对象）转换成 JSON 字符串形式
}

在 onLoad 生命周期函数中，加载本地存储的搜索历史记录：

onLoad() {
  this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]') //如果有值就加载，如果没有就是空数组，JSON.parse()解析json字符串为数组对象，即[xxx, xxx]
}

5.3.7 清空搜索历史记录

为清空的图标按钮绑定 click 事件：

xml

<uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>

在 methods 中定义 cleanHistory 处理函数：

// 清空搜索历史记录
cleanHistory() {
  // 清空 data 中保存的搜索历史
  this.historyList = []
  // 清空本地存储中记录的搜索历史
  uni.setStorageSync('kw', '[]')
}

5.3.8 点击搜索历史跳转到商品列表页面

为搜索历史的 Item 项绑定 click 事件处理函数：

xml

<uni-tag :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)"></uni-tag>

在 methods 中定义 gotoGoodsList 处理函数：

// 点击跳转到商品列表页面
gotoGoodsList(kw) {
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?query=' + kw
  })
}

5.4 分支的合并与提交

将 search 分支进行本地提交：

bash

git add .
git commit -m "完成了搜索功能的开发"

将本地的 search 分支推送到码云：
bash
```
git push -u origin search
```
将本地 search 分支中的代码合并到 master 分支：
bash
```
git checkout master
git merge search
git push
```
删除本地的 search 分支：
bash
```
git branch -d search
```

5. 搜索 ​

5.0 创建 search 分支 ​

5.1 自定义搜索组件 ​

5.1.1 自定义 my-search 组件 ​

5.1.2 通过 props 自定义属性增强组件的通用性 ​

5.1.3 为自定义组件封装 click 自定义事件 ​

5.1.4 实现首页搜索组件的吸顶效果 ​

5.2 搜索页面：搜索建议 ​

5.2.1 渲染搜索页面的基本结构 ​

5.2.2 实现搜索框跳转之后自动获取焦点 ​

5.2.3 实现搜索框的防抖处理 ​

5.2.4 根据关键词查询搜索建议列表 ​

5.2.5 渲染搜索建议列表 ​

5.3 搜索页面：搜索历史 ​

5.3.1 渲染搜索历史记录的基本结构 ​

5.3.2 实现搜索建议和搜索历史的按需展示 ​

5.3.3 将搜索关键词存入 historyList ​

5.3.4 计算属性解决关键字前后顺序的问题 ​

5.3.5 Set 集合解决关键词重复的问题 ​

5.3.6 将搜索历史记录持久化存储到本地 ​

5.3.7 清空搜索历史记录 ​

5.3.8 点击搜索历史跳转到商品列表页面 ​

5.4 分支的合并与提交 ​

5. 搜索

5.0 创建 search 分支

5.1 自定义搜索组件

5.1.1 自定义 my-search 组件

5.1.2 通过 props 自定义属性增强组件的通用性

5.1.3 为自定义组件封装 click 自定义事件

5.1.4 实现首页搜索组件的吸顶效果

5.2 搜索页面：搜索建议

5.2.1 渲染搜索页面的基本结构

5.2.2 实现搜索框跳转之后自动获取焦点

5.2.3 实现搜索框的防抖处理

5.2.4 根据关键词查询搜索建议列表

5.2.5 渲染搜索建议列表

5.3 搜索页面：搜索历史

5.3.1 渲染搜索历史记录的基本结构

5.3.2 实现搜索建议和搜索历史的按需展示

5.3.3 将搜索关键词存入 historyList

5.3.4 计算属性解决关键字前后顺序的问题

5.3.5 Set 集合解决关键词重复的问题

5.3.6 将搜索历史记录持久化存储到本地

5.3.7 清空搜索历史记录

5.3.8 点击搜索历史跳转到商品列表页面

5.4 分支的合并与提交