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

一、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 v
  	left join users u on u.id = v.user_id
  	where 
  		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 = 1
  	order 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)
   @Override
   public 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;
   }

四、结果