【微信小程序】文章点赞功能的实现

颜颜yan_

发布于 2023-02-19 09:16:03

1.5K0

发布于 2023-02-19 09:16:03

文章被收录于专栏：颜颜yan_的学习笔记颜颜yan_的学习笔记

🏆今日学习目标：第二十期——文章点赞功能的实现 ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：15分钟 🎉专栏系列：我的第一个微信小程序

文章目录

前言

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

效果图

实现步骤

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

首先在接口中添加处理点赞操作的方法。调用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
        })
    }