前言

哈喽大家好，本期是微信小程序专栏第二十期。本期主要内容是文章点赞功能的实现。
每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~

效果图

在这里插入图片描述

实现步骤

点赞功能的思路和上期收藏的思路是一样的噢~

首先在接口中添加处理点赞操作的方法。调用updataPostData方法，定义一个情况为“up”，赋值给变量data，并进行返回。

 // 点赞功能
    up(){
        var data = this.updatePostData('up');
        return data;
    }

在updataPostData方法中添加当case为’up’的情况，并对upStatus进行判断，如果当前状态是未点赞，则当点击时，upStatus的状态变为true，同时数量增加；否则upStatus的状态变为false，同时数量减少。

在这里插入图片描述

// 更新本地的点赞、评论信息、收藏、阅读量
    updatePostData(category){
        var itemData = this.getPostItemById(),
        postData = itemData.data,
        allPostData = this.getAllPostData();
        switch(category){
            case 'collect':
                // 处理收藏，如果当前状态是未收藏，则增加数量，否则减少数量。
                if(!postData.collectionStatus){
                    // 当前状态是未收藏
                    postData.collectionNum++;
                    postData.collectionStatus = true;
                }else{
                    // 当前状态是收藏
                    postData.collectionNum--;
                    postData.collectionStatus = false; 
                }
                break;
                // 处理点赞功能
            case 'up':
                if(!postData.upStatus){
                    postData.upNum++;
                    postData.upStatus = true;
                }else{
                    postData.upNum--;
                    postData.upStatus = false;
                }
                break;
            default:
                break;
        }
        // 更新缓存数据库
        allPostData[itemData.index] = postData;
        this.execSetStorageSync(allPostData);
        return postData;
    }

在页面中使用条件渲染进行判断。并在组件中添加响应用户点赞的方法。

在这里插入图片描述

添加响应用户点赞的方法，当用户点击点赞按钮后，该方法将调用接口中的up方法并将返回的最新数据使用this.setData更新。

 // 点赞功能事件
    onUpTap:function(event){
        var newData = this.dbPost.up();
        this.setData({
            'post.upStatus':newData.upStatus,
            'post.upNum':newData.upNum
        })
    }