⼩程序列表点赞功能
最近在做⼀个简单的发帖⼩程序，涉及到点赞功能，起初以为很简单，后⾯才发现难点在于如何记录⽤户对该⽂章的点赞状态，避免下次打开点赞状态失效。先来看效果图：
经过百度半⼩时，发现可以⽤到⼩程序的缓存来解决这个问题，新建⼀个缓存对象 likeCollection
// 先从本地缓存中获取该对象，如果没有就新建⼀个空对象给它（说明⽤户是⾸次进⼊⼩程序）
let likeCollection = wx.getStorageSync('likeCollection');
if(!likeCollection){
wx.setStorageSync('likeCollection',{})
}
从后台获取⽂章对象数组，赋给变量list
// ⼩程序data属性
data:{
list:[]
}
// 调⽤云函数
wx.cloud.callFunction({
name:'getLists',
}).then(res=>{
this.setData({
sult.data;// 赋值给list
})
}).catch(reason=>{console.log(reason)});
这⾥我们给获取到的list每个元素对象都添加⼀个属性 ：“hasChange”，注意，类型是boolean，后台给的数据是没有这个属性的，值从likeCollection中获取，键是根据⽂章对象的属性 _id来区分，我这⾥后台使⽤的云开发，云数据库默认给每个记录提供⼀个 _id作为唯⼀标识符，也即关系数据库中的主键，这条语句要写在 onload() 函数⾥⾯，页⾯加载时就执⾏。
// list是从后台发过来的⽂章对象数组，这⾥不具体描述```
this.data.list.forEach((item)=>{
item['hasChange']=likeCollection[item._id];
})
这⾥的关键就在于，如果之前点过赞，likeCollection⾥的相应⽂章缓存值为true，如果未过赞，给list赋值为undefined，取消了点赞，值就变为fasle，在JS中，undefined == false
⼩程序页⾯上⽤ “hasChange” 这个属性来判断是否点过赞，显⽰对应的图⽚和数字：
<image src='{{item.hasChange?favor_img:favor}}'class='like' bindtap='praiseThis'
从上⾯代码可以看到，每个点赞图⽚绑定了⼀个单击事件 bindtap=‘praiseThis’，这个事件⽅法是关键所在，下⾯看代码
// 点赞函数
praiseThis(e){
var that =this;
let list = e.currentTarget.dataset.list;
let index = e.currentTarget.dataset.index;
let _id = e.currentTarget.dataset._id;
let hasChange =!(this.data[list][index].hasChange);
// 当前点击的赞的情况取反
console.log('当前点击的赞'+hasChange)
// 判断本地⽤户是否点赞了该⽂章
key:'likeCollection',
success:(res)=>{
let details = res.data;
console.log('缓存⾥的值:'+details[_id])
var onum =parseInt(that.data[list][index].clickload);
if(details[_id]){// 如果点赞过，再点就是取消点赞
that.data['list'][index].clickload =(onum -1);
that.data['list'][index].hasChange =false;
}
else{
/
/ 未点赞，点赞量加⼀
that.data['list'][index].clickload =(onum +1);
that.data['list'][index].hasChange =true;
}
// 然乎给缓存对象likeCollection添加/修改对应⽂章建的值，保存状态        wx.getStorage({
key:'likeCollection',
success:datas=>{
let obj = datas.data;
obj[_id]= that.data['list'][index].hasChange
写文章的小程序
wx.setStorage({
data: obj,
key:'likeCollection',
success:res=>{
console.log('缓存成功')
},
fail:reason=>console.log(reason)
})
}
})
this.setData({
list: that.data.list,
})
/
/调⽤云函数，实现后台的⽂章点击量的增减
wx.cloud.callFunction({
name:'pariseThis',
data:{
_id:_id,//⽂章id
likeOr:that.data[list][index].hasChange,
}
}).then(res=>{
console.sult)
// 动态更新赞量
}).catch(reason=>{
console.log(reason)
});
}
})
},
下⾯看点赞时，缓存对象likeCollection中键值的变化：
⾸次进⼊，每个⽂章都是未点赞状态，此时缓存对象likeCollection为⼀个空对象：
下⾯，我们来给两篇⽂章点了赞，此时likeCollection的值已经改变：
可以看到，⾥⾯插⼊了两条主要以⽂章 _id为键名的数据，值为 true，下⾯取消⼀个赞：
再重新点赞，并且取消另⼀个赞：
好了，到这⾥，简单的点赞功能就基本实现了。
总结⼀下，就是从后台获取到⽂章数据后，从缓存对象likeCollection中根据⽂章_id查询点赞状态，未点过赞时，对象⾥的_id属性为undefined，取消后为false，点赞后为true；页⾯加载时将缓存中存储的状态赋值给对应⽂章的⾃定义属性 “hasChange”

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。