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

页面的数据已经在上一个步骤中已经获取，即，userList。调用的时候，使用block组件，循环我们获取到的用户表。一行有两个盒子，左边一个，右边一个。#####步骤四、我的好友页面渲染。其中，左边的盒子里有两个小盒子。在wxss样式文件中。这个页面进行调用就行。.........

星^0^星

6799人浏览 · 2022-08-04 22:48:25

星^0^星 · 2022-08-04 22:48:25 发布

三、获取好友列表

步骤一、展示所有好友的推荐列表（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。
注意
在页面展示的时候都要调用,以便于我们直接显示好友。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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();
    // 功能：当每次打开的时候，我们渲染好友页面的时，需要有一个判断，这个时候要用到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文件中：



<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;
}