不管開發什么小程序，如果信息量達到一定數額時，對具體一條或一類的信息查找需求就會變得越來越難。因此會對搜索進行一定的需求，例如精準或模糊搜索功能。本文將介紹微信小程序開發中搜索功能的實現步驟，以及搜索頁面的一些復用。

　　對于搜索都是會有一些需要的，所以搜索頁面還是可以復用的。因為只是寫個搜索頁面，所以主頁面就沒有好好切，見諒。。。主頁面就是下面這樣：

　　這個頁面在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(){

　　let data;

　　let localStorageValue = [];

　　if(this.data.inputValue != \'\'){

　　//調用API從本地緩存中獲取數據

　　var searchData = 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都刪掉，慎用!這樣，搜索的功能就做好了!