五、添加好友
步骤一、通过搜索添加好友
具体效果：
思路：
- 本质上来讲，就是通过输入框得到好友账号信息，之后再数据库中查询，最后返回并渲染查询结果。
- 首先，得到输入框的值，并传递到我们的页面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;
}
![[HBZ分享] 小米手机如何解BL锁](https://img-blog.csdnimg.cn/7974185433104db192cc9f4f871078fb.png)
