<image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image><image wx:else src="/images/icon/pic2.png" bindtap="toCollect"></image>

Page({ data: { }, onLoad: function(option) {  // 獲取接收到的id值  var getId = option.id;  // 讓接收到的id值傳遞到data:{}里面  this.setData({   currentId: getId  });  // 讀取所有的文章列表點贊緩存狀態(tài)  var cache = wx.getStorageSync('cache_key');  // 如果緩存狀態(tài)存在  if (cache) {   // 拿到所有緩存狀態(tài)中的1個   var currentCache = cache[getId];   // 把拿到的緩存狀態(tài)中的1個賦值給data中的collection，如果當(dāng)前文章沒有緩存狀態(tài)，currentCache 的值就是 false，如果當(dāng)前文章的緩存存在，那么 currentCache 就是有值的，有值的說明 currentCache 的值是 true   this.setData({    collection: currentCache   })  } else {   // 如果所有的緩存狀態(tài)都不存在 就讓不存在的緩存存在   var cache = {};   // 既然所有的緩存都不存在，那么當(dāng)前這個文章點贊的緩存也不存在，我們可以把當(dāng)前這個文章點贊的緩存值設(shè)置為 false   cache[getId] = false;   // 把設(shè)置的當(dāng)前文章點贊放在整體的緩存中   wx.setStorageSync('cache_key',cache);  } }, // 點擊圖片的點贊事件 這里使用的是同步的方式 toCollect: function(event) {  // 獲取所有的緩存  var cache = wx.getStorageSync('cache_key');  // 獲取當(dāng)前文章是否被點贊的緩存  var currentCache = cache[this.data.currentId];  // 取反，點贊的變成未點贊 未點贊的變成點贊  currentCache = !currentCache;  // 更新cache中的對應(yīng)的1個的緩存值，使其等于當(dāng)前取反的緩存值  cache[this.data.currentId] = currentCache;  // 重新設(shè)置緩存  wx.setStorageSync('cache_key',cache);  // 更新數(shù)據(jù)綁定,從而切換圖片  this.setData({   // collection 默認(rèn)的是 false   collection: currentCache  });  // 交互反饋  wx.showToast({   title: currentCache?'點贊':'取消',   icon: 'success',   duration: 2000  }); }})

// 點擊圖片的點贊事件 這里使用的是同步的方式toCollect: function(event) {  // 獲取緩存，得到當(dāng)前文章是否被點贊  var cache = wx.getStorageSync('cache_key');  // 獲取當(dāng)前文章是否被點贊的緩存  var currentCache = cache[this.data.currentId];  // 取反，點贊的變成未點贊 未點贊的變成點贊  currentCache = !currentCache;  // 更新cache中的對應(yīng)的1個的緩存值，使其等于當(dāng)前取反的緩存值  cache[this.data.currentId] = currentCache;  // 調(diào)用 showModal方法  this.showModal(cache,currentCache);}，showModal: function(cache,currentCache) { var that = this; wx.showModal({  title: "點贊"  content: currentCache?"要點贊嗎？":"要取消贊嗎？",  showCancel: "true",  cancelText: "取消",  cancelColor: "#666",  confirmText: "確定",  confirmColor: "#222",  success: function(res) {   if (res.confirm) {    // 重新設(shè)置緩存    wx.setStorageSync('cache_key',cache);    // 更新數(shù)據(jù)綁定,從而切換圖片    that.setData({     collection: currentCache    })   }  } })}