미니 프로그램 콘텐츠 업데이트에 대한 빨간색 점 프롬프트를 구현하는 방법은 무엇입니까?

Guanhui

풀어 주다： 2020-06-16 17:25:29

앞으로

5576명이 탐색했습니다.

미니 프로그램 콘텐츠 업데이트에 대한 빨간색 점 프롬프트를 구현하는 방법은 무엇입니까?

콘텐츠가 업데이트되면 입구에 작은 빨간색 점 프롬프트를 추가해야 합니다. 이 요구 사항은 일반적이며 구현하기 복잡하지 않습니다. 웹, 앱, 애플릿 등 다양한 구현 시나리오가 있습니다. 구현 아이디어는 유사합니다. 이 문서에서는 로그인과 비로그인의 두 가지 상황에서 문제를 해결하기 위한 전체 아이디어를 설명합니다.

로그인 상태

보다 일반적인 접근 방식은 사용자가 로그인할 때 백그라운드에서 사용자 데이터 정보에 사용자의 읽은 시간을 입력하는 것입니다. 콘텐츠가 업데이트되면 콘텐츠 업데이트 시간과 사용자의 읽은 시간이 표시됩니다. 비교를 위해, 콘텐츠가 업데이트되기 전 사용자가 콘텐츠를 읽었다면, 읽지 않은 업데이트된 콘텐츠가 있음을 나타내기 위해 입구에 작은 빨간색 점이 사용자에게 표시됩니다.

1. 데이터 업데이트

첫 번째 단계는 일반 데이터 필드 외에도 새로운 업데이트 시간 필드에 주의해야 합니다. 이렇게 하면 사용자가 데이터를 얻을 때 배경에서 데이터 업데이트 시간과 사용자가 읽은 시간을 비교하는 것이 편리합니다. 更新时间字段。这样用户在获取数据时，才方便后台对比数据更新时间和用户已读时间。

2. 获取数据

第二步是获取数据，在获取数据的时候，带上 userId，后台在接收到请求之后，查询该用户上次的已读时间，判断该用户是否浏览过最新的内容，也就获取到用户的已读未读状态。

如果用户最新阅读时间晚于数据最新更新时间，则处于未读状态，接口返回is_read: false，前端拿到该字段后，请求设置已读的接口，后台接收到设置已读的请求后，更新用户数据中的已读时间字段。

如果用户最新阅读时间晚于数据最新更新时间，则处于已读状态，此时没有内容更新，不提示用户小红点。

到这里，一个简单的拥有用户登录态的内容更新提示小红点的功能就完成了。

没有登录态

当内容需要推送给游客状态的用户时，怎么才能知道该用户是否浏览过最新发布的内容呢？

1. 更新数据

更新数据和有登录态的做法一样，新增更新时间字段就可以了。

2. 获取数据

获取数据这一步有些不一样，数据更新时间依然是从后台拉取，用户最新阅读时间则是从浏览器本地缓存 localStorage 中获取。用户首次进入内容页时，更新 localStorage 中的readTime

2. 데이터 가져오기

두 번째 단계는 데이터를 가져오는 것입니다. 요청을 받은 후 userId를 가져옵니다. 배경 사용자의 마지막 읽은 시간을 쿼리하고, 사용자가 최신 콘텐츠를 탐색했는지 여부를 확인하고, 사용자의 읽음 및 읽지 않음 상태를 가져옵니다.

사용자의 최근 읽은 시간이 데이터의 최근 업데이트 시간보다 늦으면 읽지 않은 상태이며 인터페이스는 프런트 엔드가 이 필드를 가져온 후 is_read: false를 반환합니다. 읽기 인터페이스 설정을 요청하면 백그라운드에서 이를 수신합니다. 읽기 요청을 설정한 후 사용자 데이터의 읽기 시간 필드를 업데이트하세요.