小程序—点击收藏功能

最近整理了小程序中收藏功能的编写方法，因为未涉及到后端，所以我是通过小程序中的缓存来模拟此功能，废话不多说直接开干！

wxml中的代码如下：

<view>
   <image catch:tap="handleClickShow" wx:if="{{isShow}}" src="sc1.png" />
   <image catch:tap="handleClickShow" wx:else src="sc2.png" />
</view>

 view中包裹的是2张图片，一张是点赞之前的图片（sc1.png），一张是点赞之后的图片（sc2），同时也绑定了自定义事件handleClickShow，这里我使用了wx:if 和 wx:else来渲染到底显示哪一张图片（还有一种方法结尾有讲到）。

js是核心：

开始之前，我的思路是通过页面加载来获取缓存中的状态，这里先做一个判断如果缓存中没有值，加载时向缓存中添加状态false，（当然你不添加也可以，因为没点击收藏之前此状态就是false，但是要明白原理！），如果有值，获取缓存中的值，点击时取反，在渲染到页面。

js代码：

页面加载时，获取动态id，同时把id存到data中，执行getCollected来获取缓存中的值

onLoad: function (options) {
    // 这块是获取点击详情的时候，通过options来接收的id
    let detId = options.id;
    let _this = this;
    _this.setData({
      collectData : detId//把获取的id存到data中，当作一个变量供下边调用
    })
    _this.getCollected();//此方法是：页面加载时，获取缓存中的状态
  },

获取缓存状态方法

getCollected(){
    let CollectState = wx.getStorageSync("_collect");//获取全部文章缓存状态
    //这里我们做一个判断，如果缓存中有这个值，取到id对应在缓存中的状态，存到data中，
    //如果没有这个值，把id对应在缓存中的状态设置为false
    if(CollectState){// 判断如果缓存中有这个值 
      // 获取当前文章对应在缓存中的状态
      let collcetState = CollectState[this.data.collectData];
      this.setData({
        isShow:collcetState//把这个状态存到data中
      })
    }else{
      let CollectState= {};
      CollectState[this.data.collectData] = false;//没有这个值，默认把点赞的这个状态设置为false，
      // 当然不设置false，它默认也是false，未选中的状态
      wx.setStorageSync("_collect",CollectState);
    }
  },

点击收藏按钮显示收藏成功

handleClickShow(event){
    // 获取当前缓存中的所有状态
    let getSecCollect = wx.getStorageSync("_collect");
    // 获取当前页面的收藏按钮的状态  this.data.collectData就是当前的页面的id，在data中存储的
    let getSecCollectState = getSecCollect[this.data.collectData];
    // 然后当前收藏按钮的状态取反
    getSecCollectState = !getSecCollectState;
    // 把取反的值的状态 在赋给 当前按钮的状态
    getSecCollect[this.data.collectData] = getSecCollectState;
    wx.setStorageSync("_collect",getSecCollect)//在缓存中设置改变之后的状态
    this.setData({
      isShow:getSecCollectState//把更新过的收藏按钮的状态赋值给isShow
    })
  },

判断是否显示哪一张图片也可以用三元表达式

<image src="{{isPlayMusic?'1.png':'2.png'}}">