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

这篇具有很好参考价值的文章主要介绍了微信聊天小程序——(三、获取好友列表)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

三、获取好友列表

步骤一、展示所有好友的推荐列表(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文件中:



<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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包