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

Debian virtual machine created by VirtualBox shares files with Windows host

the term: 1. VM: Virtual Machine step: 1. Downloa...

CSS tips for implementing Chrome tab bar

This time let’s look at a navigation bar layout w...

Example of utf8mb4 collation in MySQL

Common utf8mb4 sorting rules in MySQL are: utf8mb...

Detailed tutorial on installing Tomcat8.5 in Centos8.2 cloud server environment

Before installing Tomcat, install the JDK environ...

Docker-compose one-click deployment of gitlab Chinese version method steps

1. Introduction to gitlab Gitlab official address...

Summary of two methods to implement vue printing function

Method 1: Install the plugin via npm 1. Install n...

Summary of pitfalls in virtualbox centos7 nat+host-only networking

Table of contents 1. Problem Background 2. What a...

Various front-end printing methods of web: CSS controls web page printing style

CSS controls the printing style of web pages : Use...

Essential bonus items for optimizing and packaging the front end of Vue projects

Table of contents Preface 1. Routing lazy loading...

Implementation of Redis master-slave cluster based on Docker

Table of contents 1. Pull the Redis image 2. Crea...

Even a novice can understand the difference between typeof and instanceof in js

Table of contents 1. typeof 2. instanceof 3. Diff...

Several methods of implementing two fixed columns and one adaptive column in CSS

This article introduces several methods of implem...

JavaScript color viewer

This article example shares the specific code of ...