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

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>  

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. })  

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.csdn.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>  
82.  

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. }  

// pages/list/list.js 
var app = getApp(); 

var pageNum = 1; // 当前页数 
var searchTitle = ""; // 搜索关键字 
var msgListKey = ""; // 文章列表本地缓存key 

/** 
 * post 请求加载文章列表数据 
 * "page" ：页数 
 * "pageSize" ：每页数量 
 * "search_LIKE_title" ：以文章标题模糊查询 ，格式为 "search_LIKE_实体类属性" 
 */ 
var loadMsgData = function(that){ 
msgListKey = "msgList" + pageNum; 
// 显示加载的icon 
that.setData({ 
hidden:false 
}); 
// 获取上一页数据 
var allMsg = that.data.msgList; 
app.ajax.req('/itdragon/findAll',{ 
"page":pageNum , 
"pageSize" : 6 , 
"search_LIKE_title" : searchTitle 
},function(res){ 
// 拼接当前页数据，不能直接 allMsg.push(res); 
for(var i = 0; i < res.length; i++){ 
allMsg.push(res[i]); 
} 
// 赋值并隐藏加载的icon 
that.setData({ 
msgList:allMsg, 
hidden:true 
}); 
// 缓存列表页面 
wx.setStorageSync(msgListKey,allMsg); 
}); 
// 页数加一 
pageNum ++; 
} 

Page({ 
data:{ 
msgList:[], // 存储文章列表信息 
searchLogList:[], // 存储搜索历史记录信息 
hidden:true, // 加载提示框是否显示 
scrollTop : 0, // 居顶部高度 
inputShowed: false, // 搜索输入框是否显示 
inputVal: "", // 搜索的内容 
searchLogShowed: false // 是否显示搜索历史记录 
}, 
onLoad:function(options){ 
// 页面初始化 options为页面跳转所带来的参数 
var that = this; 
wx.getSystemInfo({ 
success: function(res) { 
that.setData( { 
windowHeight: res.windowHeight, 
windowWidth: res.windowWidth 
}) 
} 
}); 
// 如果缓存中有值，先从缓存中读取 
var info = wx.getStorageSync(msgListKey); 
if (info) { 
that.setData({ 
msgList:info 
}); 
} else { 
loadMsgData(that); 
} 
}, 
onReady:function(){ 
// 页面渲染完成 
}, 
onShow:function(){ 
// 页面显示 
}, 

// 下拉刷新数据 下拉动态效果不明显有待改善 
pullDownRefresh: function() { 
var that = this; 
// 刷新的准备工作，想将页数设置为一，然后清空文章列表信息，定位在距顶部为0的地方 
pageNum = 1; 
that.setData({ 
msgList : [], 
scrollTop : 0 
}); 
// 加载数据 
loadMsgData(that); 
}, 

// 上拉加载数据 
pullUpLoad: function() { 
var that = this; 
loadMsgData(that); 
}, 

// 定位数据 
scroll:function(event){ 
var that = this; 
that.setData({ 
scrollTop : event.detail.scrollTop 
}); 
}, 

// 显示搜索输入框和搜索历史记录 
showInput: function () { 
var that = this; 
if ("" != wx.getStorageSync('searchLog')) { 
that.setData({ 
inputShowed: true, 
searchLogShowed: true, 
searchLogList : wx.getStorageSync('searchLog') 
}); 
} else { 
that.setData({ 
inputShowed: true, 
searchLogShowed: true 
}); 
} 
}, 

// 显示搜索历史记录 
searchLogShowed: function(){ 
var that = this; 
if ("" != wx.getStorageSync('searchLog')) { 
that.setData({ 
searchLogShowed: true, 
searchLogList : wx.getStorageSync('searchLog') 
}); 
} else { 
that.setData({ 
searchLogShowed: true 
}); 
} 
}, 

// 点击 搜索 按钮后 隐藏搜索记录，并加载数据 
searchData: function () { 
var that = this; 
that.setData({ 
msgList : [], 
scrollTop : 0, 
searchLogShowed: false 
}); 
pageNum = 1; 
loadMsgData(that); 
// 搜索后将搜索记录缓存到本地 
if ("" != searchTitle) { 
var searchLogData = that.data.searchLogList; 
searchLogData.push(searchTitle); 
wx.setStorageSync('searchLog', searchLogData); 
} 
}, 

// 点击叉叉icon 清除输入内容，同时清空关键字，并加载数据 
clearInput: function () { 
var that = this; 
that.setData({ 
msgList : [], 
scrollTop : 0, 
inputVal: "" 
}); 
searchTitle = ""; 
pageNum = 1; 
loadMsgData(that); 
}, 

// 输入内容时 把当前内容赋值给 查询的关键字，并显示搜索记录 
inputTyping: function (e) { 
var that = this; 
// 如果不做这个if判断，会导致 searchLogList 的数据类型由 list 变为 字符串 
if ("" != wx.getStorageSync('searchLog')) { 
that.setData({ 
inputVal: e.detail.value, 
searchLogList : wx.getStorageSync('searchLog') 
}); 
} else { 
that.setData({ 
inputVal: e.detail.value, 
searchLogShowed: true 
}); 
} 
searchTitle = e.detail.value; 
}, 

// 通过搜索记录查询数据 
searchDataByLog: function(e){ 
// 从view中获取值，在view标签中定义data-name(name自定义，比如view中是data-log="123" ; 那么e.target.dataset.log=123) 
searchTitle = e.target.dataset.log; 
var that = this; 
that.setData({ 
msgList : [], 
scrollTop : 0, 
searchLogShowed: false, 
inputVal: searchTitle 
}); 
pageNum = 1; 
loadMsgData(that); 
}, 
// 清楚搜索记录 
clearSearchLog:function(){ 
var that = this; 
that.setData({ 
hidden:false 
}); 
wx.removeStorageSync("searchLog"); 
that.setData({ 
scrollTop : 0, 
searchLogShowed: false, 
hidden:true, 
searchLogList:[] 
}); 
}, 
onHide:function(){ 
// 页面隐藏 
}, 
onUnload:function(){ 
// 页面关闭 
} 
})