不管開發(fā)什么小程序，如果信息量達到一定數(shù)額時，對具體一條或一類的信息查找需求就會變得越來越難。因此會對搜索進行一定的需求，例如精準或模糊搜索功能。本文將介紹微信小程序開發(fā)中搜索功能的實現(xiàn)步驟，以及搜索頁面的一些復用。
對于搜索都是會有一些需要的，所以搜索頁面還是可以復用的。因為只是寫個搜索頁面，所以主頁面就沒有好好切，見諒。。。主頁面就是下面這樣：
這個頁面在pages/components/component2/component2.wxml
點擊頁面中 黃色的input就可以跳轉(zhuǎn)到真正的搜索頁面：pages/components/component2/search/search.wxml
搜索頁面中也是有個input搜索框，旁邊有個小叉號，可以清除input里的文字。
下面主要講下search頁面的邏輯:其實也非常簡單。
搜索input綁定bindInput函數(shù)，
bindInput:function(e){
this.setData({
inputValue:e.detail.value
})
console.log(\'bindInput\'+this.data.inputValue)
},
將輸入的值存在inputValue中，搜索button 用bindtap綁定setSearchStorage函數(shù)
setSearchStorage:function(){
let data;
let localStorageValue = [];
if(this.data.inputValue != \'\'){
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var searchData = wx.getStorageSync(\'searchData\') || []
searchData.push(this.data.inputValue)
wx.setStorageSync(\'searchData\', searchData)
wx.navigateTo({
url: \'../result/result\'
})
}else{
console.log(\'空白的你搜個蛋!\')
}
// this.onLoad();
},
這個函數(shù)主要就是先判斷輸入的值是否不為空，再通過getStorageSync獲取到key為searchData的localStorage，
如果第一次還沒有set過這個key就獲取[]，再將用戶inputValue存的想要搜索的值放進searchData，之后再跳轉(zhuǎn)到result頁面。這里我只放了個案例頁面。
如果在真正的生產(chǎn)環(huán)境中，這個函數(shù)可以通過wx.request向服務器發(fā)送請求，再把數(shù)據(jù)放進result頁面中，實現(xiàn)真正的搜索功能。
刪除inputValue的button功能實現(xiàn)也很簡單，setData將inputValue設(shè)置為空字符串就可以了。
放點擊result頁面左上角的返回時，你就可以發(fā)現(xiàn)，你剛才搜索的結(jié)果已經(jīng)放到了search的頁面中。
當你想要刪除緩存數(shù)據(jù)的時候，可以點擊清空瀏覽記錄按鈕，會彈出個對話框：
點擊確認刪除之后，會自動刷新頁面(重定向到本頁面)，將之前的key為searchData的localStorage重置為空數(shù)組。
modalChangeConfirm:function(){
wx.setStorageSync(\'searchData\',[])
this.setData({
modalHidden:true
})
wx.redirectTo({
url: \'../search/search\'
})
},
這里的清除不是應用wx.clearStorage()刪除的，以為clearStorage會將所有的localStorage都刪掉，慎用!這樣，搜索的功能就做好了!