微信小程序实现收藏与取消收藏切换图片功能

<image wx:if="{{collected}}" catchtap='onCollectionTap' src='/images/icon/collection.png'></image>   <image wx:else src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></image>

// pages/post_detail/post_detail.jsvar postData = require("../../data/posts_data.js")Page({ /**  * 页面的初始数据  */ data: { }, /**  * 生命周期函数--监听页面加载  */ onLoad: function(options) {  var postId = options.id;  this.data.currentPostId = postId  var postsData = postData.postList[postId];  console.log(postsData);  // this.data.postData=postsData;  this.setData({   post_key: postsData  })  // var postsCollected={  //  1:"true",  //  2:"false",  //  3:"true",  // }  // console.log(postData);  // 从缓存中读取所有的缓存状态  var postsCollected = wx.getStorageSync("posts_Collected")  //如果缓存为真，执行以下代码  if (postsCollected) {   //读取其中一个缓存状态   var postsCollected = postsCollected[postId]   this.setData({    //将是否被收藏的状态上绑定到collected这个变量上    collected: postsCollected   })  } else {   var postsCollected = {};   postsCollected[postId] = false;   wx.setStorageSync("posts_Collected", postsCollected)  } }, onCollectionTap: function(event) {  //获取缓存的方法  var postsCollected = wx.getStorageSync('posts_Collected');  var postCollected = postsCollected[this.data.currentPostId];  console.log(postCollected);  //取反操作，收藏的话，点击变成未收藏，反之，变成收藏。  postCollected = !postCollected;  postsCollected[this.data.currentPostId] = postCollected;  // //更新文章是否收藏的缓存值。  // wx.setStorageSync('posts_Collected', postsCollected)  // //更新数据绑定变量,从而实现切换图片。  // this.setData({  //  collected: postCollected  // })  this.showModal(postsCollected, postCollected)  // wx.showToast({  //  title: postCollected ? "收藏成功" : "取消收藏",  //  duration: 800,  //  icon: "success"  // })  // wx.showModal({  //  title: '确定收藏',  //  content: '这是一个模态弹窗',  //  success: function (res) {  //   if (res.confirm) {  //    console.log('用户点击确定')  //   } else if (res.cancel) {  //    console.log('用户点击取消')  //   }  //  }  // })  console.log("onCollectionTap"); },//使用showModal API来实现界面上逻辑操作。 showModal: function(postsCollected, postCollected) {//这个注意一下，由于this是在page下调用的方法，这里是在自定义函数下，所有必须重新赋值到一个新的变量，才能重新使用，不明白的同学们，记住就行。  var ts = this;  wx.showModal({   title: '收藏',   content: postCollected ? "收藏该文章" : "取消收藏该文章",   success: function(res) {    if (res.confirm) {     wx.setStorageSync('posts_Collected', postsCollected)     //更新数据绑定变量,从而实现切换图片。     ts.setData({      collected: postCollected     })     console.log('用户点击确定')    } else if (res.cancel) {     console.log('用户点击取消')    }   }  }) }, // onCollectionTap: function(event) { //  var baoxue = wx.getStorageSync("key"); //  console.log(baoxue); // }, onShareTap: function(event) {  // wx.removeStorageSync("key")  //缓存的上限最大不能超过10MB  wx.clearStorageSync();  console.log("onShareTap"); }, /**  * 生命周期函数--监听页面初次渲染完成  */ onReady: function() { }, /**  * 生命周期函数--监听页面显示  */ onShow: function() { }, /**  * 生命周期函数--监听页面隐藏  */ onHide: function() { }, /**  * 生命周期函数--监听页面卸载  */ onUnload: function() { }, /**  * 页面相关事件处理函数--监听用户下拉动作  */ onPullDownRefresh: function() { }, /**  * 页面上拉触底事件的处理函数  */ onReachBottom: function() {  console.log("到底了"); }, /**  * 用户点击右上角分享  */ onShareAppMessage: function() { }})