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

迷南。 2022-09-28 13:06 157阅读 0赞

![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY][]

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

效果图：

![20170314161156753][]

先介绍搜索的功能：

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

![20170314152654313][]

<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 :

<template name="msgTemp">
        
        <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">
                        
                        <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][http_download.csdn.net_detail_qq_19558705_9780791]

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

微信小程序入门教程集合：[微信小程序入门教程全集][Link 2]

[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY]: /images/20220708/8e417e06063d469e9e2070ef0aea40e9.png
[Link 1]: http://blog.csdn.net/qq_19558705/article/details/61414164
[20170314161156753]: /images/20220708/c16785dce8b14d94b94ef01f2548fa30.png
[https_github.com_weui_weui-wxss]: https://github.com/weui/weui-wxss
[20170314152654313]: /images/20220708/c7b4827223f643c1a629edcefb7d36be.png
[http_download.csdn.net_detail_qq_19558705_9780791]: http://download.csdn.net/detail/qq_19558705/9780791
[Link 2]: http://www.itit123.cn/blog/detail/19.html