viewviewicon/iconns-inputfocus='{{autoFocus}}'bindinput="inputText"bindblur="hideHistory"bind:focus="showHistory"placeholder="请输入产品名称/产品ID/资源ID"/ns-input/viewnavigatorbindtap="doSearch"open-type="navigateBack"hover-class='none'搜索/navigatornavigatoropen-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:10px15px;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:010px020px;color:#999;}.nav_search.input_panelns-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){varinputValue=this.data.inputValue;varhistoryList=this.data.historyList||[];if(historyList.length5&&inputValue!==""){historyList.unshift(inputValue);}elseif(historyList.length=5&&inputValue!==""){historyList.unshift(inputValue);historyList.pop();};wx.setStorageSync('historyList',historyList);},wx.setStorageSync是wx:setStorage的同步版本，用于永久保存数据，除非用户删除，详见微信开发文档。
这样我们就永远把搜索历史保存下来了。可是怎么取出来呢？接着往下看接下来我们需要做一个搜索历史框用来显示储存的搜索历史数据
显示搜索历史wxml部分和wxss部分
viewwx:if="{{showHistory}}"viewclass='title'历史搜索/viewviewwx:for="{{historyList}}"wx:key="item"view{{item}}/view/viewnavigatorwx:if="{{historyList.length!==0}}"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:015px;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效果图
