思路:
1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid。获取帖子云数据存放到suju:[]里。
2·点击点赞按钮图标变换 点击点赞按钮,改变suju:[]里like属性,html读取suju:[]里面like属性实现图标变换。数字变换同理。
3·界面图标判断是否点过赞 遍历所有帖子的openid,放置到iszan列表里,遍历iszan列表,如果包含当前用户的openid,则把该帖子的like状态改为true,反正改为false。
上传数据看代码,这里不好说。
ps:题主是个新手,写有很多冗余代码,该方法的实现也没能达到高效。欢迎各位大佬按思路写出更高效简洁的代码。
云数据:

wxml:
<view class="love" style="display:flex" bindtap="dianzan" data-dianzannb="{{item.content.dianzan_number}}" data-id="{{item._id}}">
<image lazy-load="true" src="/pages/talk/images/up-click.png" style="width:40rpx;height:40rpx" wx:if="{{!item.like}}"></image><!--没点赞-->
<image lazy-load="true" src="/pages/talk/images/up.png" style="width:40rpx;height:40rpx" wx:else></image><!--已点赞-->
<view class="dianzannb" style="font-size:78%;color:#656565;font-weight:lighter;margin-right:10rpx;">{{item.content.dianzan_number}}</view>
</view>js:
//参数传递
dianzan(e) {
console.log("点赞传参", e)
this.zan(e.currentTarget.dataset.id);
},
//具体实现
zan(item_id) {
//拿到openid
app.getOpenid();
this.setData({
openid: app.globalData.openid
});
console.log('机主的openid', this.data.openid)
db.collection('fatie').doc(item_id).get().then(res => {
console.log('云数据', res)
console.log('本地数据', this.data.suju)
var num = res.data.content.dianzan_number;
this.setData({
like_people: res.data.like_people,
dianzannb: num,
})
var like_people = this.data.like_people;
console.log('点赞人的ID==》', this.data.openid)
var iQ = this.data.suju.findIndex((value) => value._id == item_id);
console.log('能不能返回位置==》', iQ)
if (this.data.like_people.includes(this.data.openid) == true) { //已经点赞,要取消点赞
console.log('查看是否运行IF-01');
var that = this
var openid = this.data.openid
console.log('要删除的openid', openid);
var like_people = this.data.like_people;
var index = like_people.indexOf(openid);
like_people.splice(index, 1);
console.log('查看是否删除openid', this.data.like_people);
--num;
this.setData({
dianzannb:num,
[`suju[${iQ}].content.dianzan_number`]: num,
like_people: this.data.like_people,
[`suju[${iQ}].like`]: false, //数据中like为'false'是未点赞
like : false
})
console.log('取消点赞成功', this.data.like_people)
console.log('取消点赞成功--2', this.data.like)
} else if (this.data.like_people.includes(this.data.openid) == false) { //未点赞,准备点赞
console.log('查看是否运行IF-02');
this.setData({
like_people: this.data.like_people.concat(this.data.openid)
})
++num;
console.log('点赞成功', this.data.like_people)
this.setData({
dianzannb:num,
[`suju[${iQ}].content.dianzan_number`]: num,
like_people: this.data.like_people,
[`suju[${iQ}].like`]: true,
like:true
})
//console.log('取消点赞成功--2', this.data.like)
}
console.log('上传前的数据', this.data)
db.collection("fatie").doc(item_id).update({
data: {
//like: this.data.like,
['content.' + 'dianzan_number']: this.data.dianzannb,
like_people: this.data.like_people
}
}).then(res => {
console.log('上传成功', this.data)
})
})
},界面图标判断是否点过赞js:
getcontent() {
app.getOpenid();
this.setData({
openid: app.globalData.openid
});
wx.cloud.callFunction({
name: "content_01"
}).then(res => {
console.log("云函数请求值", res);
this.setData({
suju: res.result.data
})
console.log('本地数据', this.data.suju)
//下面是点赞事件的数据处理
if (res.result.data) {
for (var i = 0; i < res.result.data.length; i++) {
var iszan = res.result.data[i].like_people
if (iszan.includes(this.data.openid) == true) {
this.setData({
[`suju[${i}].like`]: true
})
} else if (iszan.includes(this.data.openid) == false) {
this.setData({
[`suju[${i}].like`]: false
})
}
}
}
})
},借鉴文档
微信小程序开通云开发并利用云函数获取Openid__龙衣的博客-CSDN博客
https://blog.csdn.net/ITxiaodong/article/details/101320816
版权声明:本文为qq_59117381原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。