WeChat Mini Program implements the likes service

This article shares the specific code for the WeChat applet to implement the like business for your reference. The specific content is as follows

1. Effect

2. Implementation

1. Logic

1. When logging in, user data is cached locally. In onload, user information is obtained locally and saved in data.userInfo
2. Determine whether the user's _openid is in the list returned by loveList. If so, cancel the like. If not, add the nickname to loveList.
3. The following uses nickName judgment, which will be optimized to use _openid judgment later

2.wxml

<!-- 
 wx:index = "index": All positions can access the index after the list loop -->
<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. After setting, it is displayed in currentTarget.dataset in the callback function -->
  <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
  <!-- Determine whether the current index is consistent with the disk index -->
  <view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">
   <!-- Set index and click function -->
   <view class="tab" catchtap="clickLove" data-index="{{index}}">
   <image class="image" src="../../images/love-white.png"></image>
   <text>Like</text>
   </view>
   <view class="tab">
   <image class="image" src="../../images/comment-white.png"></image>
   <text>Comments</text>
   </view>
  </view>
  </view>
  
 </view>
 <view class="love-comment">
  <!-- 
  item.loveList = repeat 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}}">Old Master Lanling Wang</text>
  </view>
  -->
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <!-- love does not conflict with the items in the entire loop -->
  <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.js
var that;
Page({

 /**
 * Initial data of the page */
 data: {
 userInfo:null,
 list:[],
 // The index of the current click operation panel, one panel for each circle of friends showOperationPannelIndex:-1,
 },

 /**
 * Life cycle function--listen for page loading*/
 onLoad: function (options) {
 that = this;
 for (var i = 1; i < 10; i++) {
  // Define an object to store data var circleData = {};
  circleData.nickName = "Friend-" + i;
  circleData.content = "Friends post content-" + i;
  circleData.time = "2020-05-0" + i;

  //Image list var imageList = [];
  // Like list var loveList = [];
  // Comment list var commentList = [];


  // These three arrays are assigned to circleData
  circleData.imageList = imageList;
  circleData.loveList = loveList;
  circleData.commentList = commentList;

  // Assign values to 3 arrays for (var j = 1; j < i; j++) {
  //Picture path, placeholder imageList.push(j);
  // loveList, define loveData object var loveData = {};
  loveData.nickName = 'Like-' + j;
  // Add the likes array to loveList
  loveList.push(loveData);

  //Comment data var commentData = {};
  commentData.nickName = "Lanling King-" + j + "：";
  commentData.content = "Comment content-" + j;
  // Add data commentList.push(commentData);
  }

  that.data.list.push(circleData);
 }
 // Re-render that.setData({
  list: that.data.list
 })
 //Get user information wx.getStorage({
  key: 'userInfo',
  success(res){
  //Convert to object console.log("getStorage success:",JSON.parse(res.data));
  that.setData({
   userInfo:JSON.parse(res.data)
  })
  }
 })
 },
 //Control the operation panel display showOperationPannel(e){
 console.log("showOperationPannel",e);
 // Get the clicked index var index = e.currentTarget.dataset.index;
 // If it is showing, close if(that.data.showOperationPannelIndex == index){
  that.setData({
  // Index starts from 0 showOperationPannelIndex:-1
  })
 }
 else{
  that.setData({
  // Set to the index of the current click showOperationPannelIndex:index
  })
 }
 
 },
 // Like function clickLove(e){
 console.log(e);
 var index = e.currentTarget.dataset.index;
 // Get this data out 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;
  // Remove likes loveList.splice(i,1);
  break;
  }
 }

 if(!isHaveLove){
  loveList.push({nickName:that.data.userInfo.nickName});
 }
 that.setData({
  list:that.data.list,
  // Close the like and comment panel showOperationPannelIndex:-1
 })

 },
 
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: