---

前言

基于 uni-app 开发的微信小程序商城项目

• 备用接口地址：https://api-hmugo-web.itheima.net
• 搜索页面

---

五、搜索

1、创建 search 分支

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

git checkout -b search

2、自定义搜索组件

（1）自定义 my-search 组件

1. 在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：
   

2. 在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件：

<!-- 使用自定义的搜索组件 -->
<my-search></my-search>

1. 定义 my-search 组件的 UI 结构如下：

<template><view class="my-search-container"><!-- 使用 view 组件模拟 input 输入框的样式 --><view class="my-search-box"><uni-icons type="search" size="17"></uni-icons><text class="placeholder">搜索</text></view></view>
</template>

注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框

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

.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;}
}

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

onLoad() {const sysInfo = uni.getSystemInfoSync()// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度this.wh = sysInfo.windowHeight - 50
}

（2） 通过自定义属性增强组件的通用性

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

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

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

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

<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>

1. 移除对应 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;}
}

（3）为自定义组件封装 click 事件

1. 在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 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>

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

methods: {// 点击了模拟的 input 输入框searchBoxHandler() {// 触发外界通过 @click 绑定的 click 事件处理函数this.$emit('click')}
}

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

<!-- 使用自定义的搜索组件 -->
<my-search @click="gotoSearch"></my-search>

同时在subpkg中新建search页面，在分类页面中，定义 gotoSearch 事件处理函数如下：

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

（4）实现首页搜索组件的吸顶效果

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

<!-- 使用自定义的搜索组件 -->
<view class="search-box"><my-search @click="gotoSearch"></my-search>
</view>

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

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

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

.search-box {// 设置定位效果为“吸顶”position: sticky;// 吸顶的“位置”top: 0;// 提高层级，防止被轮播图覆盖z-index: 999;
}

3、搜索建议

（1）渲染搜索页面的基本结构

1. search页面定义如下的 UI 结构

<view class="search-box"><!-- 使用 uni-ui 提供的搜索组件 --><uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
</view>

1. 修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为 #C00000 的红色背景：

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

1. 实现搜索框的吸顶效果：

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

1. 定义如下的 input 事件处理函数：

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

（2）实现搜索框自动获取焦点

1. 修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可：

data() {return {show: true,showSync: true,searchVal: ""}
}

1. 使用手机扫码预览，即可在真机上查看效果

（3）实现搜索框的防抖处理

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

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

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

input(e) {// 清除 timer 对应的延时器clearTimeout(this.timer)// 重新启动一个延时器，并把 timerId 赋值给 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值this.kw = econsole.log(this.kw)}, 500)
}

（4）根据关键词查询搜索建议列表

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

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

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

this.timer = setTimeout(() => {this.kw = e.value// 根据关键词，查询搜索建议列表this.getSearchList()
}, 500)

1. 在 methods 中定义 getSearchList 方法如下：

// 根据搜索关键词，搜索商品建议列表
async getSearchList() {// 判断关键词是否为空if (this.kw === '') {this.searchResults = []return}// 发起请求，获取搜索建议列表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）渲染搜索建议列表

1. 定义如下的 UI 结构：

<!-- 搜索建议列表 -->
<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>

1. 美化搜索建议列表：

.sugg-list {padding: 0 5px;.sugg-item {font-size: 12px;padding: 13px 0;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;}}
}

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

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

4、搜索历史

（1）渲染搜索历史记录的基本结构

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

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

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

<!-- 搜索历史 -->
<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="item" v-for="(item, i) in historyList" :key="i"></uni-tag></view>
</view>

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

.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;}}
}

（2）实现搜索建议和搜索历史的按需展示

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

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

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

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

（3）将搜索关键词存入 historyList

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

methods: {// 根据搜索关键词，搜索商品建议列表async getSearchList() {// 省略其它不必要的代码...// 1. 查询到搜索建议之后，调用 saveSearchHistory() 方法保存搜索关键词this.saveSearchHistory()},// 2. 保存搜索关键词的方法saveSearchHistory() {// 2.1 直接把搜索关键词 push 到 historyList 数组中this.historyList.push(this.kw)}
}

1. 上述实现思路存在的问题：

• 关键词前后顺序的问题（可以调用数组的 reverse() 方法对数组进行反转）
• 关键词重复的问题（可以使用 Set 对象进行去重操作

（4）解决关键字前后顺序的问题

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

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

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

1. 页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys：

<view class="history-list"><uni-tag :text="item" v-for="(item, i) in historys" :key="i"></uni-tag>
</view>

（5）解决关键词重复的问题

1. 修改 saveSearchHistory 方法如下：

// 保存搜索关键词为历史记录
saveSearchHistory() {// this.historyList.push(this.kw)// 1. 将 Array 数组转化为 Set 对象const set = new Set(this.historyList)// 2. 调用 Set 对象的 delete 方法，移除对应的元素set.delete(this.kw)// 3. 调用 Set 对象的 add 方法，向 Set 中添加元素set.add(this.kw)// 4. 将 Set 对象转化为 Array 数组this.historyList = Array.from(set)
}

（6）将搜索历史记录持久化存储到本地

1. 修改 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) 将搜索历史记录持久化存储到本地uni.setStorageSync('kw', JSON.stringify(this.historyList))
}

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

onLoad() {this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
}

（7）清空搜索历史记录

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

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

1. 在 methods 中定义 cleanHistory 处理函数：

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

（8）点击搜索历史跳转到商品列表页面

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

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

1. 在 methods 中定义 gotoGoodsList 处理函数：

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

5、分支的合并与提交

1. 将 search 分支进行本地提交：

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

1. 将本地的 search 分支推送到码云：

git push -u origin search

1. 将本地 search 分支中的代码合并到 master 分支：

git checkout master
git merge search
git push

1. 删除本地的 search 分支：

git branch -d search

微信小程序--优购商城项目（4）相关推荐

1. 微信小程序优购商城项目

   这篇文章主要就是把我写的优购商城进行简单的说明,希望可以对大家有所帮助 1.先配置页面 在app.json中设置所需要的页面路径 2.然后再封装我们需要的组件和wx.request wx.reques ...

2. 微信小程序--优购商城项目（1）

   文章目录 前言 一.配置uni-app开发环境 1.开发工具--HBuilderX 2.新建uni-app项目 3.把项目运行到微信开发者工具 4.使用Git管理 二.tarBar 1.创建 tabB ...

3. 微信小程序--优购商城项目（6）

   文章目录 前言 七.商品详情 1.创建 goodsdetail 分支并添加编译模式 2.获取商品详情数据 3.渲染商品详情页的 UI 结构 (1)渲染轮播图区域 (2)实现轮播图预览效果 (3) 渲染 ...

4. 微信小程序--优购商城项目（8）

   文章目录 前言 九.购物车页面 1.商品列表区域 (1)渲染购物车商品列表的标题区域 (2)渲染商品列表区域的基本结构 (3) 为 my-goods 组件封装 radio 勾选状态 (4)为 my-g ...

5. 小程序优购商城项目讲解

   1.新建⼩程序项⽬ 填入自己的appid 搭建⽬录结构 styles 存放公共样式 components 存放组件 lib 存放第三⽅库 utils ⾃⼰的帮助库 request ⾃⼰的接⼝帮助库 2 ...

6. 微信小程序优购商城项目分析

   商城项目分析 首页页面布局,最上面是搜索框,搜索框下边是个轮播图,轮播图下面这个分类这一栏,再往下就是介绍,轮播图.分类.和下边的图片都是通过接口实现的.点击分类.秒杀拍.超市购.母婴品可以进入分类页 ...

7. 【愚公系列】2022年11月 微信小程序-优购电商项目-授权页面

   文章目录 前言 1. 授权页面 一.授权页面 1.业务逻辑 2.涉及的接口数据 二.授权页面相关代码 1.页面代码 2.效果 前言 前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...

8. 微信小程序--优购页面制作

   优购–项目 这个项目学习源自:黑马程序员微信小程序开发前端教程_零基础玩转微信小程序-哔哩哔哩 想要更深入的了解此项目,就去黑马程序员学习该项目.该项目个人觉得对于初学者来说是有很大的帮助的.做好该项 ...

9. 【愚公系列】2022年11月 微信小程序-优购电商项目-商品详情页面

   文章目录 前言 一.商品详情⻚⾯ 1.业务逻辑 2.涉及的接口数据 3. 关键技术 二.商品详情⻚⾯相关代码 1.页面代码 2.效果 前言 商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流 ...

最新文章

1. Load average in Linux的精确含义
2. 百度地图开发的时候遇到的问题（二）
3. 专有网络、云产品、路由器和交换机
4. mysql 主从复制原理【转】
5. 从云效1.0到2.0的升级，看技术如何驱动企业提效
6. excel线性拟合的斜率_如何利用EXCEL求直线斜率？
7. 苹果手机长截屏_iPhone终于自带长截屏了？苹果手机这些截图方式，你用过几种？...
8. Linux面试题附答案
9. ADNI静息态功能核磁共振成像数据预处理总流程
10. centos7磁盘分区格式化
11. uniapp app端自定义启动页与广告页
12. 迅雷领航 WPF/E？---电影预览功能
13. 如何免费破解安装正版Adobe Photoshop CC2017
14. safari浏览器找不到服务器怎么办,IOS系统中Safari图标不见了怎么办 safari浏览器不见了找回方法图解...
15. python假设检验--两个总体参数的检验（方差）
16. Cisco Packet Trancer中小型校园网/企业网/园区网网络设计规划/无线网络
17. linux是实时系统还是分时操作系统
18. WEB开发技能树-JavaScript-DOM
19. 前端husky中commitlint配置
20. 贴片红外LED灯珠封装失效怎么应对

热门文章

1. Erlang 下载安装
2. 电脑故障排除方法(风扇转一下,马上就停,主板没有其它任何响应)
3. 全球与中国矿物加工工程市场深度研究分析报告
4. 云函数.批量操作数据库
5. PLC通过智能网关 MQTT对接阿里云(带CA证书加密)，实现物模型数据显示
6. 鸿蒙系统和安卓有哪些区别？鸿蒙会取代安卓吗？
7. 中国无尘室饮水机市场趋势报告、技术动态创新及市场预测
8. android 高德地图定位圈,android ------ 实现高德定位并获取相应信息 ( 最新版高德SDK 和 Android SDK版本)...
9. 计算机怎样格式u盘,win10系统电脑怎么操作把u盘格式化为fat32格式？
10. Word文档中多个编号放同一行的方法(非技术)