2020-12-19

打开聊天群前提示未读消息和数量

今天我要写一个例子，就是聊天群打开前显示未读消息数量。之前不会做，在网上查了很多也没找到答案，想想也怪！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就基本上可以渲染页面了。
不明白，可以给我留言！看到一定回，祝你开心编程！喝喝！

标签：12,console,log,19,res,cloudShowList,lastTimeStamp,2020,goodsMessageList
来源： https://blog.csdn.net/favoritecode/article/details/111406103