微信小程序点击切换图片、收藏功能的实现！

微信小程序图片点击切换和收藏功能是非常常用的！有更好写法的请留言，喜欢小程序和web前端开发的请加我微信Angelo_Sifan

效果图如下

1  <image  catchtap='onCollectionTap' wx:if="{{collected}}" src="/images/icon/collect1.png"></image>
2       <image wx:else catchtap='onCollectionTap' src="/images/icon/collect.png"></image>

首先对Image绑定相应变量，选用catchxxx而不选用bindxxx进行绑定是因为，catch不会出发冒泡事件就不会向父节点传递，写的过程中一定要用wx:if和wx:else来进行判断。然后我们还需要在JS中对onCollectionTap变量进行定义，最后当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/*这是对应的JS文件*/   2 Page({   3 data: {   4   5     },   6     onLoad:  function  (option) {   7      var  postId = option.id; //要先在对应的数据文本中对每个栏目定义postId、比如postId: 0 postId:1   8      this .data.currentPostId = postId;  //借助顶部data作为中转，拿到上面这行postid后，将它放到下面var postCollected = postsCollected[]中   9          //将这个postId从onLoad中传递到下面的onCollectionTap中 10          var  postData = postsData.postList[postId]; //定义每个新闻列表对应顺序是哪个新闻内容 11 12  //用户收藏功能 14         var  postsCollected = wx.getStorageSync( 'posts_collected' )  //从缓存中读取所有的缓存状态 15          if  (postsCollected) {    //postsCollected为真的情况，在缓存中存在 16              var  postCollected = postsCollected[postId] //读取其中一个缓存状态 17              this .setData({ 18                 collected: postCollected  //将是否被收藏的状态上绑定到collected这个变量上 19             }) 20         } 21          else  {        //为假的情况，缓存中为空的情况 22              var  postsCollected = { };  //对postsCollected进行一个赋值操作，从而防止为空，从而省掉后面对它是否为空进行测试的步骤 23             postsCollected[postId] =  false ;  // 让当前的这篇文章状态为false，从而收藏星星不点亮 24             wx.setStorageSync( 'posts_collected' , postsCollected); //将postsCollected对象放到缓存中 25         } 26     }, 27     onCollectionTap:  function  (event) {　　　　 // 定义onCollectionTap事件用来确定文章是否收藏，如果没收藏就能点亮星星进行收藏 28          var  postsCollected = wx.getStorageSync( 'posts_collected' );    //获取缓存的方法 29          var  postCollected = postsCollected[ this .data.currentPostId];    //确定当前文章是否有缓存的状态，传递参数方法、借助其他参数来传递变量，如上的data 30         postCollected = !postCollected; // 取反操作，收藏变成未收藏、未收藏变为收藏 31         postsCollected[ this .data.currentPostId] = postCollected; //整体缓存的某一篇文章的缓存值等于postCollected从而更新一个变量 32         wx.setStorageSync( 'posts_collected' , postsCollected); //更新文章是否收藏的缓存值,相当于在数据库中做了一次更新。 33          //更新Data的数据绑定变量,从而实现图片切换 34          this .setData({ 35             collected: postCollected  //当前的collected为postCollected 36         }) 37     } 38 )}

原文链接：https://www.cnblogs.com/EdisonVan/p/9027535.html