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

目录

写前小叙

功能需求背景

首页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.rhkb.cn/news/136107.html

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

相关文章

综合管廊安全监测,助力市政管廊智能化管理

综合管廊是一种集管线维护、建设、管理于一体的地下综合通道&#xff0c;可以将电力、通讯、燃气、供热、供水等工程管线集于一体&#xff0c;综合管廊对于城市建设具有重要意义&#xff0c;可以防止管线破裂&#xff0c;杜绝反复开挖路面&#xff0c;有效缓解交通拥堵&#xf…

强化历程7-排序算法(2023.9.12)

此笔记学习图片来自于如下网址 1https://www.west999.com/info/html/chengxusheji/Javajishu/20190217/4612849.html 文章目录 强化历程7-排序算法1 冒泡排序(交换排序)2 选择排序3 直接插入排序4 希尔排序5 归并排序6 快速排序7 堆排序8 计数排序 强化历程7-排序算法 1 冒泡排…

商业综合体AI+视频安防监控与智能监管解决方案

一、方案背景 商业综合体需要具备更好的品质和环境才能吸引更多客流&#xff0c;如何有效地进行内部管理、外部引流&#xff0c;是综合体管理人员思考的重点。 传统的视频监控需要靠人盯牢屏幕或者发生报警后通过查看录像&#xff0c;才能找到意外事件相关人员与起因&#xf…

4G模块驱动移植

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

通过Power Platform自定义D365CE业务需求 - 1. Microsoft Power Apps 简介

Microsoft Power Apps是一个趋势性的、无代码和无代码的商业应用程序开发平台,配有一套应用程序、服务和连接器。其数据平台为构建适合任何业务需求的自定义业务应用程序提供了快速开发环境。随着无代码、少代码应用程序开发的引入,任何人都可以快速构建低代码应用程序,并与…

linux系统报“INFO: task java:xxx blocked for more than 120 seconds.”解决办法

1、问题描述 linux系统&#xff0c;输入dmesg -T&#xff0c;报“INFO: task java:xxx blocked for more than 120 seconds.”&#xff0c;如下 一般情况下&#xff0c;linux会把可用内存的40%的空间作为文件系统的缓存。当缓存快满时&#xff0c;文件系统将缓存中的数据整体同…

安卓系列机型 另类体验第三方系统 DSU操作步骤解析 不影响主系统开启第二系统

dsu loader即 动态系统更新&#xff0c;可以在使用动态分区的安卓设备上&#xff0c;不影响原来系统的同时安装一个副系统&#xff0c;用于体验最新的原生安卓系统。可以不影响主系统的基础上体验其他gsi第三方。DSU 依赖于 Android 动态分区功能&#xff0c;并要求 GSI 作为可…

VRTK4⭐四.和 UI 元素交互

文章目录 &#x1f7e5; 安装Tilia Unity.UI&#x1f7e7; 配置射线与UI交互器1️⃣ 配置直线射线2️⃣ 配置UI交互器 &#x1f7e8; 配置UI1️⃣ 更新EventSystem2️⃣ 进行Canvas设置 我们要实现的功能: 右手触摸到圆盘:显示直线射线 右手圆盘键按下:与选中UI交互 &#x1f7…

分类散点图 stripplot() 加辅助线axhline() 多图合一

分类散点图 stripplot 加辅助线axhline 多图合一 效果图代码 画图没有什么可说的&#xff0c;直接上图 效果图 代码 # 绘制图&#xff0c; 查看是否数值在阈值上 plt.figure(figsize(30, 18)) n 0 for header, value_list in info_dict.items():ref_value_list ref_info_dic…

[S2] Challenge 25 心脏病预测

问题 您是一家医疗保健公司的数据科学家&#xff0c;试图创建患者是否患有心脏病的预测因子。目前&#xff0c;您正在试验 11 种不同的特征&#xff08;潜在心脏病指标&#xff09;和 XGBoost 分类模型&#xff0c;您注意到它的性能可能会根据其调整方式而发生很大变化。在此挑…

以矩阵的形式,对点或线段或多边形绕固定点旋转方法

一、仅旋转 &#xff0c;其中x,y旋转前横纵坐标&#xff0c;x’,y’为旋转后横纵坐标。θ旋转角度&#xff0c;单位为弧度。 等价于&#xff1a;x’ xcosθysinθ&#xff0c;y’-xsinθycosθ 注&#xff1a;此矩阵仅为旋转矩阵&#xff0c;不包含平移和缩放。 二、旋转平…

eclipse 源代码文件报错处理

用 eclipse 的 kepler 版本编译项目的时候没有提示、刷新之后发现居然 “新增” 了几个红叉。但是几分钟前还好好运行&#xff1b;都是从代码仓库更新来的、不可能报错。 看了文件最后的更新时间&#xff0c;更加确认了想法&#xff1a; 于是找一个无端报错的文件、随便加一个花…

【Linux】动静态库

目录 1.静态库2.动态库3.静态库的使用区别总结 1.静态库 我们在linux中已经帮我们下载好了C和C所需要的各种库&#xff0c;库也是文件&#xff0c;实际上就是各种接口的实现&#xff0c;我们在使用系统提供的譬如printf等函数时&#xff0c;就是使用系统中的库文件。使用一个库…

成功的海外网红营销:文化和价值观冲突的应对策略

随着全球数字化和社交媒体的崛起&#xff0c;海外网红营销已经成为企业推广产品和服务的一种重要方式。然而&#xff0c;这种全球性的营销活动也伴随着文化和价值观的多样性&#xff0c;容易导致潜在的冲突和误解。为了取得成功并避免不必要的争议&#xff0c;企业需要深入了解…

Solidity 小白教程:21. 调用其他合约

Solidity 小白教程&#xff1a;21. 调用其他合约 调用已部署合约 开发者写智能合约来调用其他合约&#xff0c;这让以太坊网络上的程序可以复用&#xff0c;从而建立繁荣的生态。很多web3项目依赖于调用其他合约&#xff0c;比如收益农场&#xff08;yield farming&#xff0…

北工大汇编——综合题(2)

题目要求 编写一个比赛得分程序。共有7 个评委&#xff0c;按百分制打分&#xff0c;计分 原则是去掉一个最高分和一个最低分&#xff0c;求平均值。要求&#xff1a; 评委的打分以十进制从键盘输入。成绩以十进制给出&#xff0c;并保留 1位小数。输入输出时屏幕上要有相应提…

Unity WebGL 编译 报错: emcc2: error: ‘*‘ failed: [WinError 2] ϵͳ�Ҳ���ָ�����ļ���解决办法

文章目录 错误日志可能的原因及解决办法:导出路径不能有中文系统名(win)含有中文, 修改环境变量Temp和Tmp, 如下图:真正的原因: 杀毒软件删除了部分wasm相关文件,如: 错误日志 Building Library\Bee\artifacts\WebGL\build\debug_WebGL_wasm\build.js failed with output: emc…

D*算法图文详解

前面学习了Dijkstra以及A* 算法的基本原理&#xff0c;对于这两种算法而言&#xff0c;我们都能在有解的情况下找到一条沿着起点到达终点的路径。然而&#xff0c;这两个算法本身都是基于静态地图的&#xff0c;也就是说&#xff1a;当机器人找到路径后开始沿着起点向终点运动的…

接口测试学习

1、curl 命令 无参&#xff1a;curl -X POST -H"Authorization: abcdefghijklmn" https://xxx.xxxxx.com/xxxx 有参&#xff1a;curl -X POST -H"Authorization:abcdefghijklmn " -H"Content-Type:application/json" https://xxx.xxxxx.com/…

【Java 集合】常用的Java集合体系(134)

一、集合的体系分类 分为单列集合&#xff0c;双列集合。和数组相比&#xff0c;大小可变更加灵活。