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