微信小程序--历史搜索功能的实现

   最近公司在做一个内部的管理系统，是基于微信小程序的，我看了一下和Vue比较类似，布局方面有HTML和CSS基础的人都可以做，还是比较容易上手的，现在先记录一下搜索框保留搜索历史的功能的实现。
##wxml部分
   直接看代码

<view class="nav_search">
    <view class="input_panel">
      <icon class="icon-search"></icon>
      <ns-input focus='{{autoFocus}}' bindinput="inputText" bindblur="hideHistory" bind:focus="showHistory" placeholder="请输入产品名称/产品ID/资源ID" ></ns-input>
    </view>
    <navigator class="search" bindtap="doSearch" open-type="navigateBack" hover-class='none'>搜索</navigator>
    <navigator class="cancle" open-type="navigateBack" hover-class='none'>取消</navigator>
  </view>

说明一下ns-input是我们自己封装并且引入的一个组件，能实现某些特定的效果，各位可以用input代替。
##json文件中引入组件方式

{
  "component": true,
  "usingComponents": {
    "组件1": "组件1路径",
    "组件2": "组件2路径",
    "组件3": "组件3路径"
  }
}

引入之后就可以在wxml中使用自己定制的组件了
##wxss部分

.nav_search{
  width: 100vw;
  padding: 10px 15px;
  height: 56px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}

.nav_search .input_panel {
  display: flex;
  align-items: center;
  flex-grow: 1;
  background: #F5F5F5;
  border-radius: 20px;
  height: 36px;
  padding: 0 10px 0 20px;
  color: #999;
}

.nav_search .input_panel ns-input {
  font-size: 13px;
  padding-left: 10px;
  flex-grow: 1;
  color: #333;
}

.nav_search .search{
  font-size: 14px;
  color:skyblue;
  padding-left: 15px;
}


.nav_search .cancle{
  font-size: 14px;
  color: #333333;
  padding-left: 15px;
}
.nav_search .cancle:active{
  opacity: 0.7
}

#####效果图

##js部分
首先要把用到的数据写在data中

data: {
/*
   inputValue  保存用户在输入框中输入的文字
   historyList数组  用来储存每次的搜索
*/
    inputValue:"",
    historyList:[],
  },

在wxml的ns-input输入框中我们绑定了inputText方法，用来实现获取用户输入的值。

  // 读取输入值
  inputText:function(e){
    this.setData({
      inputValue :e.detail.value
    })
  },
//把用户输入的值保存在inputValue中

搜索按钮绑定了doSearch方法，点击了之后就把用户的输入存入historyList数组中,此处还实现了只保留5条历史数据且当用户没有输入时不保存的效果

doSearch:function(e){
    var inputValue = this.data.inputValue;
    var historyList = this.data.historyList || [];
    if(historyList.length<5&&inputValue!==""){
      historyList.unshift(inputValue);
    }else if(historyList.length>=5&&inputValue!==""){
      historyList.unshift(inputValue);
      historyList.pop();
    };
    wx.setStorageSync('historyList', historyList);
  },

wx.setStorageSync是wx:setStorage的同步版本，用于永久保存数据，除非用户删除，详见微信开发文档。

这样我们就永远把搜索历史保存下来了。可是怎么取出来呢？
接着往下看

接下来我们需要做一个搜索历史框用来显示储存的搜索历史数据

##显示搜索历史wxml部分和wxss部分

<view class="search_history_lists" wx:if="{{showHistory}}">
      <view class='title'>
      历史搜索
      </view>
      <view wx:for="{{historyList}}" wx:key="item">
        <view class="searchRecord">{{item}}</view>
      </view>
      <navigator wx:if="{{historyList.length!==0}}" class="clearHistory" bindtap="clearHistory" open-type="navigateBack" hover-class='none'>清除搜索历史</navigator>
  </view>

.search_history_lists{
  position: fixed;
  left: 0;
  top: 56px;
  width: 100%;
  background-color:#fff;
  padding: 0 15px;
  box-sizing: border-box;
  z-index: 2;
  display: flex;
  flex-direction: column;

}

.search_history_lists .title{
  height: 14px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
  font-weight: bolder;
  color: #333333;
}

.search_history_lists .searchRecord{

  margin-top:22px; 
  font-size: 14px;
  color: #666666;
  line-height: 14px;
  background: #FFFFFF;
}

.search_history_lists .clearHistory{
  margin-top: 20px;
  color: red;
  font-size: 14px;
  line-height: 14px;
}

####效果图

我们打算用wx:if来判断showHistory的状态，为false时隐藏历史搜索框，为true时显示搜索历史框。绑定的数据都必须在data中声明，showHistory的初始值为false。

data: {
    inputValue:"",
    historyList:[],
    showHistory:false,
  },

我们在之前的用户输入框绑定了bindblur="hideHistory" bind:focus="showHistory"这两个方法，用这两个方法来切换showHistory的状态，当输入框获得焦点时显示历史搜索框即切换成true，失去焦点时隐藏历史搜索框切换成false

// 隐藏搜索历史框
hideHistory:function(){
    this.setData({
      showHistory: !this.data.showHistory
    });
  },

// 显示搜索历史框
  showHistory:function(){
    this.setData({
      showHistory: !this.data.showHistory,
      searchRecord: wx.getStorageSync('searchRecord') || []
    })
  },

在显示历史搜索框的同时显示历史数据是最好的，所以我们把读取缓存数据的方法写在了showHistory方法里，wx:getStorageSync用来读取缓存的数据（与wx:setStorageSync相对应），我们存的时候用的searchRecord这个名字，读的时候也要用这个读。
我们用wx:for来遍历数组，实现把数据一条条的显示出来。
通过wx:if="{{historyList.length!==0}}"来判断数组里有没有数据，如果没有的话就不显示红色的“清除搜索历史”。

###清除搜索历史的方法
清空缓存和数组就完事了,wx.clearStorageSync方法用于清空缓存的数据。

clearHistory:function(){
      wx.removeStorageSync('searhRecord')
      this.setData({
        searchRecord: []
      })
  },

###GIF效果图