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