WeChat Mini Program implements the likes service

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:
  • WeChat mini program implements like and unlike functions
  • WeChat applet implements the like and unlike functions on the list page
  • WeChat applet project summary: like, delete, list, share function
  • Method for WeChat applet to realize the like function based on local cache
  • WeChat applet widget realizes live broadcast like bubble effect based on Canvas

<<:  Detailed explanation of FTP server configuration and 425 error and TLS warning solutions for FileZilla Server

>>:  Share 9 Linux Shell Scripting Tips for Practice and Interviews

Recommend

How to upload the jar package to nexus via the web page

When using Maven to manage projects, how to uploa...

How to use ss command instead of netstat in Linux operation and maintenance

Preface When operating and managing Linux servers...

Detailed explanation of how to install PHP7 on Linux

How to install PHP7 on Linux? 1. Install dependen...

Web page html special symbols html special characters comparison table

Special symbols Named Entities Decimal encoding S...

Vue implements the function of calling the mobile phone camera and album

This article shares the specific code of Vue to a...

MySQL 8.x msi version installation tutorial with pictures and text

1. Download MySQL Official website download addre...

Methods and problems encountered in installing mariadb in centos under mysql

Delete the previously installed mariadb 1. Use rp...

Detailed installation and configuration of Subversion (SVN) under Ubuntu

If you are a software developer, you must be fami...

Solution to PHP not being able to be parsed after nginx installation is complete

Table of contents Method 1 Method 2 After install...

Native JS implements a very good-looking counter

Today I will share with you a good-looking counte...

How to add vim implementation code examples in power shell

1. Go to Vim's official website to download t...

Web Standard Application: Redesign of Tencent QQ Home Page

Tencent QQ’s homepage has been redesigned, and Web...

Vue uses WebSocket to simulate the chat function

The effect shows that two browsers simulate each ...

A brief introduction to React

Table of contents 1. CDN introduction 1.1 react (...