微信小程序入门六本地缓存和搜索
上一章介绍了上拉加载下拉刷新的功能 这章谈谈搜索和本地缓存。主要功能有,点击搜索显示搜索输入框同时显示搜索历史记录,点击右侧搜索按钮搜索数据同时保存到搜索历史记录中,清除历史记录等功能。
效果图:
先介绍搜索的功能:
第一步,做一个搜索的输入框,可以利用weui-wxss框架中searchbar。没有weui-wxss 可以在 https://github.com/weui/weui-wxss 找到目录 dist - example - searchbar 目录下找到。我将原本的"取消"换成了"搜索"的触发按钮。并修改 bindtap="searchData"
- <view class="weui-search-bar">
- <view class="weui-search-bar__form">
- <view class="weui-search-bar__box">
- <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
- <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/>
- <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
- <icon type="clear" size="14"></icon>
- </view>
- </view>
- <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
- <icon class="weui-icon-search" type="search" size="14"></icon>
- <view class="weui-search-bar__text">搜索</view>
- </label>
- </view>
- <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData">搜索</view>
- </view>
- <view wx:if="{{searchLogShowed}}">
- <view class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}" wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}">
- {{searchLog}}
- </view>
- <view class="clear-search-log" bindtap="clearSearchLog">清除搜索记录</view>
- </view>
js:
- 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(){
- // 页面显示
- },
- // 显示搜索输入框和搜索历史记录
- 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
- });
- pageNum = 1;
- loadMsgData(that);
- },
- // 清楚搜索记录
- clearSearchLog:function(){
- var that = this;
- that.setData({
- hidden:false
- });
- wx.removeStorageSync("searchLog");
- that.setData({
- scrollTop : 0,
- searchLogShowed: false,
- hidden:true
- });
- },
- onHide:function(){
- // 页面隐藏
- },
- onUnload:function(){
- // 页面关闭
- }
- })
完整代码(如果对其他有疑问,可以看前面几章内容,代码中有很详细的注释):
list.wxml :
- <!--
- 参数说明:
- id :文章id
- src :文章图片路径
- title :文章标题
- time :文章创建时间
- scrollTop :距顶部位置
- windowHeight :设备的高
- windowWidth :设备的宽
- inputVal :输入框的值
- inputShowed :搜索输入框的 boolean
- searchLogShowed :是否显示搜索历史记录 boolean
- hidden :是否显示加载提示框 boolean
- msgList :文章列表
- 对于wx-for循环提示警告错误 :"Now you can provide attr "wx:key" for a "wx:for" to improve performance." 可以参考
- http://blog.csdn.net/sinat_31177681/article/details/53557642
- -->
- <!--用name 定义模版-->
- <template name="msgTemp">
- <!--
- 1. scaleToFill : 图片全部填充显示,可能导致变形 默认
- 2. aspectFit : 图片全部显示,以最长边为准
- 3. aspectFill : 图片全部显示,以最短边为准
- 4. widthFix : 宽不变,全部显示图片
- -->
- <view class="weui-panel__bd">
- <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
- <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
- <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
- </view>
- <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
- <view class="weui-media-box__title">{{title}}</view>
- <view class="weui-media-box__desc">{{time}}</view>
- </view>
- </navigator>
- </view>
- </template>
- <view class="page">
- <view class="page__bd">
- <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">
- <view class="weui-panel__hd">
- <view class="weui-search-bar">
- <view class="weui-search-bar__form">
- <view class="weui-search-bar__box">
- <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
- <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindtap="searchLogShowed"/>
- <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
- <icon type="clear" size="14"></icon>
- </view>
- </view>
- <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
- <icon class="weui-icon-search" type="search" size="14"></icon>
- <view class="weui-search-bar__text">搜索</view>
- </label>
- </view>
- <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="searchData">搜索</view>
- </view>
- <view wx:if="{{searchLogShowed}}">
- <view class="search-log" wx:for-item="searchLog" wx:for="{{searchLogList}}" wx:key="searchLogListId" bindtap="searchDataByLog" data-log="{{searchLog}}">
- {{searchLog}}
- </view>
- <view class="clear-search-log" bindtap="clearSearchLog">清除搜索记录</view>
- </view>
- </view>
- <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
- <view class="kind-list__item">
- <!--用is 使用模版-->
- <template is="msgTemp" data="{{...item}}"/>
- </view>
- </view>
- </scroll-view>
- <view>
- <loading hidden="{{hidden}}" bindchange="loadingChange">
- 加载中...
- </loading>
- </view>
- </view>
- <view class="page__ft">
- </view>
- </view>
list.wxss :
- /* pages/list/list.wxss */
- .weui-search-bar {
- position:relative;
- padding:6px 10px;
- display:-webkit-box;
- display:-webkit-flex;
- display:flex;
- box-sizing:border-box;
- background-color:#EFEFF4;
- border-top:0 solid #D7D6DC;
- border-bottom:0 solid #D7D6DC;
- border-radius:4px;
- }
- .search-log{
- border:1px solid #eee !important;
- display:inline-block !important;
- margin-left:10px !important;
- margin-top:5px !important;
- border-radius:5px;
- padding-left:14px;
- padding-right:14px;
- box-sizing:border-box;
- text-align:center;
- text-decoration:none;
- line-height:2.55555556;
- }
- .clear-search-log{
- text-align: center;
- }
list.js :
- // 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(){
- // 页面关闭
- }
- })
如果有什么bug和好的建议,可以提出来。
前六章对应的demo源码:http://download.csdn.net/detail/qq_19558705/9780791
demo源码 list.js 文件中,searchDataByLog 方法中 that.setData中需要添加 inputVal: searchTitle
微信小程序入门教程集合:微信小程序入门教程全集