zoukankan      html  css  js  c++  java
  • 微信小程序入门到实战(五)

    缓存

    缓存的作用是为了加快数据的访问,小程序里面可以设置缓存(本地),设置缓存后,如果没有手动清除缓存的话,就会一直存在。大小不能超过10M。数据优先。

    • 设置缓存

    wx.setStorageSync('key','value'):同步
    wx.setStorage({key:'key',data:'value'}):异步

    wx.setStorageSync('icessun','2018/2/14')   // 同步设置缓存
    
    wx.setStorage({key:'跳一跳',data:'666'})   // 异步设置缓存

    同步设置缓存

    同步设置缓存,缓存值可以为一个字符串,也可以为一个对象,当第一个参数值相同的时候,后面的会覆盖前面的。异步也一样。

      wx.setStorageSync('key',{
          game: "跳一跳",
          gold: "666"
        })

    同步设置缓存

    异步设置缓存,里面的属性是固定的,接收一个对象为参数,也就是说,当你不使用key/data作为参数名字时,就会报错:

    setStorage:fail parameter error: parameter.key should be String instead of Undefined;

    异步设置缓存

    • 获取缓存
      获取缓存的方法很简单,把对应设置缓存的set变为get就行。
      wx.getStorageSync('key'):同步 直接返回获取到的值
      wx.getStorage({key:'key',callback}):异步 通过回调函数返回获取的值
    wx.setStorageSync('key', {
          game: "跳一跳",
          gold: "666"
        })
    
        var a=wx.getStorageSync('key');
        console.log(a);   //     {game: "跳一跳", gold: "666" }
    上面是同步获取缓存值的方法,直接通过变量去接收获取到的缓存值,如果是异步的方法获取缓存值,那么需要在回调函数里面取得缓存值;同步和异步两种方法中的`key`是必须要传入的,否者不知道获取的具体缓存值。
        wx.setStorage({
          key: "跳一跳",
          data: "666"
        })
    
        var a = wx.getStorage({
          key:'跳一跳',
          success: function (res) {
            console.log(res.data);
            console.log(res);
          }
        });
    ![异步获取缓存值](//upload-images.jianshu.io/upload_images/1811036-0801ea1bfde83c94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    • 清除缓存
      清除缓存的方法有两种,clearStorageremoveStorage,每一种都有同步和异步之分:
    // 从本地缓存中异步移除指定 key 
    wx.removeStorage({
      key: 'key',
      success: function(res) {
        console.log(res.data)
      } 
    })
    
    // 同步移除指定 key 
    try {
      wx.removeStorageSync('key')
    } catch (e) {
      // Do something when catch error
    }
    
    //清理本地数据缓存
    wx.clearStorage()
    
    // 同步清理本地数据缓存
    try {
        wx.clearStorageSync()
    } catch(e) {
      // Do something when catch error
    }

    前面说过,缓存是一直存在的,只能通过调用这个方法去清除缓存。

    缓存实践

    • 文章收藏实现
      文章收藏缓存

    那么用缓存,怎么样实现呢?首先是文章数量很多,怎么样知道是那篇文章被收藏了,也就是说文章与缓存数据怎么样一一对应,同时也说明缓存数据的存储方式?收藏的图标怎么样容易切换显示(这个问题,前面的文章已经说了解决办法)?

    收藏和未收藏,是两个不同的状态,那么就会想到布尔值去实现;与文章的一一对应关系,那么会想到使用一个对象去操作,key 表示对应的文章,value表示收藏的状态。

    postCollected={
        0:'ture',    // 文章的id:是否被收藏(true/false)
        1:'false'
         ...
    }

    在文章加载的时候,先要获取一下缓存,看是否存在收藏记录,然后进行状态的判断,弹框提示。

    var postData = require('相对路径') // 本地数据
    onLoad:function(options){
        var postId = options.id;
        var  postData = postData.postList[postId];  // 本地数据中数据输出,对应页面的数据
        this.setData({
           postData:postData,
           postId:postId
       })
    
       var postsCollected= wx.getStorageSync('icessun');  // 读取缓存
       if(postsCollected){    // 状态判断
                 var postStor = postsCollected[postId];
                  this.setData({
                        collected:postStor 
                   })
        }else{
               var  postsCollected = {};  // 把缓存对象默认为空,防止后面访问对象属性出错
                postsCollected[postId] = false;
                wx.setStorageSync('icessun',postsCollected);
        }
    }

    其中的options.id获取的是前一个页面传递过来的参数(前一篇文章末尾已经说过):文章ID。然后判断缓存中页面是否被收藏,把这个状态值设置给wxml,进而控制图片的显示。

    <!--collected 状态变量 在js文件里面控制真假  -->
          <image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image>
          <image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>

    页面上的数据绑定
    实现了缓存文章收藏的状态,怎么样在收藏和未收藏之间来回切换呢?

     onCollectionTap: function (event) {
        var postsStorage = wx.getStorageSync('icessun');
        var postStor = postsStorage[this.data.currentPostId]; // 根据文章的id,获取收藏的状态
        postStor = !postStor;  // 收藏与未收藏之间的切换
    
        postsStorage[this.data.currentPostId] = postStor;
        this.showModal(postsStorage, postStor)
      }

    异步存储缓存

     onCollectionTap: function (event) {
        this.getPostCollectedAsy();
      },
     // 异步方法缓存
      getPostCollectedAsy: function () {
        var that = this;
        wx.getStorage({  // 异步方法的使用
          key: 'icessun',
          success: function (res) {
            var postCollected = res.data;
            var postsColl = postCollected[that.data.currentPostId];
            postsColl = !postsColl;
            postCollected[that.data.currentPostId] = postsColl;
            that.showToast(postCollected, postsColl);
          },
        })
      }

    异步不会阻塞UI,但还是需要根据实际业务需求来,业务需要解耦的话,那么就使用异步,一般都推荐使用同步。脱离业务谈同步和异步,意义不大。

    在收藏图片上面加一个按钮,点击的时候,弹出一个提示框:是否收藏。跟新收藏状态就行。

    showModal: function (postsStorage, postStor) {
        var _this = this;  // 注意this的指向
        wx.showModal({
          title: ' ',
          content: postStor ? '收藏该文章?' : '取消收藏该文章?',
          showCancel: 'true',
          cancelText: '取消',
          cancelColor: '#333',
          confirmText: '确认',
          confirmColor: '#405f80',
          success: function (res) {
            if (res.confirm) {
              wx.setStorageSync('icessun', postsStorage);
              _this.setData({
                collected: postStor
              })
            }
          }
        })
      }

    this指向的是函数调用的上下文环境,success函数里面的this指向showModal,但里面没有setData方法,this执行被改变了。所以要在showModal函数里面先把this暂存一下,保持this执行的不变。

    界面交互,两种方法showToastshowModal,前者不用操作就会消失,后者需要操作才会消失。
    showToast效果
    showModal效果

    showToast: function (postsStorage, postStor) {
        var _this = this;
        // 先根据缓存设置图标,然后在提示文字 注意参数的传递 也要注意this的指向
        wx.setStorageSync('icessun', postsStorage);
        _this.setData({
          collected: postStor
        });
        wx.showToast({
          title: postStor ? '收藏成功' : '取消成功',
          duration: 1000,
          icon: "success"
        })
      }
    • 文章阅读数增加

    使用缓存去记录文章的阅读数量(本地数据)。

    因为微信小程序核心是一个响应的数据绑定系统,整个系统分为两块视图层(View)逻辑层(App Service),框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

    思考:类似与上一个文章收藏,也是使用一个对象把文章ID和阅读量进行一一对应。页面数据的更改,都是在该页面的Data属性里面进行;进入了页面详情页,那么该页面的浏览量就增加1;

    onLoad: function (options) {
    // 页面加载的时候先访问缓存
        var viewDatas = wx.getStorageSync("viewData");
        for (var i = 0; i < postData.postList.length; i++) {
          if (viewDatas[i]) {
            postData.postList[i].view_num = viewDatas[i]
          }
        }
    
        this.setData({
          // 获取导入的模版数据,设置到页面data数据里面,供wxml页面使用
          post_key: postData.postList
        });
      },
    
      newsdetail: function (event) {
        // 当前点击事件触发的元素身上设置的postid,访问自定义属性
        var postid = event.currentTarget.dataset.postid;
        var viewDatas = wx.getStorageSync("viewData");
        if (viewDatas) {
          if(viewDatas[postid]){
            viewDatas[postid] = viewDatas[postid] + 1;
          }else{
            viewDatas[postid]=1;
          }
          postData.postList[postid].view_num = viewDatas[postid];
          this.setData({
            post_key: postData.postList
          });
          wx.setStorageSync("viewData", viewDatas);
        }
        else {
          var viewDatas = {};
          viewDatas[postid] = 1;
          postData.postList[postid].view_num = 1;
          this.setData({
            post_key: postData.postList
          });
          wx.setStorageSync("viewData", viewDatas);
        }
    
        wx.navigateTo({
          url: 'post-detail/post-detail?id=' + postid
        });
      }

    首先,页面初始化的时候,就应该读取一下缓存;根据缓存与文章是一一对应的关系,使用循环去操作。注意一点的是,我们应该判断viewDatas[i]的真假,而不是wx.getStorageSync("viewData")的真假。然后是详情页面的点击,和前面说的一样,应该判断viewDatas[i]的真假,否者会出现,第一次点击是好的,然后就出现浏览量为null的情况,是因为点击一个没有在缓存中出现过的文章,其viewDatas[postid]undefined,与数字1相加出现NaN,进而出现null。初始化的时候,要把缓存置空var viewDatas = {};,防止后面访问出现错误。

    if(viewDatas[postid]){
            viewDatas[postid] = viewDatas[postid] + 1;
     }else{
            viewDatas[postid]=1;
          }
  • 相关阅读:
    LeetCode 121. Best Time to Buy and Sell Stock
    LeetCode 221. Maximal Square
    LeetCode 152. Maximum Product Subarray
    LeetCode 53. Maximum Subarray
    LeetCode 91. Decode Ways
    LeetCode 64. Minimum Path Sum
    LeetCode 264. Ugly Number II
    LeetCode 263. Ugly Number
    LeetCode 50. Pow(x, n)
    LeetCode 279. Perfect Squares
  • 原文地址:https://www.cnblogs.com/linewman/p/9918351.html
Copyright © 2011-2022 走看看