网赚网为广大上网爱好者提供目前网上赚钱好项目,以及大学生兼职网赚、就业平台。网赚网免费公益公开课讲座教程,网赚纯干货技术分享,让你轻松做网赚,在家等收入,还在等什么,轻松登陆,赶快加入我们,安全更可靠!

微信小程序实战--创建friendList字段实现好友关系(添加好友功能) ...

2020-06-28 07:28:07 栏目 : 手机APP 围观 : 评论
回顾:之前我们进行了删除的功能,以及对message消息的增删,下面实现添加好友的功能我们先在数据库中,在message这个字段的list里面,添加上测试号的id,就是模拟这个两个测试号要加我主号的效果“就可以达到这个效果了下面我们正式开始实现1、在removeList的wxml的昵称结构处添加一个点击事件handleAddFriend2、在removeList.js中来实现这个点击事件即可的,并且它也是要提示(让用户选择确认的这种,所以就可以直接copy前面的删除按钮的代码直接把hanleDelMessage函数里面的: wx.showModal({ title: '提示信息', content: '删除消息', confirmText: "删除", success: (res) => { if (res.confirm) { } else if (res.cancel) { console.log('用户点击取消') } } }) } 也就是只用设计在点击了确定之后的一些列操作即可了3、因为要构建好友之间的关系,所以要在user里面加一个friendlist字段才行了,并且这个字段的数据类型是数组的,因为好友肯定不只是一个4、在数据库中给每个人都添加一个friendList字段但是不要忘记了在原来的程序中 初始化 用户的时候也要加上读i这个字段的初始化才行的打开user.js:5、后面的事情大概的逻辑就是:同意了好友申请的话,这个用户的id就会出现在这个用户的friendList数组里面了所以就可以回到removeList.js文件中去了6、通过在开头的时候 设置 const _ = db.command 就可以让这个文件有了运算的能力了handleAddFriend(){ wx.showModal({ title: '提示信息', content: '申请好友', confirmText: "同意", success: (res) => { if (res.confirm) { db.collection('users').doc(app.userInfo._id).update({ data:{ friendList : _.unshift(this.data.messageId) } }).then((res)=>{}); } else if (res.cancel) { console.log('用户点击取消') } } }) } } 在点击消息之后,就可以选择“确定”,点击了之后,就可以在数据库上面看到添加的用户好友了(以上就是第一步,把要申请的用户的id给添加过来了)----但是问题来了,我的主号里面的friendList里面有了这个申请人的id,但是这个申请人在我同意了之后,它的friendList字段里面也应该有我的主号的id才对的---也就是同时添加他们两个的好友关系即可但是能不能通过上面的这种方式,把两个变量之间的值作为交换就可以的,普通的数据库里面是可以这样的。但是在小程序中式不可以这样进行操作的(因为在小程序里面对数据库的访问式有权限的,在客户端是组偶到这样的操作(也就是对其他的账号进行更新操作的话在客户端里面是不允许的---同理也是要在服务端里面来实现的))--也就是要用云函数来实现了7、如果要像的客户端中调用unshift一样的话在服务端里面进行调用的话,之前也搞过就是用一个模板字符串的写法 用Esc下面的那个 “类单引号”的符号来进行包裹就好了 wx.cloud.callFunction({ name : 'update', data : { collection : 'users', doc : this.data.messageId, data : { friendList: ` _.unshift('${app.userInfo._id}')` } } }); 出现的错误就是,我们把unshift也一起搞过来了,也就是我们传过去的字符串没有解析成功主要就是下面这里写错了 data : `{ friendList: _.unshift('${app.userInfo._id}')}` 是把后面整个的串都用一个` .... `来围住的(也就是后面整个的json对象都直接被这个符号扣住的)修改了之后就成功了8、新建一个removeMessage 函数,可以直接copy上面的handledelMessage方法里面的:这个函数主要是为了点击这个消息加好友的时候,可以选择是添加它为好友,就是在点击了添加好友之后,就要把这个消息删掉了,所以这两个地方都用到了这个功能的话,就可以把这个功能封装在removeMesage函数里面,如何直接用this.removeMessage来调用即可了效果就是:点击了添加它为好友之后,这个申请为好友的消息就会被删掉了db.collection('message').where({ userId : app.userInfo._id }).get().then((res)=>{ // console.log(res); let list = res.data[0].list; console.log(list); list = list.filter((val , i)=>{ return val != this.data.messageId }); // console.log(list); wx.cloud.callFunction({ name : 'update', data : { collection : 'message', where : { userId : app.userInfo._id }, data : { list : list } } }).then((res)=>{ this.triggerEvent('myevent',list) }); }); 整体逻辑:1、在removeList.wxml 中的昵称中添加一个点击事件<movable-view bindtap="handleAddFriend" direction="horizontal" class="view">{{ userMessage.nickName }}</movable-view> 2、在removeList.js中队这个点击事件进行渲染 handleAddFriend(){ wx.showModal({ title: '提示信息', content: '申请好友', confirmText: "同意", success: (res) => { if (res.confirm) { db.collection('users').doc(app.userInfo._id).update({ data:{ friendList : _.unshift(this.data.messageId) } }).then((res)=>{}); //其他用户和我构成好友的关系,用到客户端来实现(也就是用云函数来实现) wx.cloud.callFunction({ name : 'update', data : { collection : 'users', doc : this.data.messageId, data : `{ friendList: _.unshift('${app.userInfo._id}')}` } }).then((res)=>{}); this.removeMessage(); } else if (res.cancel) { console.log('用户点击取消') } } }) } 3、点击了接受邀请之后,把这个申请好友的消息删除(和之前实现删除功能一样,就可以直接把这个功能封装到removeMessage这个函数里面removeMessage(){ //也就是点击了确定的话,就不提示这个了,而是删除信息 // 目前没有直接更新的,智能是这个过程就变成了先查询然后再更新 db.collection('message').where({ userId: app.userInfo._id }).get().then((res) => { // console.log(res); let list = res.data[0].list; console.log(list); list = list.filter((val, i) => { return val != this.data.messageId }); // console.log(list); wx.cloud.callFunction({ name: 'update', data: { collection: 'message', where: { userId: app.userInfo._id }, data: { list: list } } }).then((res) => { this.triggerEvent('myevent', list) }); }); 注意:因为我们开通了一个friendList 给每一个用户数据库字段,所以在user.js初始化用户数据库的时候也要加上初始化这个friendList数组才行。

相关文章

  • 一文告诉你16条微信小程序推广渠道大全
    一文告诉你16条微信小程序推广渠道大全

    1、微信搜索推广入口渠道,做小程序SEO (免费)小程序与公众号一样,名称具有唯一性,谁先注册,谁先使用,后面的人就无法再使用这个名称的了。并且认证后得到的推荐权重也相对靠前。根据用户的搜索习惯和产品特性, ......

    2019-07-24 小程序社区
  • 抖音快手离线挂机赚钱,电脑离线挂机赚钱,靠什么赚钱比较长久
    抖音快手离线挂机赚钱,电脑离线挂机赚钱,靠什么赚钱比较长久

    抖音和快手保持无人直播间的方式 不一样,快手直播伴侣必须开展一定的设定,由于此软件默认设置的是横屏,而人们必须将其设定为纵向界面,由于那样更合适手机上web端用户收看。...

    2020-02-11 免费赚钱
  • Kbone原理解析 & 小程序技术选型
    Kbone原理解析 & 小程序技术选型

    转载自微信开放社区:https://developers.weixin.qq.com/community/develop/article/doc/0006a6326b8d38e56b998833456813官方介绍“Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。”Web端框架基本原理首先 ......

    2019-12-13 小程序社区
  • 微信小程序wx:key以及wx:key=" *this"详解
    微信小程序wx:key以及wx:key=" *this"详解

    今天写微信小程序无意中看到控制台给出了这样一行提示:求解百度才知道,给大家分享一下:1.wx:for定义官方文档:在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前 ......

    2019-08-14 小程序社区
  • 微信小程序云端解决方案探索之路
    微信小程序云端解决方案探索之路

    小程序刚推出的时候,很多人都觉得它就是 H5,因为开发小程序的三大语言和 HTML、CSS、JS 是一脉相承的,即使改变了扩展名也改不了其实质。那么小程序的实质到底是不是 H5 呢?经过我们的论证分析,我们认为小程序并 ......

    2019-08-08 小程序社区
  • 小程序页面管理与跳转
    小程序页面管理与跳转

    一个小程序有很多页面,每个页面又有各自的线程、生命周期和功能逻辑。关于小程序的生命周期、页面之间的跳转有哪些特殊的地方呢?小程序的启动小程序启动过程初次进入小程序的时候,微信客户端初始化好宿主环境,同 ......

    2019-02-17 微信小程序联盟
  • 上班时间闲怎么赚点外快 小象优品是什么?开卡就奖励薅30元+3元冲20话费
    上班时间闲怎么赚点外快 小象优品是什么?开卡就奖励薅30元+3元冲20话费

    小象优品是一个购物的app,算得上是一种社交电子的平台吧,我们不但可以在里面购物还可以享受性价比比较高的一些活动。最近这个平台有一个活动,新用户开通销项颜值卡那么送一...

    2020-04-07 游戏网赚
  • uni-app相关知识总结
    uni-app相关知识总结

    一、默认导航栏uni-app默认会提供一个导航栏,即小程序的导航栏,我们不需要进行任何的配置就会显示,默认导航栏的配置同微信小程序,只不过微信小程序的组件是分为.wxml、.wxss、.js、.json四个文件组成,而uni-app ......

    2019-10-13 小程序社区
  • 记《高校考勤系统》小程序(1)
    记《高校考勤系统》小程序(1)

    引言这是我自学小程序并上线的第一个算是完整的项目(其实是♀朋友的毕业设计需求 ),前端萌新一枚.其中肯定会有许多不合理或需要改进的地方请大家指出,谢谢!:sunglasses::sunglasses:(前期准备工作就不介绍啦,我 ......

    2019-11-29 小程序社区
  • 小程序重燃战火,腾讯与阿里激战正酣
    小程序重燃战火,腾讯与阿里激战正酣

    10月9日,阿拉丁指数和阿拉丁小程序数据统计平台发布了2019年9月小程序报告。报告显示,9月份,小程序平台的竞争不仅没有减缓,反而激战正酣。先是微信小程序宣布新增视频广告组件,并支持嵌入腾讯直播,加速流量变 ......

    2019-10-13 小程序社区