微信小程序点赞功能如何用代码完成?

发布时间：2022-11-18 10:57:34 所属栏目：编程来源：

导读：　　这篇文章给大家分享的是微信小程序点赞功能的实现。小编觉得挺有趣的，而且也很实用，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　
　　一、效果

　

这篇文章给大家分享的是微信小程序点赞功能的实现。小编觉得挺有趣的，而且也很实用，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　
　　一、效果

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

　　2.wxml
　　
　　
　　<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>
　　 
　　 <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">
　　 
　　 <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-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({
　　
　　 /**
　　 * 页面的初始数据
　　 */
　　 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
　　 })

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

什么是生成树生成树	Python __repr__ 方法
C++ static静态成员变	C++继承时的名字遮蔽问

微信小程序点赞功能如 何用代码完成?

微信小程序点赞功能如何用代码完成?