Day10微信小程序实战交友小程序添加好友功能之创建并更新message信息SCAUgogocj

1、首先要在添加好友这个按钮上添加一个事件,也就是在detail.wxml的添加好友这个按钮的哪里,添加一个点击事件handleAddFriend

并且添加好友还要考虑,现在是已登陆状态还是未登陆状态的,只有是登陆状态的时候,才可以发起添加好友的请求的

所以就要先判断一下它是否已经登陆了

因为只要是登陆之后,就会把用户的id写入到全局的userinfo下面的

handleAddFriend(){if(app.userInfo._id){}else{wx.showToast({title:'请先登陆',duration:2000,//然后不要让它显示图标icon:'none',success:()=>{//如果成功的话就直接跳转到我的页面去//但是注意了这里不能用navigatorto,因为它主要是跳转//普通的页面,而这里“我的页面”其实是同tabbar来进行配置的}})}}这个时候就可以查找一下小程序文档中关于“路由”的介绍了

可以看到要用wx.switchtab来进行操作了

handleAddFriend(){if(app.userInfo._id){}else{wx.showToast({title:'请先登陆',duration:2000,//然后不要让它显示图标icon:'none',success:()=>{//如果成功的话就直接跳转到我的页面去//但是注意了这里不能用navigatorto,因为它主要是跳转//普通的页面,而这里“我的页面”其实是同tabbar来进行配置的setTimeout(()=>{wx.switchTab({url:'/pages/user/user',})},2000);}})}}上面的加入没登陆的情况也写好了,下面就是对已经登陆了之后的设计了

就要在数据可以中建立一个message集合,主要是用来存储好友消息,或者是系统的消息给这个用户的一个信息集合的

这个集合里面的每一个信息,包含了userID也就是这个好友请求或者是信息是发送给哪一个人的

然后还有一个其他想要加他好友的用户idlist数组,因为每个人都可以给这个人发起好友请求的,这就是对于数据库1的建立了

所以在已经登陆之后,先查看一下有没有这个发起好友的信息了,如果还有的话,就在数据库中创立这个字段了

这个数据库里面的userid字段存的其实就是我们要加的这个人的id标识了,然后这个人的id我们可以从这个人的详情页面(detail)下的data中来获得的

通过where就可以定位到在数据库中这个用户对应的字段了,然后用get就可以开始对这个字段里面的东西进行查询了

如果这个信息已经存在了就做更新操作,如果不存在的话就做创建操作即可了

if(app.userInfo._id){db.collection('mesasge').where({userId:this.data.detail._id}).get().then((res)=>{if(res.data.length){//更新}else{//tianjia1db.collection('message').add({data:{userId:this.data.detail._id,list:[app.userInfo._id]}})}});}之后就可以查看数据可以中的message集合

这样的话,说明就调用成功了

二、更新message信息

因为如果已经申请过了的话,就不能再往list里面添加自己的id了,所以就要检测一下现在是否在list中,

可以直接调用数组的include方法来进行查询,如果找到了的话,就提示“已申请过了”如果没找到的话就要往这个数组里面进行数据更新了

因为在客户端的更新能力还是有限的,所以就要到服务端上来完成了,也就是用云函数来完成了(其实这个方法我们已经写好了,也就是云函数update了

else{wx.cloud.callFunction({//name也就是我们要修改的数据库的名字,data就是在云函数中//想要的参数了name:'updata',data:{collection:'message',where:{userId:this.data.detail._id},data:{}}})}注意了,在调用云函数的时候,前面的data和后面的data是不一样的,钱买你的是给云函数的参数,但是后面的是我们要修改的数据了

在要修改list的数据到时候,就涉及了要对数组进行添加,也就是push操作了,其实在数据可以中也内置了一些的方法,commend.push等等

注意:在detail.js文件中,如果找到了这个数据流,但是没有申请的话,就是进行更新,在更新的时候用到了update云更新函数,

给这个云函数传入的data中

data:`{list:_.unshift('${app.userInfo._id}')}`注意:最外面那层并不是单引号,而是键盘Esc下面的那个标点

三、添加好友功能之监听message消息

在数据库加入了一个带有list和userid的数据,所以在userid这个人登陆小程序之后,就应该可以看到有没有人给他发送消息了

并且还是要实时的更新,就是这个人在登陆状态的话,也可以直接收到了,也就是要实现实时的监听数据库中list的实时变化了

在开发者文档中:云开发-》实时数据的推送:

(它的意思就是我们可以监听到数据库发送的变化

可以直接查看demo

constdb=wx.cloud.database()constwatcher=db.collection('todos')//按progress降序.orderBy('progress','desc')//取按orderBy排序之后的前10个.limit(10).where({team:'ourdevteam'}).watch({onChange:function(snapshot){console.log('docs\'schangedevents',snapshot.docChanges)console.log('queryresultsnapshotaftertheevent',snapshot.docs)console.log('isinitdata',snapshot.type==='init')},onError:function(err){console.error('thewatchclosedbecauseoferror',err)}})//...//等到需要关闭监听的时候调用close()方法watcher.close()我们可以在user页面中进行检测即可,也就是在登陆之后进行检测了

我们创建了一个方法getMessage()。只要用户登陆了之后就可以进行触发了,在onReady里面的登陆成功代码之后即可了

也就是在数据库定位到uuseid是这个用户的数据之后,得到了之后就可以用watch方法来进行监听了

getMessage(){db.collection('message').where({userId:app.userInfo._id}).watch({onChange:function(snapshot){console.log(snapshot);}});}这个onChange就是进行监听的函数了,我们在遇到陌生的一定要传入参数的函数的时候,最好是把这个参数用console.log打印出来看看我们的想要的数据在哪个位置里面的

注意了:如果是按照上面这样的话,是会报错的,以为缺少了错误返回的onError函数的,示例的demo里面的格式是怎么样的,最好就用怎么样的

不然可能都是会报错的

但是会发现,我们没拿到有用的数据

就可以用多账号来调试一下了

(这里用的多账号最好还是用真实的账号把,因为虚拟的出现的问题挺大的)

(然后还要设置给message权限是第一个,允许全部人看的那种,才可以看到在别的账号上的加好友信息的

在别的账号上面的话就可以看到打印的信息了,可以看到我们得到的消息其实是挺乱的,所以最好用判断来搞一下

测试之后会发现,得到的snapshot数据中有一个docChanges数组的,只要有申请,就会有显示了

所以我们可以通过对数组的长度进行一个判断

然后再对这个list进行判断,通过长度来进行判断,如果有长度的话说明就有消息了

有消息的话就要给用户一个提示,就是在下面的tabbar中的消息图标右上角添加一个红色的小点

它需要定义一个index属性,来指定放红点的是tabbar中的哪一项的(它是从0开始的,所以我们设置为2即可了)

也就是说这个用户拿到了这个list之后,通过这个list的长度来判断有没有消息,然后设置红点提示,并且还要把这个得到的list用到消息页面中去的

所以就涉及到了,怎么把这个得到的list共享到消息中去,这个和之前的userInfo是类似的,点开全局的app.js

this.userMessage=[]这里创立的是一个数组来的,不是对象了

然后在user.js里面,判断这个得到的list的长度,设置tabbar上面的小红心,然后把得到的list赋值给全局的userMessage

但是如果检测到这个list是空的话,就要把在tabbar上面的小红心取消掉了

**然后还要让我们全局的userMessage等于一个空的数组即可了

这样,这个监听的函数就完成了:

然后因为watch是实时监听的,我们在数据库里面把给的信息删掉的话

这个红点也就会消失了

这就是因为正在实时的监听着

四、下面搞的就是如何把共享的userMessage在消息页面中渲染出来

===消息页面和removeList组件布局

首先切换编译模式到消息页面中,先做布局

暂无消息:消息列表:第一条消息第二条消息之后就是先判断有没有消息。所以就要在js看i吗添加一个东西,这里添加的是一个userMessage数组,就是用来接收我们的那个全局的list的,

如果这个数组是空的话,说明就是没有消息了,反之,所以就可以通过这个来进行判断了

**之后就要测试一下message这个页面里面文件的生命周期了

这就是为了测试,在tabbar中的生命周期是怎么样的

在message.js里面

在点击了下main的tabbar的图标之后,

打印的结果:

但是当我们几点了个人页面之后,再点击消息页面的时候,只打印了2

也就是说在tabbar里面的onreay并不会再次的触发(但是普通页面的onreay是会被再次触发的),但是他也是会触发onshow的

所以基于这个就可以在onshow中添加东西,来监听现在的消息变化情况了

因为如果想要进入消息页面的话,就得先登陆,所以这力又要一个判断了,如果没登陆得话,就让他跳转到登陆页面去的

(这个功能就和我们的detail里面很像的,就可以直接COPY过来了)

我们用虚拟账号,给我的主号提交了两个申请来进行测试了

之后在message.wxml中对我们的信息进行打印:

我们还要进行优化,就是可以得到一个列表,有头像有昵称,等信息的,别还要有删除的功能的

新建一个removeList的删除组件,然后就是找到message的JSON文件引入这个组件

这个组件其实是可以拖拽的?

在文档-》组件-》视图容器movable-area和movable-view相互配合的

demo:

text我们设置的结构和样式:

但是这个时候还是不能进行拖拽的,其中的direction定义的就是拖拽的方向

添加了这个属性之后:

小喵喵就可以进行拖拽了

注意;下面设置的z-Index是在设置级别,z-index大的会覆盖在小的上面的

小喵喵删除/*components/removeList/removeList.wxss*/.area{width:800rpx;height:150rpx;margin:20rpx;position:relative;border-bottom:1px#cdcdcddashed}.view{width:630rpx;height:100%;position:absolute;left:150rpx;top:0;line-height:150rpx;text-indent:10rpx;z-index:2;}image{width:100rpx;height:100rpx;border-radius:50%;position:absolute;left:0;top:0;z-index:1;}.delete{width:200rpx;height:150rpx;background:red;color:white;position:absolute;right:0;top:0;z-index:1;}但是得到的效果是:

会发现不管怎么拖拉,都挡不住后面的删除--原因就是class==view这块没加背景色,虽然层级够了

给他在wxss里面添加一个background:white即可了

删除那个文字要居中的话,

.delete{width:170rpx;height:100rpx;background:red;color:white;position:absolute;right:0;top:0;z-index:1;line-height:100rpx;}

THE END
1.以案说险警惕以婚恋交友之名进行的各类骗局(三)近期,刘女士通过某交友软件认识了一名男子,双方聊得很投机便互相加了微信。对方贴心地通过外卖平台下单给刘女士送花、订餐,这使得刘女士倍感温馨,聊了一段时间之后对方发来一个网址告诉刘女士这是一个投资平台,能通过后台操作赚汇率的差价,一开始男子让https://mp.weixin.qq.com/s?__biz=MzA3MzQxOTUyNg==&mid=2649225143&idx=6&sn=136cc6909d3846f1c83196a1a1c7752d&chksm=866071163db604693555847c48cae9d338147db31bfb84f7545c354e6fa7073ccd5ad728dd30&scene=27
2.领导对你说“加微信”,高情商的应对之道情商有时候,领导可能会突然对你说“加微信”,这看似简单的一句话,其实也蕴含着一些社交技巧和情商考量。很多人在这个时候可能会直接问“您扫我还是我扫您”,虽然这也能解决问题,但并不是最理想的回答。那么,高情商的人会怎么做呢? 当领导提出加微信时,我们首先要表现出积极的态度。微笑着回应领导,表示很高兴能够与https://m.163.com/dy/article/JJ00II3705562E6V.html
3.为啥牵手app上来就加微信再就是加微信可以看你说状态或者想更加了解你,不能完全说这些人不靠谱,如果加了微信有生命言语不好https://ask.zol.com.cn/x/15438232.html
4.能加个微信吗?付费交友APP盯上了中老年人“一上来就叫老公、亲爱的,但就是死活不加微信,这正常吗?”女婿刘军觉得这是骗局,又不知道如何劝说老人,更怕他为此去借高利贷。 王华的父亲王强就走上了这条路。他记得,父亲也是通过短视频平台下载的交友软件,名字大概是“附近”“密聊”之类,都是付费聊天。 https://m.gmw.cn/2022-04/20/content_1302909221.htm
5.快速微信加人app,哪些交友软件可以直接添加微信好友?什么聊天摘要 亲爱的,您好,如果您想在心心音交友APP中添加微信,您需要达到7级以上才可以申请添加微信。 但是到了7级就得不断充钱了。 这是流程咨询记录 · 回复于2021-11-30 如何在心心相印交友软件中添加微信? 您好,如果您想在心心相印交友软件中添加微信,您的等级需要达到7级以上才可以申请添加微信。 但是到了7级http://www.bjhwtx.com/h-nd-77633.html
6.蜜桃交友app,上面以送礼物提升等级加微信为由,骗取钱财,平台不管水蜜桃号800***这女孩,说增至7级别才能看清微信号码,寄了许多礼品后,说还看不见手机号码,只看到了前7位,后四位装做看不见,还发空格符欺骗我,*重要的是还说,我带她是多少礼品,她便必须充要多少钱,那样一同交易才能看清微信号码,无止尽骗,给她买了1422块的礼品。 水蜜桃号800***这女孩,我都没有跟她聊天https://176927400.b2b.11467.com/news/3800548.asp
7.彩蓬模“直接约的软件能加微信(吃快餐的交友app)”第三步:直接约的软件能加微信(吃快餐的交友app)【Hz⒘cC】留住小城故事的温暖角落! 有什么交友软件可以直接微信的呢 微信、QQ、探探、陌陌、知乎、豆瓣、微博、抖音、B站和即刻,这些软件都是交友的好选择。它们提供了不同的交友方式和功能,可以根据个人喜好进行选择。无论你是在寻找新的朋友,还是想要拓展社交圈,http://www.samc.org.cn/News/index.php/m/wap/wap/m/2138.html
8.映客直播交友如何添加微信映客直播APP微信账号绑定全解映客直播作为一款热门的直播交友平台,为用户提供了丰富的社交互动体验。然而,对于希望进一步深化与好友联系,或希望将映客上的好友添加到微信中的用户来说,可能需要一些指导。本文将详细介绍如何在映客直播app中找到微信账号,并进行绑定,以便于您能够更加便捷地管理您的社交网络。 https://www.golue.com/news/v1122770.html
9.龙猫交友app怎么加微信龙猫交友APP解绑微信方法介绍龙猫交友app怎么加微信 龙猫交友APP解绑微信方法介绍 打泥何开设置页霸侵面 打开安卓版龙猫交友APP的个人中心,点击强牺净设置按钮。 打开账户与安全页面 打开安卓版龙猫交友APP的设置页面,点击账户与安全。 解绑微信 打开安卓版龙猫交友APP的账户与安全页面,点击微信的解绑按钮即可。https://m.liqucn.com/article/292583.wml
10.嫌疑:能直接加微信的交友软件探探,可以加微信的app(202411能直接加微信的交友软件探探,可以加微信的app 五大环境常见问题问卷调查:你的声音很重要! 气候变化 气候变化是我们生活中的热议话题,但你是否觉得这和你的日常生活很遥远?其实,无论是气温升高还是极端天气增加,都和我们息息相关!为了更好地了解大家对气候变化的看法,我们特别设计了这份问卷。无论你是环保http://wushiyintu.com/shangwuriyu/98.html
11.可以免费加微信的交友软件有免费的交友软件吗多特软件园为您整理了多款可以免费加微信的交友软件软件,在多特您能下载多款正规的、无毒软件,其中有声吧交友、开开交友、声吧https://www.duote.com/zt/kymfjwxdjyrj/
12.直接可以加微信的交友软件能直接加微信的交友软件如今,社交网络的兴起使得许多人转向各类聊天交友平台,以此拓宽自己的人际关系网络。他们期望通过这些应用遇到更多有深度的朋友。今天,我就为大家介绍几款可以直接可以加微信的交友软件。这些软件不仅实用,还能有效帮助你扩展社交圈,让你更好地展示自己,提高知名度,从https://www.fxxz.com/k/wxjyapp/
13.能加微信的交友软件有哪些2025能加微信的交友软件有哪些?小编给大家推荐一些能直接加微信的交友软件,APP为用户提供了优质的交友平台,在上面我们可以结识到很多好友,在上面可以通过动态的方式展示自己,而且还能够和朋友交换各自名片,发现身边的朋友,感兴趣的朋友快来下载吧。http://m.doyo.cn/zhuanti/njwxdjyapp/
14.可以加微信的交友软件,哪些手机婚恋软件有效果作为德国咨询/互联网周刊评选为2021年婚恋社交app排行榜No.1的软件,一伴婚恋非常适合真诚找对象的人。 特点1:实名系统真实有效,APP实名系统注册机制和信息审计专业谨慎,不满18人或已婚人士不能使用。经过如此严格的筛选机制,用户信息更加真实有效。 特点2:互加微信良心实用,遇到最喜欢的用户可以直接添加微信,不会绑定https://www.jianshu.com/p/9823e49f9bb6
15.2024马来西亚最火的社交软件平台/App排名及推荐(聊天交友升级成Omi Premium,超低月费就可以享受多种加值服务,让你可以无限次滑动配对。每次滑到让你怦然心动的对象,还可以直接给对方一个Crush按钮。相较于其他交友软体 Omi 收费机制更平价。 6. Badoo 官网:https://badoo.com/ Apple APP下载&Android APP 下载 https://www.extrabux.cn/chs/guide/6287740
16.在一个交友软件上认识你女生,她说要加微信,但是要送礼物才能解锁在一个交友软件上认识你女生,她说要加微信,但是要送礼物才能解锁,我说太贵了,她说解锁加了后会给我,我就送了,后来加上后我问她要礼物钱,她却赖账,请问这算是诈骗吗,报警能处理吗,因为是视频聊的,没有录下https://m.66law.cn/question/42527449.aspx
17.可以加微信的同城交友软件你得赶快收藏些主流软件好用是真的好用,玩的人也多,但是遇到的各种T路也就很多。所以今天就给大家说点不一样的社交app 1.弥恋 这个软件比较简单干净了,软件内没广告,无限制聊天,同城周边的人也挺多的。 在之前就是通过弥恋,认识了我旁边小区的一个妹子,然后被她拉进了周边活动群,瞬间感觉找到了组织了。 https://weibo.com/ttarticle/p/show?id=2309405006332335096041
18.一伴婚恋app官方下载一伴婚恋相亲交友appv3.9.2安卓版安全可靠的婚恋交友软件。应用截图应用介绍 一伴婚恋相亲交友app,助您谈一场以结婚为目的的恋爱;身份认证,汇聚全国最优质最真诚的单身异性;资产认证,筛选出最真实最诚意的婚恋用户;精选专区,多重推荐和展示,收货惊喜缘分;高效沟通,添加最让您怦然心动的异性微信。 产品特色 1、同城相亲交友——只和真实的人谈恋爱。https://www.qqtn.com/azsoft/504509.html
19.视频交友app有哪些?视频交友合集下载可以视频的交友软件面对生活中越来越多的视频交友软件大家都会有这样的疑问,到底哪个视频交友app比较好用呢,接下来就让小编为大家介绍一些很不错的视频交友app吧,分别是:微信、qq、探探、碰碰交友、乐乐视频交友等等都能通过这些软件让大家可以结识更多的朋友,扩大自己的朋友圈,而且自己无聊的时候也不会担心没人陪了,喜欢的朋友就快来http://www.downyi.com/key/shipinjiaoyou/
20.WxJava企业微信增加用户示例企业微信怎么添加用户通过微信注册的企业微信,可以从企业微信APP中打开“加微信”,然后会出现企微添加客户的4种方式: 从微信好友中添加、扫一扫、将企业微信名片分享到微信,还有一个通过手机号搜索添加微信。 活码 一个二维码可以设置多个企微号对接,用户扫码时随机添加一企微号为好友,而且不用更换二维码就可以随时增加、删除扫码的对接人https://blog.51cto.com/u_16099344/8507507