杨小事微信小程序实战二实现搜索页面.pdfVIP

杨小事：微信小程序实战（二）：实现搜索页面 第一篇写了一个小程序的登录界面，昨天想要写一个仿淘宝的搜索商品页面，不管什么样的小程序，对于搜 索都是会有一些需要的，所以搜索页面还是可以复用的。 因为只是写个搜索页面，所以主页面就没有好好切，见谅。。。主页面就是下面这样： 这个页面在pages/components/component2/component2.wxml 点击页面中 黄色的input 就可以跳转到真正的搜索页面：pages/components/component2/search/search.wxml 搜索页面中也是有个input 搜索框，旁边有个小叉号，可以清除input 里的文字。 下面主要讲下search 页面的逻辑:其实也非常简单。 搜索input 绑定bindInput 函数， [javascript] view pla opy 1. bindInput:function (e){ 2. this .setData({ 3. inputValue:e.detail.value 4. }) 5. console.log(bindInput+this .data.inputValue) 6. }, 将输入的值存在inputValue 中，搜索button 用bindtap 绑定setSearchStorage 函数 [javascript] view pla opy 1. setSearchStorage:function (){ 2. let data; 3. let localStorageValue = []; 4. if (this .data.inputValue != ){ 5. //调用API 从本地缓存中获取数据 6. var searchData = wx.getStorageSync( searchData) || [] 7. searchData.push(this .data.inputValue) 8. wx.setStorageSync( searchData, searchData) 9. wx.navigateTo({ 10. url: ../result/result 11. }) 12. }else{ 13. console.log(空白的你搜个蛋！) 14. } 15. // this.onLoad(); 16. }, 这个函数主要就是先判断输入的值是否不为空，再通过getStorageSync 获取到key 为searchData 的 localStorage ， 如果第一次还没有set 过这个key 就获取[]，再将用户inputValue 存的想要搜索的值放进searchData，之后再 跳转到result 页面。这里我只放了个案例页面。 如果在真正的生产环境中，这个函数可以通过wx.request 向服务器发送请求，再把数据放进result 页面 中，实现真正的搜索功能。 删除inputValue 的button 功能实现也很简单，setData 将inputValue 设置为空字符串就可以了。 放点击result 页面左上角的返回时，你就可以发现，你刚才搜索的结果已经放到了search 的页面中。 当你想要删除缓存数据的时候，可以点击清空浏览记录按钮，会弹出个对话框： 点击确认删除之后，会自动刷新页面（重定向到本页面），将之前的key 为searchData 的localStorage 重置为 空数组。 [javascript] view pla opy 1. modalChangeConfirm:function (){ 2. wx.setStorageSync( searchData,[]) 3. this .setData({ 4. modalHidden:true 5. }) 6. wx.redirectTo({ 7. url: ../searc