開啟聊天群前提示未讀訊息和數量

阿新 • • 發佈：2020-12-21

開啟聊天群前提示未讀訊息和數量

今天我寫一個案例，就是聊天群開啟前顯示未讀訊息數量。之前不會做，在網上查了很多也沒找到答案，想想也怪！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就基本上可以渲染頁面了。
不明白，可以給我留言！看到一定回，祝你開心程式設計！喝喝！

開啟聊天群前提示未讀訊息和數量