微信聊天小程序——（三、获取好友列表）

三、获取好友列表

步骤一、展示所有好友的推荐列表（friends页面）

具体效果：
在这里插入图片描述

实现思路：

我们有我们的用户数据库表即：uers
循环我们的数据库用户表，达到所有的用户信息，即：userList
利用云函数拿到我们的userList，赋值给data，之后再页面中显示出来
显示的时候，注意用 onLoad调用，因为每次页面打开都需要加载

注意：因为好友列表在每一次打开页面的时候都要加载，所以，我们写在页面函数中。

在js文件中：

// pages/friends/friends.js
Page({/*** 页面的初始数据*/data: {},//在每次页面加载的时候进行调用onLoad(options) {this.getAllUser();},// 功能：获取所有的用户信息getAllUser(){var that=this;wx.cloud.database().collection("chat_users1").get({success(res){console.log(res)that.setData({userList:res.data})}})}})

在wxml文件中

<button>附近好友</button>
<view >
<button class="myfriends">我的好友</button>
</view>//写一个block，经常用来接收一堆相同的数据
<block class="list_fox" wx:for="{{userList}}">//里面的图片和文本用view标签包裹，为了view在一行显示
<view class="list_item">
<image class="ima" src="{{item.faceImg}}"></image>
<view class="name">{{item.nickName}}</view>
</view></block>

在wxss样式文件中

.myfriends{margin-left: 10rpx;}
.ima{width: 120rpx ;height: 120rpx;border-radius: 50%;
}
.list_item{margin: 10rpx 10rpx;padding: 10rpx;display: flex;flex-direction: row;align-items: center;
}
.name{margin: 10rpx 10rpx 10rpx 30rpx;
}

具体效果演示：

在这里插入图片描述

步骤二、修饰好友页面

效果：

在这里插入图片描述

思路：

主要是样式部分
页面的数据已经在上一个步骤中已经获取，即，userList
这个页面进行调用就行
调用的时候，使用block组件，循环我们获取到的用户表

在wxml文件中：

<view>推荐好友：</view><block class="list_fox" wx:for="{{userList}}"><view class="list_item"><view class="left"><image class="ima" src="{{item.faceImg}}"></image><view class="name">{{item.nickName}}</view></view><view class="right">添加好友</view></view></block><view>我的好友：</view>

在js文件中：

// pages/friends/friends.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getAllUser();},// 功能：获取所有的用户信息getAllUser(){var that=this;wx.cloud.database().collection("chat_users1").get({success(res){console.log(res)that.setData({userList:res.data})}})}})

在wxss文件中：

注意这个时候，我们设计样式的思路：

一行有两个盒子，左边一个，右边一个。

其中，左边的盒子里有两个小盒子。

在这里插入图片描述

.myfriends{margin-left: 10rpx;}
.ima{width: 120rpx ;height: 120rpx;border-radius: 50%;
}
.list_item{margin: 10rpx 10rpx;padding: 10rpx;display: flex;flex-direction: row;}
.name{margin: 10rpx 10rpx 10rpx 30rpx;
}
.left{display: flex;flex-direction: row;}
.right{margin: 10rpx 0rpx 0rpx 350rpx;
}

步骤三、添加好友

具体效果：

在这里插入图片描述

思路：

本质上是建立一个新的聊天记录表，在这个表格中进行操作.
这个表格有的参数
聊天记录
是否为好友
双方信息
当然有_id_
当一方发出请求时，建立一个聊天记录表
聊天记录空数组
是否为好友0
双方信息 userA和userB
当登录另外一个账号的时候，从对方的“我的好友”页面，能收到消息
_在我的新朋友页面本质上就是：查询是否有人发出好友验证信息，即，userB的_id是否等于此账号的_id，并且isfriend是否为0
将获取到的相应的聊天表赋值给本页的data，同时在页面中显示。
如果点击“同意添加好友”，就意味着向我们的聊天记录表中，查询自己是被邀请方，升级我们的好友状态isfriend为1。

首先是我们的friend页面中

在js文件中：

两个主要函数

getNewFriends()

 // 功能：当点击新的朋友的时候，跳转到新的朋友页面

addFriend(e)

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

const app=getApp()
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getAllUser();},// 功能：获取所有的用户信息getAllUser(){var that=this;wx.cloud.database().collection("chat_users1").get({success(res){console.log(res)that.setData({userList:res.data})}})},// 功能：当点击新的朋友的时候，跳转到新的朋友页面getNewFriends(){wx.navigateTo({url: '/pages/newFridends/newFridends',})},// 功能：当点击添加好友的时候，创建关于用户和对应好友的聊天表
// 思路：1.通过获取对应数组的角标，获取对应的用户信息userList中
//      2.将用户和对应好友的用户信息都作为数据库表信息，添加到我们的数据库表中addFriend(e){// // 功能：当点击添加好友的时候，判断是否登录，只有登录才可以添加好友// if(!app.globalData. userInfo){//   wx.showToast({//     icon:"none",//     title: '请登录',//   })// }console.log(e.currentTarget.dataset.index)//查看点击情况var index=e.currentTarget.dataset.indexvar 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.userList[index].faceImg,//头像userB_id:that.data.userList[index]._id,//唯一身份标识符userB_nickName:that.data.userList[index].nickName,//昵称isFriend:0,//是否是好友，0代表发送请求，1代表是好友record:[]//聊天内容进行记录},success(res){console.log(res)wx.showToast({title: '发送请求成功',})}})}})

在wxml文件中：

<view bindtap="getNewFriends">新的朋友：</view>
<view>推荐好友：</view><block class="list_fox" wx:for="{{userList}}"><view class="list_item"><view class="left"><image class="ima" src="{{item.faceImg}}"></image><view class="name">{{item.nickName}}</view></view><view class="right" bindtap="addFriend" data-index="{{index}}">添加好友</view></view></block><view>我的好友：</view>

在wxss文件中：

.myfriends{margin-left: 10rpx;}
.ima{width: 120rpx ;height: 120rpx;border-radius: 50%;
}
.list_item{margin: 10rpx 10rpx;padding: 10rpx;display: flex;flex-direction: row;}
.name{margin: 10rpx 10rpx 10rpx 30rpx;
}
.left{display: flex;flex-direction: row;}
.right{margin: 10rpx 0rpx 0rpx 350rpx;
}

其次是我们的newfriends页面

在我们的js文件中：

addFriend_yes(e)

// 功能：当点击同意的时候，更新聊天表格中的信息，确认添加为好友。
// 思路：1.先获取具体是同意哪一个好友的验证，使用index.
//            2.根据我们点击的具体好友的的信息记录情况，获取两人好友信息。
//            3.更新其中的好友状态信息

getNewFriends()

  // 功能：当打开页面的时候，加载所有的新的朋友// 思路：1.获取自己的_id//             2.在我们的聊天记录表中查询，当userB_id和我们自身的_id一样的时候，我们就获取到了关于申请好友的信息//             3.将获取到的信息表赋值给本页的data中，在wxml页面中渲染

注意在页面开始加载的时候就要调用我们的getNewFriends()函数。

const app=getApp()
Page({data: {},onLoad(options) {this.getNewFriends();},// 功能：当打开页面的时候，加载所有的新的朋友// 思路：1.获取自己的_id//       2.在我们的聊天记录表中查询，当userB_id和我们自身的_id一样的时候，我们就获取到了关于申请好友的信息//       3.将获取到的信息表赋值给本页的data中，在wxml页面中渲染getNewFriends(){var that=this;console.log(app.globalData.userInfo._id)wx.cloud.database().collection("chat_record1").where({userB_id:app.globalData.userInfo._id,isFriend:0,}).get({success(res){that.setData({newFridendsList:res.data})console.log(res)}})},// 功能：当点击同意的时候，更新聊天表格中的信息，确认添加为好友。
// 思路：1.先获取具体是同意哪一个好友的验证，使用index.
//      2.根据我们点击的具体好友的的信息记录情况，获取两人好友信息。
//      3.更新其中的好友状态信息addFriend_yes(e){var that=thisconsole.log(e.currentTarget.dataset.index)const index=e.currentTarget.dataset.indexwx.cloud.database().collection("chat_record1").doc(that.data.newFridendsList[index]._id).update({data:{isFriend:1},success(res){wx.switchTab({url: '/pages/friends/friends',})wx.showToast({title: '添加成功',})console.log(res)}})}})

在wxml文件中：

 <block wx:for="{{newFridendsList}}"><view class="img-zh" ><view class="left"><image class="img" src="{{item.userA_faceImg}}"></image><view class="img-text">{{item.userA_nickName}}</view>    </view><view class="right" bindtap="addFriend_yes" data-index="{{index}}">同意</view></view>
</block>

在我们的样式文件wxss文件中：

.img-zh{display: flex;flex-direction: row;height: 120rpx;margin: 10rpx 10rpx 0rpx 20rpx;justify-content: space-between;}
/*头像图片样式 */
.img{border-radius: 50%;height: 100rpx;width: 100rpx;margin-top: 10rpx;
}
/* 账号显示样式 */
.img-text{margin: 40rpx;
}
.left{display: flex;flex-direction: row;
}
.right{margin: 45rpx 20rpx 0rpx 5rpx;
}

#####步骤四、我的好友页面渲染

具体效果：

在这里插入图片描述

思路：

本质
查询满足条件的聊天表
isfriend
userA_id或者userB_id。因为A和B主要是看谁先发出申请，发出之后，就用这张表。
方法
同时查询两类条件
渲染(wxml)
将返回到的列表，给本页的data中
我的好友页面，展示的是我的好友，而不是我。所以，userA或者userB都可能是我们的好友。因此，进行一个判断，如果是我们自己的时候，暂时另外一个user。
注意
在页面展示的时候都要调用,以便于我们直接显示好友。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOqJbChu-1659623322426)(C:\Users\xieyahao\AppData\Roaming\Typora\typora-user-images\image-20220801223323842.png)]$

在我们的好友页面中：

js文件：

const app=getApp()
Page({/*** 页面的初始数据*/data: {},onShow(){this.getAllUser();this.myFriends();// 功能：当每次打开的时候，我们渲染好友页面的时，需要有一个判断，这个时候要用到userinfothis.setData({userInfo:app.globalData.userInfo})},/*** 生命周期函数--监听页面加载*/onLoad(options) {//  this.getAllUser();},// 功能：获取所有的用户信息getAllUser(){var that=this;wx.cloud.database().collection("chat_users1").get({success(res){console.log(res)that.setData({userList:res.data})}})},// 功能：当点击新的朋友的时候，跳转到新的朋友页面getNewFriends(){wx.navigateTo({url: '/pages/newFridends/newFridends',})},// 功能：当点击添加好友的时候，创建关于用户和对应好友的聊天表
// 思路：1.通过获取对应数组的角标，获取对应的用户信息userList中
//      2.将用户和对应好友的用户信息都作为数据库表信息，添加到我们的数据库表中addFriend(e){// // 功能：当点击添加好友的时候，判断是否登录，只有登录才可以添加好友// if(!app.globalData. userInfo){//   wx.showToast({//     icon:"none",//     title: '请登录',//   })// }console.log(e.currentTarget.dataset.index)//查看点击情况var index=e.currentTarget.dataset.indexvar 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.userList[index].faceImg,//头像userB_id:that.data.userList[index]._id,//唯一身份标识符userB_nickName:that.data.userList[index].nickName,//昵称isFriend:0,//是否是好友，0代表发送请求，1代表是好友record:[]//聊天内容进行记录},success(res){console.log(res)wx.showToast({title: '发送请求成功',})}})},// 功能：当我的好友页面展示的时候，显示出我的好友// 思路：1.查询聊天表中，A或B为我们userinfo相同_id同时，好友状态为1。注意这个时候可以用command.or//      2.将满足条件的值给到我们本页的data中//      3.渲染的时候，进行判断，因为A和B都可能是我们的好友，所以，当某个是我们好友的时候，不在本页渲染。myFriends(){var that = this;const _ = wx.cloud.database().commandwx.cloud.database().collection("chat_record1").where(_.or([{userA_id:app.globalData.userInfo._id,isFriend:1},{userB_id:app.globalData.userInfo._id,isFriend:1}])).get({success(res){console.log(res)that.setData({myFriendsList:res.data})}})},})

在wxml文件中：

<view bindtap="getNewFriends">新的朋友：</view>
<view>推荐好友：</view><block class="list_fox" wx:for="{{userList}}"><!-- <block wx:if="{{userInfo._id==item._id}}"> --><view class="list_item"><view class="left"><image class="ima" src="{{item.faceImg}}"></image><view class="name">{{item.nickName}}</view></view><view class="right" bindtap="addFriend" data-index="{{index}}">添加好友</view></view><!-- </block> --></block><view>我的好友：</view><block class="list_fox" wx:for="{{myFriendsList}}"><view  class="list_item"><!-- 其中的一个条件 --><block wx:if="{{userInfo._id==item.userA_id}}"><view class="left"><image class="ima" src="{{item.userB_faceImg}}"></image><view class="name">{{item.userB_nickName}}</view></view></block><!-- 其中的另外一个条件 --><block wx:if="{{userInfo._id==item.userB_id}}"><view class="left"><image class="ima" src="{{item.userA_faceImg}}"></image><view class="name">{{item.userA_nickName}}</view></view></block></view></block>

在wxss文件中：

.myfriends{margin-left: 10rpx;}
.ima{width: 120rpx ;height: 120rpx;border-radius: 50%;
}
.list_item{margin: 10rpx 10rpx;padding: 10rpx;display: flex;flex-direction: row;}
.name{margin: 10rpx 10rpx 10rpx 30rpx;
}
.left{display: flex;flex-direction: row;}
.right{margin: 10rpx 0rpx 0rpx 350rpx;
}