微信小程序实现点赞业务

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

一、效果

二、实现

1.逻辑

1.从登录界面时，用户数据已经缓存到本地，在onload中从本地获取用户信息保存在data.userInfo中
2.判断用户的_oPEnid是否在loveList返回的列表中，如果是取消赞，如果不是点赞加入昵称到loveList中
3.下面用的是nickName判断，后期优化成使用_openid判断

2.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>
    

3.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 }
) }
, }
    )

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序实现点赞、取消点赞功能
• 微信小程序实现列表页的点赞和取消点赞功能
• 微信小程序项目总结之点赞 删除列表 分享功能
• 微信小程序基于本地缓存实现点赞功能的方法
• 微信小程序小组件 基于Canvas实现直播点赞气泡效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！