微信聊天小程序——（五、添加好友）

星^0^星

已于 2022-08-06 21:39:35 修改

阅读量4.6k

点赞数

分类专栏：聊天小程序文章标签：微信小程序前端

于 2022-08-04 23:06:36 首次发布

本文链接：https://blog.csdn.net/qq_54462755/article/details/126167836

版权

聊天小程序专栏收录该内容

7 篇文章 15 订阅

订阅专栏

五、添加好友

步骤一、通过搜索添加好友

具体效果：

思路：

本质上来讲，就是通过输入框得到好友账号信息，之后再数据库中查询，最后返回并渲染查询结果。
首先，得到输入框的值，并传递到我们的页面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) {

  },

  // 功能：获取输入框的值，实时传递给data
  getValue(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)
    // 功能：获取输入框的值，实时传递给data
   addFriend(e)
  // 功能：当点击添加好友的时候，添加好友
// 思路：1.和好友页面，发出添加好友申请逻辑一样

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

const app=getApp();
const util= require("../../utils/utils")
Page({


  data: {

  },


  onLoad(options) {
    this.setData({

    })

  },

  // 功能：获取输入框的值，实时传递给data
  getValue(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().command
        wx.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;
}