搜索插件实现热搜词，历史查询功能

本文主要是介绍搜索插件实现热搜词，历史查询功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、wxSearchView插件介绍：

wxSearchView为一个改良后的微信搜索插件，即装即用。
下载链接：https://download.csdn.net/download/Tom870223050/16797921

使用步骤：

1. 把文件包解压放在微信目录下，导入到设定的搜索页面中。
   导入语句如下：

@import "../../wxSearchView/wxSearchView.wxss";//导入wxss文件
var WxSearch = require('../../wxSearchView/wxSearchView.js');// 导入js文件
<include src="../../wxSearchView/wxSearchView.wxml" />//导入到wxml文件中

2. 自定义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;}

四、结果

这篇关于搜索插件实现热搜词，历史查询功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---