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

大四写的小程序记录的笔记，刚从博客园迁移过来，写的很粗糙，后续再整理！

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

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

Page({
    data: {},
    onLoad: function (option) {
    var postId = option.id;//要先在对应的数据文本中对每个栏目定义postId、比如postId: 0 postId:1
    this.data.currentPostId = postId; //借助顶部data作为中转，拿到上面这行postid后，将它放到下面var postCollected = postsCollected[]中
        //将这个postId从onLoad中传递到下面的onCollectionTap中
        var postData = postsData.postList[postId];//定义每个新闻列表对应顺序是哪个新闻内容

//用户收藏功能
    var postsCollected = wx.getStorageSync('posts_collected') //从缓存中读取所有的缓存状态
        if (postsCollected) {   //postsCollected为真的情况，在缓存中存在
            var postCollected = postsCollected[postId]//读取其中一个缓存状态
            this.setData({
                collected: postCollected //将是否被收藏的状态上绑定到collected这个变量上
            })
        }
        else {       //为假的情况，缓存中为空的情况
            var postsCollected = { }; //对postsCollected进行一个赋值操作，从而防止为空，从而省掉后面对它是否为空进行测试的步骤
            postsCollected[postId] = false; // 让当前的这篇文章状态为false，从而收藏星星不点亮
            wx.setStorageSync('posts_collected', postsCollected);//将postsCollected对象放到缓存中
        }
    },
    onCollectionTap: function (event) {　　　　// 定义onCollectionTap事件用来确定文章是否收藏，如果没收藏就能点亮星星进行收藏
        var postsCollected = wx.getStorageSync('posts_collected');   //获取缓存的方法
        var postCollected = postsCollected[this.data.currentPostId];   //确定当前文章是否有缓存的状态，传递参数方法、借助其他参数来传递变量，如上的data
        postCollected = !postCollected;// 取反操作，收藏变成未收藏、未收藏变为收藏
        postsCollected[this.data.currentPostId] = postCollected;//整体缓存的某一篇文章的缓存值等于postCollected从而更新一个变量
        wx.setStorageSync('posts_collected', postsCollected);//更新文章是否收藏的缓存值,相当于在数据库中做了一次更新。
        //更新Data的数据绑定变量,从而实现图片切换
        this.setData({
            collected: postCollected //当前的collected为postCollected
        })
    }
)}