當內(nèi)容更新時，需要在入口加上小紅點提示，這種需求屢見不鮮，實現(xiàn)起來也不復雜。
實現(xiàn)的場景有很多，web 端、app 端、小程序端等等，實現(xiàn)思路大同小異，本文從有無登錄態(tài)兩種情形，講述解決問題的完整思路。
有登錄態(tài)比較常規(guī)的做法是有用戶登錄態(tài)的情況，將用戶的已讀時間錄入至后臺的用戶數(shù)據(jù)信息中，當內(nèi)容更新時，把內(nèi)容更新時間和用戶已讀時間做對比，如果用戶已讀時間早于內(nèi)容更新時候，在入口處給用戶提示小紅點，表示有更新內(nèi)容未讀。
1. 更新數(shù)據(jù)第一步是更新數(shù)據(jù)，在常規(guī)數(shù)據(jù)字段之外，需要注意新增更新時間字段。
這樣用戶在獲取數(shù)據(jù)時，才方便后臺對比數(shù)據(jù)更新時間和用戶已讀時間。
2. 獲取數(shù)據(jù)第二步是獲取數(shù)據(jù)，在獲取數(shù)據(jù)的時候，帶上 userId，后臺在接收到請求之后，查詢該用戶上次的已讀時間，判斷該用戶是否瀏覽過最新的內(nèi)容，也就獲取到用戶的已讀未讀狀態(tài)。
如果用戶最新閱讀時間晚于數(shù)據(jù)最新更新時間，則處于未讀狀態(tài)，接口返回is_read: false，前端拿到該字段后，請求設(shè)置已讀的接口，后臺接收到設(shè)置已讀的請求后，更新用戶數(shù)據(jù)中的已讀時間字段。
如果用戶最新閱讀時間晚于數(shù)據(jù)最新更新時間，則處于已讀狀態(tài)，此時沒有內(nèi)容更新，不提示用戶小紅點。
到這里，一個簡單的擁有用戶登錄態(tài)的內(nèi)容更新提示小紅點的功能就完成了。
沒有登錄態(tài)當內(nèi)容需要推送給游客狀態(tài)的用戶時，怎么才能知道該用戶是否瀏覽過最新發(fā)布的內(nèi)容呢？1. 更新數(shù)據(jù)更新數(shù)據(jù)和有登錄態(tài)的做法一樣，新增更新時間字段就可以了。
2. 獲取數(shù)據(jù)獲取數(shù)據(jù)這一步有些不一樣，數(shù)據(jù)更新時間依然是從后臺拉取，用戶最新閱讀時間則是從瀏覽器本地緩存 localStorage 中獲取。
用戶首次進入內(nèi)容頁時，更新 localStorage 中的readTime 字段，表示用戶已讀時間。
再次進入內(nèi)容頁時，將 localStorage 中的已讀時間與數(shù)據(jù)更新時間對比，決定是否更新 localStorage 中的已讀時間，這樣就可以實現(xiàn)內(nèi)容更新時提示小紅點，內(nèi)容未更新時不提示了。
但是由于沒有登錄態(tài)，是否讀過最新內(nèi)容不是根據(jù)用戶來決定的，而是根據(jù)客戶端瀏覽器決定，適用于弱綁定的場景。
總結(jié)本文分享了內(nèi)容更新時提示小紅點的解決思路，希望本文能讓你了解怎么去做消息通知的-內(nèi)容更新小紅點提示的實現(xiàn)過程。
推薦教程：
《小程序開發(fā)》以上就是小程序內(nèi)容更新提示小紅點如何實現(xiàn)？的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
HTML本文轉(zhuǎn)載于：
juejin，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序文本溢出時，如何顯示為省略號？
下一篇：
小程序用canvas繪制海報的做法相關(guān)文章相關(guān)視頻小程序與H5比較的區(qū)別一款小而美小程序腳手架，讓你更流暢快速的開發(fā)小程序小程序之picker 數(shù)據(jù)是 Object Arr...小程序入門就看這篇教你用PHP實現(xiàn)微信小程序人臉識別刷臉登錄功能小程序內(nèi)容更新提示小紅點如何實現(xiàn)？登錄小程序中心認識小程序開發(fā)工具小程序的rpx長度單位詳解布局奔牛課堂小程序搜素框 [溫州做小程序]