打开聊天群前提示未读消息和数量
今天我要写一个例子,就是聊天群打开前显示未读消息数量。之前不会做,在网上查了很多也没找到答案,想想也怪!QQ,微信都有这功能,怎么没人贴出代码呢!冥思苦想了一天,相出了个方案,能现实,但不知道是不是最好的,希望对您有用!祝好!
要实现的功能是:
点击cc后:
再返回
消息提示不见了。
实现过程:
1,群里每个发言时要记下发言的时间戳
var message = e.detail.value.message
var date = new Date()
var time = utils.getTime(date)
timeStamp = Date.parse(date) / 1000;
console.log("当前时间戳为:" + timeStamp);
const db = wx.cloud.database();
db.collection("goodsMessageList").add({
data: {
message,
goodsid,
timeStamp,
time,
},
success: res => {
console.log("点击了")
that.setData({
currentMmessage: "",
})
},
fail: err => {
console.error("collection add fail", err)
wx.showToast({
title: '发送失败!',
icon: 'loading',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
},
complete: res => {
console.log("collection add complete")
}
})
每次打开聊天群时把最后一个消息的时间戳和群id和用户的openid存入到数据库中的timeStampList中。
app.getGoodsMessageList().then(res => {
goodsMessageList = res
lastTimeStamp = goodsMessageList[goodsMessageList.length - 1].timeStamp
console.log("lastTimeStamp:::", lastTimeStamp)
console.log("openid:::", openid)
db.collection('timeStampList').where({
goodsid,
_openid: openid,
}).get().then(res => {
if (res.data.length != 0) {
console.log("timeStampList:", res.data)
db.collection('timeStampList').doc(res.data[0]._id).update({
data: {
lastTimeStamp
}
})
.then(console.log)
.catch(console.error)
} else {
db.collection('timeStampList').add({
data: {
goodsid,
lastTimeStamp,
}
})
.then(res => {
console.log(res)
})
.catch(console.error)
}
})
console.log("goodsMessageList:", goodsMessageList)
scrollTop = goodsMessageList.length * 500
that.setData({
goodsMessageList,
scrollTop,
})
if (goodsMessageList.length > 50) {
var num = goodsMessageList.length - 50
for (let i = 0; i < num; i++) {
that.removeGoodsMessages(goodsMessageList[i]._id).then(res => {
console.log("removeGoodsMessages res:", res)
})
}
}
})
app.getGoodsMessageList()是获取群消息的方法以,这个比较简单就不写了。
下面说如果打开聊天页面时查询是否有未读消息。当打开聊天群首页面时,先获取到各群的消息数组,数据中用lookup关联查询本用户在这个群上次看到的最后发言时间戳,就是上面代码的内容。用for循环把这个群所有的消息时间戳与最后发言时间戳比较,有几个大于它就有几个未读消息。再把它放进所在群的信息中显示出来。注意,要用好lookup取到群消息和用户观看此群的最后时间戳,用多个for循环来完成各群查询和群中消息时间戳的查询,用if(){}进行判断,每个app的功能不一样,数据库表设计也不一样,所以我重点讲思路,我的代码供您参考!
isNewMessage: function (cloudShowList) {
var userOpenid = app.globalData.openid
var unread = 0
var flag = false
return new Promise(function (resolve, reject) {
for (let h = 0; h < cloudShowList.length; h++) {
unread = 0
flag = false
for (let i = 0; i < cloudShowList[h].lastTimeStampList.length; i++) {
if (cloudShowList[h].lastTimeStampList[i]._openid == userOpenid) {
flag = true
var lastTimeStamp = cloudShowList[h].lastTimeStampList[i].lastTimeStamp
console.log("lastTimeStamp:", lastTimeStamp)
for (let j = 0; j < cloudShowList[h].goodsMessageList.length; j++) {
if (cloudShowList[h].goodsMessageList[j].timeStamp > lastTimeStamp) {
unread++
console.log("unread:", unread)
}
}
cloudShowList[h].unread = unread
break
}
}
if (flag == false) {
cloudShowList[h].unread = cloudShowList[h].goodsMessageList.length
}
}
resolve(cloudShowList)
})
},
cloudShowList是从数据库中取到的群基本信息,群聊天消息和用户观看此群的最后时间戳组的集合。返回的cloudShowList就基本上可以渲染页面了。
不明白,可以给我留言!看到一定回,祝你开心编程!喝喝!