微信小程序入门到实战（五）

时间 2019-12-05

标签微信程序入门实战繁體版

原文原文链接

缓存

缓存的做用是为了加快数据的访问，小程序里面能够设置缓存（本地），设置缓存后，若是没有手动清除缓存的话，就会一直存在。大小不能超过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);
      }
    });

清除缓存

清除缓存的方法有两种，clearStorage和removeStorage，每一种都有同步和异步之分：异步

// 从本地缓存中异步移除指定 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
}

前面说过，缓存是一直存在的，只能经过调用这个方法去清除缓存。函数

缓存实践

文章收藏实现

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

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

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

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

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执行的不变。

界面交互，两种方法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;
      }