微信小程序云开发手搓微标提示,逻辑思路记录及代码实现

目录

写前小叙

功能需求背景

首页js的逻辑思路第一部分

 发布公告js逻辑

首页js显示“新”公告思路实现

首页js关闭“新”公告思路实现

管理员“已阅读”js逻辑

首页js显示“新”邮件思路实现

首页js关闭“新”邮件思路实现


 

 

写前小叙

今儿凌晨,我又是一个人撸代码到现在,夜深人静,思路清晰...

首先,这个功能用现在已经存在的第三方UI组件库来实现的话,其实很容易实现。但是!!!我一身反骨,我认为别人能写出来的东西,我一样能写出来。

不能只用别人的东西,就像我之前看一些文学作品,之沉醉于他人笔下的华丽辞藻从而忘乎所以,却忘了自己也是又手的,自己也是会写字的。

正题开始...

功能需求背景

首先我的这个问题的背景是:首页有四个功能键如图所示:

089f4cd15c5349c4b666d4d86687f9a3.png

现在有一个管理员A,需要发布公告,同时也需要给不同的用户回复消息。当管理员A发布公告时,每个用户的这个首页都会刷新,每个用户(不同用户)的公告如果都接受到管理员A发送的新的公告时,并且在没有第一次查看的情况下显示的图表为:

2c485ad2f42840868da6997126b530df.png

同样的,如果用户(不同用户)通过"我要写信"发送给管理员A,并且管理员A将这位用户发送的内容设置为"已阅读"之后,这位用户的"我的邮件"此时的状态为:

3da5948d47fe4d70a0f1bc6d006273f2.png

当用户点击“新状态"后的"公示公告"或者"我的邮件"按钮后,刷新页面,显示的则是原来状态下的"公式公告"与"我的邮件"按钮。

这个问题很显然是一个解决 多用户管理情况下实时消息推送时"微标提示"的问题。

我的实现思路:

涉及到了五张数据表操作

首页js的逻辑思路第一部分

首先时用户想要使用这两个功能,必须登录时候才能使用,该问题对应的登录function逻辑:

1.每个用户登录时用户将自己的信息(包括openid等)写入users数据表

2.利用云函数获取到本小程序登录者的openid,首先向xinxiaoxi_users数据表中通过openid字段获取数据,如果xinxiaoxi_users数据表中已经存在了(数据条数>1)该登录者的openid就不再执行,如果没有(数据条数<1)就添加三个重要的字段如下代码:

 wx.cloud.callFunction({name:'getusers',data:{}}).then(res=>{wx.cloud.database().collection('xinxiaoxi_users').where({_openid:res.result.openid}).get({success(res){console.log(res.data.length,'useruser');if(res.data.length < 1){wx.cloud.database().collection('xinxiaoxi_users').add({data: {user:1,gonggao: [],youjian: [],}})}else{console.log('user已经添加过了');}}})})

此时的xinxiaoxi_users数据表中的用户数据结构如下(此时每个用户的gonggao与youjian都处于空状态,等着管理员通过“发布公告”或"已阅读"往里面添加数据):

9830933fdf004ee4bf1e92d2b15bed14.png

 发布公告js逻辑

要知道,管理员发布公告与 将用户的信息设置成已阅读是不一样的,因为发布公告没有涉及到原来用户的openid,也就是说管理员发布公共的过程(管理员写入公告——公告数据表——用户端前端渲染显示),这个流程发布者是管理员,所以这里是全量发布(谁都可以接收到)。所以它的逻辑很简单:

const db = wx.cloud.database();
const dbCmd = db.command
wx.cloud.database().collection('xinxiaoxi_users').where({user:1}).update({data:{gonggao:dbCmd.push({title:that.data.title})}})

这里的that.data.title是已经写入gonggao数据表中的数据拿到的,我们让管理员往每一个用户的数据条中插入一个标志性的数据就可以,这里不用全部将公告的内容插入,避免不必要的服务环境浪费。

首页js显示“新”公告思路实现

我们还是通过云函数(这个自己写就可以哈)来获取每个小程序使用者的openid,拿到之后,去xinxiaoxi_users数据表中找相应的数据,如果这时候管理员已经发布了公告,那获取到的关键字为gonggao的数据条数就>0,然后我们改变我们首页显示的公告按钮的样式:

wx.cloud.callFunction({name:'getusers',data:{}}).then(res=>{wx.cloud.database().collection('xinxiaoxi_users').where({_openid:res.result.openid}).get({success(res){console.log(res.data[0].gonggao.length,'qqqqqqqqqqqqqqqqqqqqqqqqqqqq');if(res.data[0].gonggao.length > 0){that.setData({Public_announcement: false,Public_announcement_1: true,})}}})

3cd683153bf04ad6a6701a1c5a76df43.png

 

首页js关闭“新”公告思路实现

当用户点击"新"的公告按钮后,通过云函数找到该用户的登录信息,然后拿着这个信息去xinxiaoxi_users数据表中找到相对应用户的gonggao字段的数据,然后将其更新为初始状态:

let that = thisthat.Formula_announcement()that.setData({Public_announcement: true,Public_announcement_1: false,})wx.cloud.callFunction({name:'getusers',data:{}}).then(res=>{console.log(res.result.openid,'ooooooooooooooooooooooooppppppppppppp');wx.cloud.database().collection('xinxiaoxi_users').where({_openid:res.result.openid}).update({data:{gonggao:[]}})})

这里的hat.Formula_announcement()方法是点击进去之后其他的功能使用的,这个不妨碍该功能。

管理员“已阅读”js逻辑

这里跟管理员发布公告唯一的不同就是,需要用到原来"写信用户"的用户信息(openid),该数据表结构为:

4998cb319a7d41cb8321c963d007c657.png

拿到用户的openid后去xinxiaoxi_users数据表中查找该用户的youjian字段,并更新字段数据,代码思路:

wx.cloud.database().collection('xinxiaoxi_users').where({user:1,_openid:that.data.user_mail_openid}).update({data:{youjian:dbCmd.push({title:that.data.mail_title})}})

首页js显示“新”邮件思路实现

现在是已用户的角度去看"我的邮件",所以要在首页,用户刷新页面时重新获取小程序使用者的openid等信息,拿着这些信息去xinxiaoxi_users数据表中找,管理员根据用户提交的邮件获取到的用户的openid来通过该openid往用户的xinxiaoxi_users数据表中添加的字段youjian数据,如果数据条数>0,我的邮件按钮样式变化:

let that = thiswx.cloud.callFunction({name:'getusers',data:{}}).then(res=>{wx.cloud.database().collection('xinxiaoxi_users').where({_openid:res.result.openid}).get({success(res){console.log(res.data[0].youjian.length,'qqqqqqqqqqqqqqqqqqqqqqqqqqqq');if(res.data[0].youjian.length > 0){that.setData({My_mail: false,My_mail_1: true,})}}})})

7da18eeb5a184b1880086a38cd64e908.png

 

首页js关闭“新”邮件思路实现

跟关闭“新”公告的逻辑思路一样,就是多了确认用户信息,再去xinxiaoxi_users数据表中获取字段youjian并更改里面的数据:

let that = thisthat.My_mail()that.setData({My_mail: true,My_mail_1: false,})wx.cloud.callFunction({name:'getusers',data:{}}).then(res=>{console.log(res.result.openid,'ooooooooooooooooooooooooppppppppppppp');wx.cloud.database().collection('xinxiaoxi_users').where({_openid:res.result.openid}).update({data:{youjian:[]}})})

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/112515.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GitLab使用的最简便方式

GitLab介绍 GitLab是一个基于Git版本控制系统的开源平台&#xff0c;用于代码托管&#xff0c;持续集成&#xff0c;以及协作开发。它提供了一套完整的工具&#xff0c;以帮助开发团队协同工作、管理和部署代码。 往往在企业内部使用gitlab管理代码&#xff0c;记录一下将本地代…

SAP 选择屏幕动态通过Radio Button 显示与隐藏以及控制是否必输

如何在选择屏幕上进行动态展示屏幕字段&#xff0c;并且进行必输项检查控制 1. 选择屏幕定义 SELECTION-SCREEN BEGIN OF BLOCK b1 WITH FRAME TITLE TEXT-001.SELECTION-SCREEN BEGIN OF LINE.PARAMETERS: p_r1 TYPE c RADIOBUTTON GROUP grp USER-COMMAND uc DEFAULT X. &q…

算法刷题 week2

目录 week21. 二维数组中的查找题目题解(单调性扫描) O(nm) 2.替换空格题目题解(线性扫描) O(n)(双指针扫描) O(n) 3.从尾到头打印链表题目题解(遍历链表) O(n) week2 1. 二维数组中的查找 题目 题解 (单调性扫描) O(nm) 核心在于发现每个子矩阵右上角的数的性质&#xff1…

【适配的一些小细节】

使用svg 使用img引入svg图片的时候 使用的时候 <img src"./img/logo.svg"/>

上半年毛利率高达82%,敷尔佳“风采不减当年”?

随着公众护肤意识的提升&#xff0c;消费者相比之前对基础护肤变得更加注重产品的成分、功效及安全性。为迎合市场需求&#xff0c;敷尔佳重磅打造了多款新品&#xff0c;2022 年四季度上市的有医用重组III 型人源化胶原蛋白贴&#xff0c;今年上半年新推的有御龄紧致次抛精华液…

WPS 换行后缩进、加粗等自定义样式的清除

在使用WPS的Word编辑文字时&#xff0c;经常会出现换行后&#xff0c;自动缩进这种格式&#xff0c;需要清除这种样式&#xff0c;可以按照下图来操作&#xff1a;

《Python趣味工具》——自制emoji3

今日目标 在上次&#xff0c;我们绘制了静态的emoji图。并且总结了turtle中的常用函数。 本次我们将尝试制作一个动态的emoji&#xff0c;让你的表情包动起来&#xff01; 文章目录 一、动画原理&#xff1a;二、制作动画&#xff1a;1. 修改eyes_black()函数&#xff1a;2. 绘…

继续复制:元胞自动机中的自我复制

兰顿循环。 一、说明 任何观察生物体的人都非常清楚&#xff0c;它们可以产生像自己一样的其他生物体。这是它们的正常功能&#xff0c;如果他们不这样做&#xff0c;它们就不会存在&#xff0c;而且这很可能是它们在世界上比比皆是的原因。换句话说&#xff0c;生物体是基本…

1.1 安装配置CentOS

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;安装VMWare Workstation1、获取安装程序2、进入安装向导3、按提示完成安装 &#xff08;二&#xff09;虚拟网络编辑器1、启动虚拟网络编辑器2、选择VMnet8虚拟网3、更改网络配置4、查看DHCP设置5、查…

ROS 入门

目录 简介 ROS诞生背景 ROS的设计目标 ROS与ROS2 安装ROS 1.配置ubuntu的软件和更新 2.设置安装源 3.设置key 4.安装 5.配置环境变量 安装可能出现的问题 安装构建依赖 卸载 ROS架构 1.设计者 2.维护者 3. 立足系统架构: ROS 可以划分为三层 ROS通信机制 话…

[计算机入门] 电源选项设置

3.10 电源选项设置 有时候我们的电脑一段时间没有用&#xff0c;会自己关掉屏幕或者直接睡眠&#xff0c;这是电源选项没有设置好导致的。 1、打开控制面板&#xff0c;打开其中的电源选项 2、点击左侧上方的选择关闭显示器的时间 3、进入到编辑计划设置界面&#xff0c;在…

4G模块驱动移植

一、4G模块概述 1、调试的模块型号是广和通的 NL668-EAU-00-M.2。 2、使用的接口是 M.2 Key-B。实际只用到了M2里的USB接口。 调试过程 以QMI_WWAN号方式进行说明&#xff0c;其他拨号方式也试过。最后以QMI_WWAN方式调通了&#xff0c;拨号成功了。 其他拨号方式因为现有文档…