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

// pages/post_detail/post_detail.js
var 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() {
 }
})