您的位置: 首页  >  文章  >  微信小程序入门六本地缓存和搜索

微信小程序入门六本地缓存和搜索

分类: 文章 • 2025-04-16 11:43:04

上一章介绍了上拉加载下拉刷新的功能 这章谈谈搜索和本地缓存。主要功能有，点击搜索显示搜索输入框同时显示搜索历史记录，点击右侧搜索按钮搜索数据同时保存到搜索历史记录中，清除历史记录等功能。

效果图：

微信小程序入门六本地缓存和搜索

先介绍搜索的功能：

第一步，做一个搜索的输入框，可以利用weui-wxss框架中searchbar。没有weui-wxss 可以在 https://github.com/weui/weui-wxss 找到目录 dist - example - searchbar 目录下找到。我将原本的"取消"换成了"搜索"的触发按钮。并修改 bindtap="searchData"  

微信小程序入门六本地缓存和搜索

[html] view plain copy
 微信小程序入门六本地缓存和搜索微信小程序入门六本地缓存和搜索
  1. <view class="weui-search-bar">  
  2.                     <view class="weui-search-bar__form">  
  3.                         <view class="weui-search-bar__box">  
  4.                             <icon class="weui-icon-search_in-box" type="search" size="14"></icon>  
  5.                             <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/>  
  6.                             <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">  
  7.                                 <icon type="clear" size="14"></icon>  
  8.                             </view>  
  9.                         </view>  
  10.                         <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">  
  11.                             <icon class="weui-icon-search" type="search" size="14"></icon>  
  12.                             <view class="weui-search-bar__text">搜索</view>  
  13.                         </label>  
  14.                     </view>  
  15.                     <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData">搜索</view>  
  16.                 </view>  
  17.                 <view wx:if="{{searchLogShowed}}">  
  18.                     <view  class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}"  wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}">  
  19.                         {{searchLog}}   
  20.                     </view>  
  21.                     <view class="clear-search-log" bindtap="clearSearchLog">清除搜索记录</view>  
  22.                 </view>  


js： 

[html] view plain copy
 微信小程序入门六本地缓存和搜索微信小程序入门六本地缓存和搜索
  1. Page({  
  2.   data:{  
  3.     msgList:[], // 存储文章列表信息  
  4.     searchLogList:[], // 存储搜索历史记录信息  
  5.     hidden:true, // 加载提示框是否显示  
  6.     scrollTop : 0, // 居顶部高度  
  7.     inputShowed: false, // 搜索输入框是否显示  
  8.     inputVal: "", // 搜索的内容  
  9.     searchLogShowed: false // 是否显示搜索历史记录  
  10.   },  
  11.   onLoad:function(options){  
  12.     // 页面初始化 options为页面跳转所带来的参数  
  13.     var that = this;  
  14.     wx.getSystemInfo({  
  15.       success: function(res) {  
  16.         that.setData( {  
  17.           windowHeight: res.windowHeight,  
  18.           windowWidth: res.windowWidth  
  19.         })  
  20.       }  
  21.     });  
  22.     // 如果缓存中有值，先从缓存中读取  
  23.     var info = wx.getStorageSync(msgListKey);  
  24.     if (info) {  
  25.       that.setData({  
  26.         msgList:info  
  27.       });  
  28.     } else {  
  29.       loadMsgData(that);  
  30.     }  
  31.   },  
  32.   onReady:function(){  
  33.     // 页面渲染完成  
  34.   },  
  35.   onShow:function(){  
  36.     // 页面显示  
  37.   },  
  38.   
  39.   // 显示搜索输入框和搜索历史记录  
  40.   showInput: function () {  
  41.     var that = this;  
  42.     if ("" != wx.getStorageSync('searchLog')) {  
  43.       that.setData({  
  44.           inputShowed: true,  
  45.           searchLogShowed: true,  
  46.           searchLogList : wx.getStorageSync('searchLog')  
  47.       });  
  48.     } else {  
  49.       that.setData({  
  50.           inputShowed: true,  
  51.           searchLogShowed: true  
  52.       });  
  53.     }  
  54.   },  
  55.   
  56.   // 显示搜索历史记录  
  57.   searchLogShowed: function(){  
  58.     var that = this;  
  59.     if ("" != wx.getStorageSync('searchLog')) {  
  60.       that.setData({  
  61.           searchLogShowed: true,  
  62.           searchLogList : wx.getStorageSync('searchLog')  
  63.       });  
  64.     } else {  
  65.       that.setData({  
  66.           searchLogShowed: true  
  67.       });  
  68.     }  
  69.   },  
  70.   
  71.   // 点击 搜索 按钮后 隐藏搜索记录，并加载数据  
  72.   searchData: function () {  
  73.     var that = this;  
  74.     that.setData({  
  75.         msgList : [],  
  76.         scrollTop : 0,  
  77.         searchLogShowed: false  
  78.     });  
  79.     pageNum = 1;  
  80.     loadMsgData(that);  
  81.     // 搜索后将搜索记录缓存到本地  
  82.     if ("" != searchTitle) {  
  83.       var searchLogData = that.data.searchLogList;  
  84.       searchLogData.push(searchTitle);  
  85.       wx.setStorageSync('searchLog', searchLogData);  
  86.     }  
  87.   },  
  88.   
  89.   // 点击叉叉icon 清除输入内容，同时清空关键字，并加载数据  
  90.   clearInput: function () {  
  91.     var that = this;  
  92.     that.setData({  
  93.         msgList : [],  
  94.         scrollTop : 0,  
  95.         inputVal: ""  
  96.     });  
  97.     searchTitle = "";  
  98.     pageNum = 1;  
  99.     loadMsgData(that);  
  100.   },  
  101.   
  102.   // 输入内容时 把当前内容赋值给 查询的关键字，并显示搜索记录  
  103.   inputTyping: function (e) {  
  104.     var that = this;  
  105.     // 如果不做这个if判断，会导致 searchLogList 的数据类型由 list 变为 字符串  
  106.     if ("" != wx.getStorageSync('searchLog')) {  
  107.       that.setData({  
  108.           inputVal: e.detail.value,  
  109.           searchLogList : wx.getStorageSync('searchLog')  
  110.       });  
  111.     } else {  
  112.       that.setData({  
  113.           inputVal: e.detail.value,  
  114.           searchLogShowed: true  
  115.       });  
  116.     }  
  117.     searchTitle = e.detail.value;  
  118.   },  
  119.   
  120.   // 通过搜索记录查询数据  
  121.   searchDataByLog: function(e){  
  122.     // 从view中获取值，在view标签中定义data-name(name自定义，比如view中是data-log="123" ; 那么e.target.dataset.log=123)  
  123.     searchTitle = e.target.dataset.log;  
  124.     var that = this;  
  125.     that.setData({  
  126.         msgList : [],  
  127.         scrollTop : 0,  
  128.         searchLogShowed: false  
  129.     });  
  130.     pageNum = 1;  
  131.     loadMsgData(that);  
  132.   },  
  133.   // 清楚搜索记录  
  134.   clearSearchLog:function(){  
  135.     var that = this;  
  136.     that.setData({  
  137.       hidden:false  
  138.     });  
  139.     wx.removeStorageSync("searchLog");  
  140.     that.setData({  
  141.         scrollTop : 0,  
  142.         searchLogShowed: false,  
  143.         hidden:true  
  144.     });  
  145.   },  
  146.   onHide:function(){  
  147.     // 页面隐藏  
  148.   },  
  149.   onUnload:function(){  
  150.     // 页面关闭  
  151.   }  
  152. })  


完整代码（如果对其他有疑问，可以看前面几章内容，代码中有很详细的注释）：

list.wxml : 

[html] view plain copy
 微信小程序入门六本地缓存和搜索微信小程序入门六本地缓存和搜索
  1. <!--  
  2. 参数说明：  
  3. id ：文章id  
  4. src ：文章图片路径  
  5. title ：文章标题  
  6. time ：文章创建时间  
  7. scrollTop ：距顶部位置  
  8. windowHeight ：设备的高  
  9. windowWidth ：设备的宽  
  10. inputVal ：输入框的值  
  11. inputShowed ：搜索输入框的 boolean  
  12. searchLogShowed ：是否显示搜索历史记录 boolean  
  13. hidden ：是否显示加载提示框 boolean  
  14. msgList ：文章列表  
  15. 对于wx-for循环提示警告错误 ："Now you can provide attr "wx:key" for a "wx:for" to improve performance." 可以参考  
  16. http://blog.****.net/sinat_31177681/article/details/53557642  
  17. -->  
  18. <!--用name 定义模版-->  
  19. <template name="msgTemp">  
  20.     <!--  
  21.     1. scaleToFill : 图片全部填充显示，可能导致变形 默认  
  22.     2. aspectFit ： 图片全部显示，以最长边为准  
  23.     3. aspectFill ： 图片全部显示，以最短边为准  
  24.     4. widthFix ： 宽不变，全部显示图片  
  25.     -->  
  26.     <view  class="weui-panel__bd">  
  27.         <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">  
  28.             <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">  
  29.                 <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>  
  30.             </view>  
  31.             <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">  
  32.                 <view class="weui-media-box__title">{{title}}</view>  
  33.                 <view class="weui-media-box__desc">{{time}}</view>  
  34.             </view>  
  35.         </navigator>  
  36.     </view>  
  37. </template>  
  38.   
  39. <view  class="page">  
  40.     <view class="page__bd">  
  41.         <scroll-view scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh"  bindscroll="scroll" bindscrolltolower="pullUpLoad" class="weui-panel weui-panel_access">  
  42.             <view class="weui-panel__hd">  
  43.                 <view class="weui-search-bar">  
  44.                     <view class="weui-search-bar__form">  
  45.                         <view class="weui-search-bar__box">  
  46.                             <icon class="weui-icon-search_in-box" type="search" size="14"></icon>  
  47.                             <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/>  
  48.                             <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">  
  49.                                 <icon type="clear" size="14"></icon>  
  50.                             </view>  
  51.                         </view>  
  52.                         <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">  
  53.                             <icon class="weui-icon-search" type="search" size="14"></icon>  
  54.                             <view class="weui-search-bar__text">搜索</view>  
  55.                         </label>  
  56.                     </view>  
  57.                     <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData">搜索</view>  
  58.                 </view>  
  59.                 <view wx:if="{{searchLogShowed}}">  
  60.                     <view  class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}"  wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}">  
  61.                         {{searchLog}}   
  62.                     </view>  
  63.                     <view class="clear-search-log" bindtap="clearSearchLog">清除搜索记录</view>  
  64.                 </view>  
  65.             </view>  
  66.             <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">  
  67.                 <view class="kind-list__item">  
  68.                     <!--用is 使用模版-->  
  69.                     <template is="msgTemp" data="{{...item}}"/>  
  70.                 </view>  
  71.             </view>  
  72.         </scroll-view>  
  73.         <view>  
  74.             <loading hidden="{{hidden}}" bindchange="loadingChange">  
  75.             加载中...  
  76.             </loading>  
  77.         </view>  
  78.     </view>  
  79.     <view class="page__ft">  
  80.     </view>  
  81. </view>  

list.wxss : 

[html] view plain copy
 微信小程序入门六本地缓存和搜索微信小程序入门六本地缓存和搜索
  1. /* pages/list/list.wxss */  
  2. .weui-search-bar {  
  3.     position:relative;  
  4.     padding:6px 10px;  
  5.     display:-webkit-box;  
  6.     display:-webkit-flex;  
  7.     display:flex;  
  8.     box-sizing:border-box;  
  9.     background-color:#EFEFF4;  
  10.     border-top:0 solid #D7D6DC;  
  11.     border-bottom:0 solid #D7D6DC;  
  12.     border-radius:4px;  
  13. }  
  14.   
  15. .search-log{  
  16.     border:1px solid #eee !important;  
  17.     display:inline-block !important;  
  18.     margin-left:10px !important;  
  19.     margin-top:5px !important;  
  20.     border-radius:5px;  
  21.     padding-left:14px;  
  22.     padding-right:14px;  
  23.     box-sizing:border-box;  
  24.     text-align:center;  
  25.     text-decoration:none;  
  26.     line-height:2.55555556;  
  27. }  
  28.   
  29. .clear-search-log{  
  30.     text-align: center;  
  31. }  

list.js : 

[html] view plain copy
 微信小程序入门六本地缓存和搜索微信小程序入门六本地缓存和搜索
  1. // pages/list/list.js  
  2. var app = getApp();  
  3.   
  4. var pageNum = 1; // 当前页数  
  5. var searchTitle = ""; // 搜索关键字  
  6. var msgListKey = ""; // 文章列表本地缓存key  
  7.   
  8. /**  
  9.  * post 请求加载文章列表数据   
  10.  * "page" ：页数  
  11.  * "pageSize" ：每页数量  
  12.  * "search_LIKE_title" ：以文章标题模糊查询 ，格式为 "search_LIKE_实体类属性"  
  13.  */  
  14. var loadMsgData = function(that){  
  15.   msgListKey = "msgList" + pageNum;  
  16.   // 显示加载的icon  
  17.   that.setData({  
  18.     hidden:false  
  19.   });  
  20.   // 获取上一页数据  
  21.   var allMsg = that.data.msgList;  
  22.   app.ajax.req('/itdragon/findAll',{  
  23.     "page":pageNum ,   
  24.     "pageSize" : 6 ,  
  25.     "search_LIKE_title" : searchTitle  
  26.   },function(res){    
  27.     // 拼接当前页数据，不能直接 allMsg.push(res);   
  28.     for(var i = 0; i < res.length; i++){  
  29.       allMsg.push(res[i]);  
  30.     }  
  31.     // 赋值并隐藏加载的icon  
  32.     that.setData({  
  33.       msgList:allMsg,  
  34.       hidden:true  
  35.     });  
  36.     // 缓存列表页面  
  37.     wx.setStorageSync(msgListKey,allMsg);  
  38.   });  
  39.   // 页数加一  
  40.   pageNum ++;  
  41. }  
  42.   
  43. Page({  
  44.   data:{  
  45.     msgList:[], // 存储文章列表信息  
  46.     searchLogList:[], // 存储搜索历史记录信息  
  47.     hidden:true, // 加载提示框是否显示  
  48.     scrollTop : 0, // 居顶部高度  
  49.     inputShowed: false, // 搜索输入框是否显示  
  50.     inputVal: "", // 搜索的内容  
  51.     searchLogShowed: false // 是否显示搜索历史记录  
  52.   },  
  53.   onLoad:function(options){  
  54.     // 页面初始化 options为页面跳转所带来的参数  
  55.     var that = this;  
  56.     wx.getSystemInfo({  
  57.       success: function(res) {  
  58.         that.setData( {  
  59.           windowHeight: res.windowHeight,  
  60.           windowWidth: res.windowWidth  
  61.         })  
  62.       }  
  63.     });  
  64.     // 如果缓存中有值，先从缓存中读取  
  65.     var info = wx.getStorageSync(msgListKey);  
  66.     if (info) {  
  67.       that.setData({  
  68.         msgList:info  
  69.       });  
  70.     } else {  
  71.       loadMsgData(that);  
  72.     }  
  73.   },  
  74.   onReady:function(){  
  75.     // 页面渲染完成  
  76.   },  
  77.   onShow:function(){  
  78.     // 页面显示  
  79.   },  
  80.   
  81.   // 下拉刷新数据 下拉动态效果不明显有待改善  
  82.   pullDownRefresh: function() {  
  83.     var that = this;  
  84.     // 刷新的准备工作，想将页数设置为一，然后清空文章列表信息，定位在距顶部为0的地方  
  85.     pageNum = 1;  
  86.     that.setData({  
  87.       msgList : [],  
  88.       scrollTop : 0  
  89.     });  
  90.     // 加载数据  
  91.     loadMsgData(that);  
  92.   },  
  93.   
  94.   // 上拉加载数据   
  95.   pullUpLoad: function() {  
  96.     var that = this;  
  97.     loadMsgData(that);  
  98.   },  
  99.   
  100.   // 定位数据  
  101.   scroll:function(event){  
  102.     var that = this;  
  103.     that.setData({  
  104.       scrollTop : event.detail.scrollTop  
  105.     });  
  106.   },  
  107.   
  108.   // 显示搜索输入框和搜索历史记录  
  109.   showInput: function () {  
  110.     var that = this;  
  111.     if ("" != wx.getStorageSync('searchLog')) {  
  112.       that.setData({  
  113.           inputShowed: true,  
  114.           searchLogShowed: true,  
  115.           searchLogList : wx.getStorageSync('searchLog')  
  116.       });  
  117.     } else {  
  118.       that.setData({  
  119.           inputShowed: true,  
  120.           searchLogShowed: true  
  121.       });  
  122.     }  
  123.   },  
  124.   
  125.   // 显示搜索历史记录  
  126.   searchLogShowed: function(){  
  127.     var that = this;  
  128.     if ("" != wx.getStorageSync('searchLog')) {  
  129.       that.setData({  
  130.           searchLogShowed: true,  
  131.           searchLogList : wx.getStorageSync('searchLog')  
  132.       });  
  133.     } else {  
  134.       that.setData({  
  135.           searchLogShowed: true  
  136.       });  
  137.     }  
  138.   },  
  139.   
  140.   // 点击 搜索 按钮后 隐藏搜索记录，并加载数据  
  141.   searchData: function () {  
  142.     var that = this;  
  143.     that.setData({  
  144.         msgList : [],  
  145.         scrollTop : 0,  
  146.         searchLogShowed: false  
  147.     });  
  148.     pageNum = 1;  
  149.     loadMsgData(that);  
  150.     // 搜索后将搜索记录缓存到本地  
  151.     if ("" != searchTitle) {  
  152.       var searchLogData = that.data.searchLogList;  
  153.       searchLogData.push(searchTitle);  
  154.       wx.setStorageSync('searchLog', searchLogData);  
  155.     }  
  156.   },  
  157.   
  158.   // 点击叉叉icon 清除输入内容，同时清空关键字，并加载数据  
  159.   clearInput: function () {  
  160.     var that = this;  
  161.     that.setData({  
  162.         msgList : [],  
  163.         scrollTop : 0,  
  164.         inputVal: ""  
  165.     });  
  166.     searchTitle = "";  
  167.     pageNum = 1;  
  168.     loadMsgData(that);  
  169.   },  
  170.   
  171.   // 输入内容时 把当前内容赋值给 查询的关键字，并显示搜索记录  
  172.   inputTyping: function (e) {  
  173.     var that = this;  
  174.     // 如果不做这个if判断，会导致 searchLogList 的数据类型由 list 变为 字符串  
  175.     if ("" != wx.getStorageSync('searchLog')) {  
  176.       that.setData({  
  177.           inputVal: e.detail.value,  
  178.           searchLogList : wx.getStorageSync('searchLog')  
  179.       });  
  180.     } else {  
  181.       that.setData({  
  182.           inputVal: e.detail.value,  
  183.           searchLogShowed: true  
  184.       });  
  185.     }  
  186.     searchTitle = e.detail.value;  
  187.   },  
  188.   
  189.   // 通过搜索记录查询数据  
  190.   searchDataByLog: function(e){  
  191.     // 从view中获取值，在view标签中定义data-name(name自定义，比如view中是data-log="123" ; 那么e.target.dataset.log=123)  
  192.     searchTitle = e.target.dataset.log;  
  193.     var that = this;  
  194.     that.setData({  
  195.         msgList : [],  
  196.         scrollTop : 0,  
  197.         searchLogShowed: false,  
  198.         inputVal: searchTitle  
  199.     });  
  200.     pageNum = 1;  
  201.     loadMsgData(that);  
  202.   },  
  203.   // 清楚搜索记录  
  204.   clearSearchLog:function(){  
  205.     var that = this;  
  206.     that.setData({  
  207.       hidden:false  
  208.     });  
  209.     wx.removeStorageSync("searchLog");  
  210.     that.setData({  
  211.         scrollTop : 0,  
  212.         searchLogShowed: false,  
  213.         hidden:true,  
  214.         searchLogList:[]  
  215.     });  
  216.   },  
  217.   onHide:function(){  
  218.     // 页面隐藏  
  219.   },  
  220.   onUnload:function(){  
  221.     // 页面关闭  
  222.   }  
  223. })  

如果有什么bug和好的建议，可以提出来。

前六章对应的demo源码：http://download.****.net/detail/qq_19558705/9780791

demo源码 list.js 文件中，searchDataByLog 方法中 that.setData中需要添加 inputVal: searchTitle

微信小程序入门教程集合：微信小程序入门教程全集

相关推荐