三、获取好友列表
步骤一、展示所有好友的推荐列表(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.index
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.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=this
console.log(e.currentTarget.dataset.index)
const index=e.currentTarget.dataset.index
wx.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。 - 注意
在页面展示的时候都要调用,以便于我们直接显示好友。
在我们的好友页面中:
js文件:
const app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
onShow(){
this.getAllUser();
this.myFriends();
// 功能:当每次打开的时候,我们渲染好友页面的时,需要有一个判断,这个时候要用到userinfo
this.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.index
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.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().command
wx.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文件中:文章来源:https://www.toymoban.com/news/detail-486269.html
<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文件中:文章来源地址https://www.toymoban.com/news/detail-486269.html
.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;
}
到了这里,关于微信聊天小程序——(三、获取好友列表)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!