本文主要是介绍搜索插件实现热搜词，历史查询功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、wxSearchView插件介绍：
wxSearchView为一个改良后的微信搜索插件，即装即用。
下载链接：https://download.csdn.net/download/Tom870223050/16797921
使用步骤：
- 把文件包解压放在微信目录下，导入到设定的搜索页面中。
导入语句如下：
@import "../../wxSearchView/wxSearchView.wxss";//导入wxss文件
var WxSearch = require('../../wxSearchView/wxSearchView.js');// 导入js文件
<include src="../../wxSearchView/wxSearchView.wxml" />//导入到wxml文件中
- 自定义js中主要的函数
var WxSearch = require('../../wxSearchView/wxSearchView.js');Page({data: {},onLoad: function () {// 2 搜索栏初始化var that = this;// 3.查询热搜词WxSearch.init(that, // 本页面一个引用['机器学习', '人工智能', "图像处理", '计算机图形学', '技术美术'], // 热点搜索推荐，[]表示不使用[],// 搜索匹配，[]表示不使用that.mySearchFunction, // 提供一个搜索回调函数that.myGobackFunction //提供一个返回回调函数);},// 3 转发函数，固定部分，直接拷贝即可wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数wxSearchClear: WxSearch.wxSearchClear, // 清空函数// 4 搜索回调函数 mySearchFunction: function (value) {// do your job here// 示例：跳转wx.redirectTo({url: '../index/index?isSaveRecord=1&search=' + value})},// 5 返回回调函数myGobackFunction: function () {// do your job here// 示例：返回wx.redirectTo({url: '../index/index'})}})
结果如图：
二、搜索组件缓存讲解
前期准备：对于用户信息(userInfo)如果使用全局变量，只能保存在app里面，我们关闭进程再打开的话就会丢失，对此我们保存在本地缓存上。其中
setGlobalUserInfo为载入缓存方法，可以在用户登陆等需要将用户信息载入缓存的载入缓存中，getGlobalUserInfo为清理缓存方法，在注销用户信息等方法时用于清理缓存。
//app.js里面添加：setGlobalUserInfo:function(user) {wx.setStorageSync('userInfo', user);},getGlobalUserInfo:function(){return wx.getStorageSync('userInfo');}
1.热搜模块
（1）数据库设计
| id | comment |
|---|---|
| 搜索内容 |
（2）后台接口设计(以搜索视频为例)
- 保存热搜词
video为视频对象，isSaveRecord为是否保存查询内容，如用户只是在搜索栏输入信息而没有搜索则值为0，
//VideoServiceImpl.java
public PagedResult getAllVideos(Videos video,Integer isSaveRecord）{//保存热搜词String desc = video.getVideoDesc();if(isSaveRecord != null && isSaveRecord == 1){SearchRecords record = new SearchRecords();String recordId = sid.nextShort();record.setId(recordId);record.setContent(desc);searchRecordsMapper.insert(record);}
}
//VideosMapperCustom.xml
<select id="queryAllVideos" resultMap="BaseResultMap" parameterType="String">select v.*,u.face_image as face_image,u.nickname as nickname from videos vleft join users u on u.id = v.user_idwhere 1 = 1<if test=" videoDesc != null and videoDesc != '' ">and v.video_desc like '%${videoDesc}%'</if><if test=" userId != null and userId != '' ">and v.user_id = #{userId}</if>and v.status = 1order by v.create_time desc</select>
- 查询显示热搜词
//SearchRecordsMapper.xml
<select id="getHotwords" resultType="String"> select content from search_records group by content order by count(content) desc</select>
//VideoServiceImpl.java
public List<String> getHotwords() {return searchRecordsMapper.getHotWords();}
//searchVideo.js
onLoad: function () {// 搜索栏初始化var that = this;// 查询热搜词var serverUrl = app.serverUrl;wx.request({url: serverUrl + '/video/hot',method: "POST",success: function(res) {console.log(res);var hotList = res.data.data;WxSearch.init(that, // 本页面一个引用hotList,// ['美国', '日本', "印度", "中国", '计算机图形学', '技术美术'], // 热点搜索推荐，[]表示不使用hotList,// 搜索匹配，[]表示不使用that.mySearchFunction, // 提供一个搜索回调函数that.myGobackFunction //提供一个返回回调函数);}
- 显示搜索结果
注意这里运用了分页来显示查询结果，相关类如下
public class PagedResult {
private int page; // 当前页数
private int total; // 总页数
private long records; // 总记录数
private List<?> rows; // 每行显示的内容public int getPage() {return page;
}
public void setPage(int page) {this.page = page;
}
public int getTotal() {return total;
}
public void setTotal(int total) {this.total = total;
}
public long getRecords() {return records;
}
public void setRecords(long records) {this.records = records;
}
public List<?> getRows() {return rows;
}
public void setRows(List<?> rows) {this.rows = rows;
}
}
@Transactional(propagation = Propagation.REQUIRED)@Overridepublic PagedResult getAllVideos(Videos video,Integer isSaveRecord, Integer page, Integer pageSize) {//保存热搜词String desc = video.getVideoDesc();String userId = video.getUserId();if(isSaveRecord != null && isSaveRecord == 1){SearchRecords record = new SearchRecords();String recordId = sid.nextShort();record.setId(recordId);record.setContent(desc);searchRecordsMapper.insert(record);}PageHelper.startPage(page,pageSize);List<VideosVO> list = videosMapperCustom.queryAllVideos(desc,userId);PageInfo<VideosVO> pageList = new PageInfo<>(list);PagedResult pagedResult = new PagedResult();pagedResult.setPage(page);pagedResult.setTotal(pageList.getPages());pagedResult.setRows(list);pagedResult.setRecords(pageList.getTotal());return pagedResult;}
四、结果
这篇关于搜索插件实现热搜词，历史查询功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
