最近公司在做一个内部的管理系统，是基于微信小程序的，我看了一下和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.length5&&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效果图