微信聊天小程序——（五、添加好友）

五、添加好友

步骤一、通过搜索添加好友

具体效果：

思路：

本质上来讲，就是通过输入框得到好友账号信息，之后再数据库中查询，最后返回并渲染查询结果。
首先，得到输入框的值，并传递到我们的页面data中
当点击搜索按钮的时候，在数据库用户表中查询
查询成功之后，当点击申请添加时，执行添加好友步骤
添加好友成功，返回初始页面

在我们的添加好友页面：

在js文件中：

addFriend(e)

  // 功能：当点击添加好友的时候，创建关于用户和对应好友的聊天表// 思路：1.通过获取对应数组的角标，获取对应的用户信息userList中//      2.将用户和对应好友的用户信息都作为数据库表信息，添加到我们的数据库表中

getValue(e)

 // 功能：获取输入框的值，实时传递给data

search()

// 功能：根据从data中按到的inputValue，在数据表的好友表中查询是否存在这个好友

const app=getApp();
const util= require("../../utils/utils")
Page({data: {},onLoad(options) {},// 功能：获取输入框的值，实时传递给datagetValue(e){console.log(e.detail.value)this.setData({inputValue: e.detail.value})},// 功能：根据从data中按到的inputValue，在数据表的好友表中查询是否存在这个好友search(){var that = this;wx.cloud.database().collection('chat_users1').where({num: Number(that.data.inputValue)}).get({success(res){console.log(res)that.setData({user:res.data[0]})}})},// 功能：当点击添加好友的时候，添加好友
// 思路：1.和好友页面，发出添加好友申请逻辑一样// 功能：当点击添加好友的时候，创建关于用户和对应好友的聊天表// 思路：1.通过获取对应数组的角标，获取对应的用户信息userList中//      2.将用户和对应好友的用户信息都作为数据库表信息，添加到我们的数据库表中
addFriend(e){var that=this;wx.cloud.database().collection("chat_record1").add({data:{userA_faceImg:app.globalData.userInfo.faceImg,//头像userA_id:app.globalData.userInfo._id,//唯一身份标识符userA_nickName:app.globalData.userInfo.nickName,//昵称userB_faceImg:that.data.user.faceImg,//头像userB_id:that.data.user._id,//唯一身份标识符userB_nickName:that.data.user.nickName,//昵称isFriend:0,//是否是好友，0代表发送请求，1代表是好友record:[],//聊天内容进行记录,time:util.formatTime(new Date())},success(res){console.log(res)wx.showToast({title: '发送请求成功',})}})
},})

在wxml文件中：


<input class="input_in" placeholder="请输入账号" bindinput="getValue" type="text" />
<button bindtap="search" type="primary">搜索</button><block><view class="one_row"><view class="photo_text"> <image class="photo" src="{{user.faceImg}}"></image><view >{{user.nickName}}</view></view><view  bindtap="addFriend" class="text">添加好友</view>
</view>

在wxss文件中：

.input_in{padding: 10rpx 10rpx;border: 2rpx solid rgb(180, 196, 196);border-radius: 4rpx;margin: 10rpx 10rpx;
}
.one_row{display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}
.photo{width: 150rpx ;height: 150rpx;border-radius: 50%;margin: 20rpx 20rpx;
}
.photo_text{display: flex;flex-direction: row;align-items: center;
}
.text{margin: 20rpx 20rpx;
}

步骤二、如何避免搜索时重复添加好友

具体效果：

思路：

在显示我们的好友信息的时候进行一个判断
如果在我们的好友记录表中，这个好友的信息存在，说明我们之前发出过好友申请
这个时候，在进行一个判。如果判断结果为isFriend为1，说明已经为好友，这个时候，设置我们本地的data中一个参数fridens，来判断是否我们显示添加好友信息。
通过判断我们与好友的添加状态，我们显示已添加、添加好友、正在申请中等等状态
做一个判断，只有点击添加好友状态的时候，我们才进行添加好友的操作。

在我们搜索页面中：

在js文件：

添加了一个判断好友状态

  getValue(e)// 功能：获取输入框的值，实时传递给dataaddFriend(e)// 功能：当点击添加好友的时候，添加好友
// 思路：1.和好友页面，发出添加好友申请逻辑一样// 功能：当点击添加好友的时候，创建关于用户和对应好友的聊天表// 思路：1.通过获取对应数组的角标，获取对应的用户信息userList中//      2.将用户和对应好友的用户信息都作为数据库表信息，添加到我们的数据库表中

const app=getApp();
const util= require("../../utils/utils")
Page({data: {},onLoad(options) {this.setData({})},// 功能：获取输入框的值，实时传递给datagetValue(e){console.log(e.detail.value)this.setData({inputValue: e.detail.value})},// 功能：根据从data中按到的inputValue，在数据表的好友表中查询是否存在这个好友search(){var that = this;wx.cloud.database().collection('chat_users1').where({num: Number(that.data.inputValue)}).get({success(res){console.log(res)that.setData({user:res.data[0]})//功能：当我们搜寻到好友账号的时候，判断我们与好友的状态。查询chat_record，看是否之前已经有记录// 思路 1.拿到这个好友的_id，判断我们好友聊天表中，A或者B，的_id是否相同//     2.如果相同，说明我们有了申请信息。//     3.如果没有，说明没有申请信息。这个时候显示添加好友信息,使用参数fridens为false表示。//     4.如果有，再次进行判断我们的isFriend的状态。如果值为1，说明已经是是好友。否则为正在申请中。加isRequest参数判断。  const _ = wx.cloud.database().commandwx.cloud.database().collection("chat_record1").where(_.or([{userA_id: res.data[0]._id,},{userB_id: res.data[0]._id,}])).get({success(ress){console.log(ress)if(ress.data.length>0){//有记录了if(ress.data[0].isFriend == 0){console.log('进来了')that.setData({isFriend:true,isRequest:true})}else{that.setData({isFriend:true,isRequest:false})}}else{that.setData({isFriend:false})}}})}})},// 功能：当点击添加好友的时候，添加好友
// 思路：1.和好友页面，发出添加好友申请逻辑一样// 功能：当点击添加好友的时候，创建关于用户和对应好友的聊天表// 思路：1.通过获取对应数组的角标，获取对应的用户信息userList中//      2.将用户和对应好友的用户信息都作为数据库表信息，添加到我们的数据库表中
addFriend(e){var that=this;wx.cloud.database().collection("chat_record1").add({data:{userA_faceImg:app.globalData.userInfo.faceImg,//头像userA_id:app.globalData.userInfo._id,//唯一身份标识符userA_nickName:app.globalData.userInfo.nickName,//昵称userB_faceImg:that.data.user.faceImg,//头像userB_id:that.data.user._id,//唯一身份标识符userB_nickName:that.data.user.nickName,//昵称isFriend:0,//是否是好友，0代表发送请求，1代表是好友record:[],//聊天内容进行记录,time:util.formatTime(new Date())},success(res){console.log(res)wx.navigateBack({success(){wx.showToast({title: '发送请求成功',})}})}})
},})

在wxml文件中：


<input class="input_in" placeholder="请输入账号" bindinput="getValue" type="text" />
<button bindtap="search" type="primary">搜索</button><block><view class="one_row"><view class="photo_text"> <image class="photo" src="{{user.faceImg}}"></image><view >{{user.nickName}}</view></view><view wx:if="{{isFriend == true && isRequest == true}}"   class="text">申请中</view><view  wx:if="{{isFriend == true && isRequest == false}}"   class="text">已为好友</view><view wx:if="{{isFriend == false}}" bindtap="addFriend" class="text">添加好友</view>
</view></block>

在wxss文件中：

.input_in{padding: 10rpx 10rpx;border: 2rpx solid rgb(180, 196, 196);border-radius: 4rpx;margin: 10rpx 10rpx;
}
.one_row{display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}
.photo{width: 150rpx ;height: 150rpx;border-radius: 50%;margin: 20rpx 20rpx;
}
.photo_text{display: flex;flex-direction: row;align-items: center;
}
.text{margin: 20rpx 20rpx;
}

微信聊天小程序——（五、添加好友）相关推荐

使用chatgpt实现微信聊天小程序(秒回复)，github开源(附带链接)
文章目录前言效果展示原理说明服务器端代码说明微信小程序代码说明代码链接总结前言我在前一段时间突发奇想,就使用java来调用chatgpt的接口,然后写了一个简单小程序,也上了热榜第一 ...
微信聊天小程序——（二、账号的注册与登录）
具体效果: 目录二.账号的注册与登录步骤一.获取用户信息步骤二.用户输入账号密码(在注册页面中) 步骤三.将获取到的值放到我们的数据库中(在注册页面中) 步骤四.登录的页面逻辑步骤五.登录页面 ...
微信聊天小程序——（三、获取好友列表）
三.获取好友列表步骤一.展示所有好友的推荐列表(friends页面) 具体效果: 实现思路: 我们有我们的用户数据库表即:uers 循环我们的数据库用户表,达到所有的用户信息,即:userList ...
springboot md5加密_实在！基于Springboot和WebScoket，写了一个在线聊天小程序
基于Springboot和WebScoket写的一个在线聊天小程序 (好几天没有写东西了,也没有去练手了,就看了看这个...) 项目说明此项目为一个聊天的小demo,采用springboot+web ...
javaweb通过iis实现域账号免登陆_聊天小程序的Java实现
登陆界面注册账号找回密码重设密码聊天界面多人聊天一. 设计任务 1.1设计意义 <Java基础入门>课程设计是对学生的一种全面综合训练,它包括问题分析,用户界面设计,程序设计基 ...
微信社区小程序源码/h5/圈子论坛贴吧交友/博客/陌生人社交/宠物/话题/私域/同
源码介绍: 今天学习小程序开发的时候,遇到这么一个非常不错的小程序,前端后端完善,也是少许花了点钱,不过免费分享给咱们锦尚中国的会员们了(外面都是要花钱购买才可以下载的,拿去学习学习吧,对自己提升很有 ...
微信weixin小程序开发源码资源学习教程汇总
微信weixin小程序开发源码资源学习教程汇总目录官方文档工具插件教程视频教程文章组件 Demo 置顶 WePY:组件化的小程序开发框架 ? WePY 开发资源汇总 ? 官方文档小程 ...
付费社群聊天小程序V1.4.5+前端
简介: 付费社群聊天小程序V1.4.5+前端备注:不用重新上传小程序1,修复购买会员分享分佣BUG社群小程序,通过微信群裂变,社群营销,知识付费以及社群电商可实现粉丝营销闭环,玩转社群运营.一.自 ...
马化腾怒怼张一鸣；中兴产品下架；微信整改小程序 | CSDN 极客头条
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 「CSDN 极客头条」是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报 ...
python 微信自动回复小程序
#微信自动回复小程序,需要pip安装itchat,codesc,祝福语可以自己调整,数量自定,i_wm = int(round(random.random()*30,0))调整30的数量即可. #运行 ...

微信聊天小程序——（五、添加好友）

五、添加好友

步骤一、通过搜索添加好友

步骤二、如何避免搜索时重复添加好友

微信聊天小程序——（五、添加好友）相关推荐

最新文章

热门文章