这个页面在pages/components/component2/component2.wxml
点击页面中黄色的input就可以跳转到真正的搜索页面：pages/components/component2/search/search.wxml
搜索页面中也是有个input搜索框，旁边有个小叉号，可以清除input里的文字。
下面主要讲下search页面的逻辑:其实也非常简单。
搜索input绑定bindInput函数，
bindInput:function(e){
this.setData({inputValue:e.detail.value})console.log('bindInput'+this.data.inputValue)},
将输入的值存在inputValue中，搜索button用bindtap绑定setSearchStorage函数
setSearchStorage:function(){letdata;letlocalStorageValue=[];if(this.data.inputValue!=''){//调用API从本地缓存中获取数据varsearchData=wx.getStorageSync('searchData')||[]searchData.push(this.data.inputValue)wx.setStorageSync('searchData',searchData)wx.navigateTo({url:'../result/result'})}else{console.log('空白的你搜个蛋！')}//this.onLoad();},
这个函数主要就是先判断输入的值是否不为空，再通过getStorageSync获取到key为searchData的localStorage，
如果第一次还没有set过这个key就获取[]，再将用户inputValue存的想要搜索的值放进searchData，之后再跳转到result页面。这里我只放了个案例页面。
如果在真正的生产环境中，这个函数可以通过wx.request向服务器发送请求，再把数据放进result页面中，实现真正的搜索功能。
删除inputValue的button功能实现也很简单，setData将inputValue设置为空字符串就可以了。
放点击result页面左上角的返回时，你就可以发现，你刚才搜索的结果已经放到了search的页面中。
当你想要删除缓存数据的时候，可以点击清空浏览记录按钮，会弹出个对话框：
点击确认删除之后，会自动刷新页面（重定向到本页面），将之前的key为searchData的localStorage重置为空数组。
modalChangeConfirm:function(){
wx.setStorageSync('searchData',[])
this.setData({
modalHidden:true
})
wx.redirectTo({
url:'../search/search'
})
},
该资讯来源于，更多开发教程请关注
这里的清除不是应用wx.clearStorage()删除的，以为clearStorage会将所有的localStorage都删掉，慎用！这样，搜索的功能就做好了！
一:搜索框功能实现
1.在首页做一个搜索框的样式并实现跳转到搜索页面
[html]
viewclass='page_row'bindtap="suo"viewclass="search"viewclass="dfsearch_arr"iconclass="searchcion"size='20'type='search'/iconinputclass=""disabledplaceholder="请输入关键字"value="{{searchValue}}"//view/viewviewclass='sousuo'搜索/view/view
[css]
.search{width:80%;}.search_arr{border:1pxsolid#d0d0d0;border-radius:10rpx;margin-left:20rpx;}.search_arrinput{margin-left:60rpx;height:60rpx;border-radius:5px;}.bc_text{line-height:68rpx;height:68rpx;margin-top:34rpx;}.sousuo{margin-left:15rpx;width:15%;line-height:150%;text-align:center;border:1pxsolid#d0d0d0;border-radius:10rpx;}.page_row{display:flex;flex-direction:row}.searchcion{margin:10rpx10rpx10rpx10rpx;position:absolute;left:25rpx;z-index:2;width:20px;height:20px;text-align:center;}js.点击跳转到搜索的页面
[javascript]
suo:function(e){wx.navigateTo({url:'../search/search',})},2.搜索页面实现搜索功能
[html]
!--pages/search/search.wxml--viewclass="searchpage_row"inputclass="df_1"placeholder="请输入你有搜索的内容"value="{{searchValue}}"bindinput="searchValueInput"/buttonbindtap="suo"data-id='1'媒婆/buttonbuttonbindtap="suo"data-id='2'单身/button/viewviewclass="search_no"wx:if="{{!centent_Show}}"text很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~/text/viewimportsrc="../index/card/card.wxml"/templateis="nanshen_card"data="{{nanshen_card,img}}"/
[javascript]
[javascript]
varapp=getApp();varsearchValue=''//pages/search/search.jsPage({data:{centent_Show:true,searchValue:'',img:'',nanshen_card:''},onLoad:function(){},searchValueInput:function(e){varvalue=e.detail.value;this.setData({searchValue:value,});if(!value&&this.data.productData.length==0){this.setData({centent_Show:false,});}},suo:function(e){varid=e.currentTarget.dataset.idvarprogram_id=app.program_id;varthat=this;wx.request({url:'aaa.php',//这里填写后台给你的搜索接口method:'post',data:{str:that.data.searchValue,program_id:program_id,style:id},header:{'content-type':'application/x-www-form-urlencoded'},success:function(res){if(res.data.length==0){that.setData({centent_Show:false,});}that.setData({nanshen_card:res.data,});},fail:function(e){wx.showToast({title:'网络异常！',duration:2000});},});}});
[css]
/pages/search/search.wxss/@import"../index/card/card";.searchcion{width:24px;height:24px;text-align:center;margin-top:5rpx}.search{padding:1%3%;background:#D0D0D0;}.searchinput{width:85%;border-radius:5px;background:#fff;border:none;font-size:12px;padding:1%2.5%;margin-right:5px;}.searchbutton{line-height:30px;text-align:center;border:none;font-size:28rpx;background:white}
