微信小程序实现点赞业务

这篇文章主要为大家详细介绍了微信小程序实现点赞业务，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现点赞业务的具体代码，供大家参考，具体内容如下：

一、效果

二、实现

一、逻辑

1、从登录界面时，用户数据已经缓存到本地，在onload中从本地获取用户信息保存在data.userInfo中

2、判断用户的_openid是否在loveList返回的列表中，如果是取消赞，如果不是点赞加入昵称到loveList中

3、下面用的是nickName判断，后期优化成使用_openid判断

二、wxml

<!-- wx:index = "index":列表循环后所有位置都可以访问索引 --><view class="item" wx:for="{{list}}" wx:index = "index">    <view class="left">        <image class="avatar"></image>    </view>    <view class="right">        <view class="nickname">{{item.nickName}}</view>        <view class="content">{{item.content}}</view>        <view class="image-list">            <image class="image" wx:for="{{item.imageList}}"></image>        </view>        <view class="time-area">            <view class="time">{{item.time}}</view>            <view>                <!--                data-index="{{index}}"                1.设置后在回调函数中currentTarget.dataset中显示                -->                <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>                <!-- 判断当前索引和面盘索引是否一致 -->                <view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">                    <!-- 设置索引和点击函数 -->                    <view class="tab" catchtap="clickLove" data-index="{{index}}">                        <image class="image" src="../../images/love-white.png"></image>                        <text>赞</text>                    </view>                    <view class="tab">                        <image class="image" src="../../images/comment-white.png"></image>                        <text>评论</text>                    </view>                </view>            </view>          </view>        <view class="love-comment">            <!--             item.loveList=重复            item.loveList            <view class="love" wx:if="{{item.loveList.length > 0}}">                <image class="love-icon" src="../../images/love-blue.png"></image>                <text class="love-nickname" wx:for="{{item.loveList}}">老夫子 兰陵王</text>            </view>            -->            <view class="love" wx:if="{{item.loveList.length > 0}}">                <image class="love-icon" src="../../images/love-blue.png"></image>                <!-- love和整个循环的item不冲突 -->                <text class="love-nickname" wx:for-items="{{item.loveList}}" wx:for-item = "love">{{love.nickName}}</text>            </view>            <view class="comment" wx:if="{{item.commentList.length > 0}}">                <view wx:for-items="{{item.commentList}}" wx:for-item = "comment">                    <text class="comment-nickname">{{comment.nickName}}</text>                    <text class="comment-content">{{comment.content}}</text>                </view>            </view>        </view>    </view></view>

三、js

// pages/circle/list.jsvar that;Page({    /**     * 页面的初始数据     */    data: {        userInfo:null,        list:[],        // 当前点击操作面板的索引，每条朋友圈一个面板        showOperationPannelIndex:-1,    },    /**     * 生命周期函数--监听页面加载     */    onLoad: function (options) {        that = this;        for (var i = 1; i < 10; i++) {            // 定义一个对象存储数据            var circleData = {};            circleData.nickName = "朋友-" + i;            circleData.content = "朋友发布内容-" + i;            circleData.time = "2020-05-0" + i;            //图片列表            var imageList = [];            // 点赞列表            var loveList = [];            // 评论列表            var commentList = [];            // 这三个数组赋值给circleData            circleData.imageList = imageList;            circleData.loveList = loveList;            circleData.commentList = commentList;            // 给3个数组赋值            for (var j = 1; j < i; j++) {                // 图片路径，占位                imageList.push(j);                // loveList，定义loveData对象                var loveData = {};                loveData.nickName = '点赞-' + j;                // 点赞数组加入loveList                loveList.push(loveData);                // 评论数据                var commentData = {};                commentData.nickName = "兰陵王-" + j + "：";                commentData.content = "评论内容-" + j;                // 加入数据                commentList.push(commentData);            }            that.data.list.push(circleData);        }        // 重新渲染        that.setData({            list: that.data.list        })        //获取用户信息        wx.getStorage({            key: 'userInfo',            success(res){                //转换成对象                console.log("getStorage success:",JSON.parse(res.data));                that.setData({                    userInfo:JSON.parse(res.data)                })            }        })    },    //控制操作面板展示    showOperationPannel(e){        console.log("showOperationPannel",e);        // 获取点击的索引        var index = e.currentTarget.dataset.index;        // 如果正在展示，则关闭        if(that.data.showOperationPannelIndex == index){            that.setData({                // 索引从0开始                showOperationPannelIndex:-1            })        } else {            that.setData({                // 设置成当前点击的索引                showOperationPannelIndex:index            })        }     },    // 点赞功能    clickLove(e){        console.log(e);        var index = e.currentTarget.dataset.index;        // 将这条数据取出        var circleData = that.data.list[index];        var loveList = circleData.loveList;        var isHaveLove = false;        for(var i = 0; i < loveList.length; i++){            if(that.data.userInfo.nickName == loveList[i].nickName){                isHaveLove = true;                // 移除点赞                loveList.splice(i,1);                break;            }        }        if(!isHaveLove){            loveList.push({nickName:that.data.userInfo.nickName});        }        that.setData({            list:that.data.list,            // 关闭点赞评论面板            showOperationPannelIndex:-1        })    }, })