Day10-微信小程序实战-交友小程序-创建friendList字段实现好友关系（添加好友功能）--内附代码

回顾：之前我们进行了删除的功能，以及对message消息的增删，下面实现添加好友的功能

我们先在数据库中，在message这个字段的list里面，添加上测试号的id，就是模拟这个两个测试号要加我主号的效果“

 

 

 

就可以达到这个效果了

 

下面我们正式开始实现

1、在removeList的wxml的昵称结构处添加一个点击事件handleAddFriend

2、在removeList.js中来实现这个点击事件即可的，并且它也是要提示（让用户选择确认的这种，所以就可以直接copy前面的删除按钮的代码

 直接把hanleDelMessage函数里面的：

   wx.showModal({
        title: '提示信息',
        content: '删除消息',
        confirmText: "删除",
        success: (res) => {
          if (res.confirm) {
            
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }

也就是只用设计在点击了确定之后的一些列操作即可了

3、因为要构建好友之间的关系，所以要在user里面加一个friendlist字段才行了，并且这个字段的数据类型是数组的，因为好友肯定不只是一个

4、在数据库中给每个人都添加一个friendList字段

 

 但是不要忘记了在原来的程序中 初始化 用户的时候也要加上读i这个字段的初始化才行的

打开user.js：

 

5、后面的事情大概的逻辑就是：同意了好友申请的话，这个用户的id就会出现在这个用户的friendList数组里面了

所以就可以回到removeList.js文件中去了

6、通过在开头的时候 设置 const _ = db.command 就可以让这个文件有了运算的能力了

handleAddFriend(){
      wx.showModal({
        title: '提示信息',
        content: '申请好友',
        confirmText: "同意",
        success: (res) => {
          if (res.confirm) {
              db.collection('users').doc(app.userInfo._id).update({
                data:{
                    friendList : _.unshift(this.data.messageId)
                }
              }).then((res)=>{});
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }

 

 

在点击消息之后，就可以选择“确定”，点击了之后，就可以在数据库上面看到添加的用户好友了

（以上就是第一步，把要申请的用户的id给添加过来了）----但是问题来了，我的主号里面的friendList里面有了这个申请人的id，但是这个申请人在我

同意了之后，它的friendList字段里面也应该有我的主号的id才对的---也就是同时添加他们两个的好友关系即可

 

 但是能不能通过上面的这种方式，把两个变量之间的值作为交换就可以的，普通的数据库里面是可以这样的。但是在小程序中式不可以这样进行操作的

（因为在小程序里面对数据库的访问式有权限的，在客户端是组偶到这样的操作

（也就是对其他的账号进行更新操作的话在客户端里面是不允许的---同理也是要在服务端里面来实现的））

--也就是要用云函数来实现了

7、如果要像的客户端中调用unshift一样的话在服务端里面进行调用的话，之前也搞过就是用一个模板字符串的写法 用Esc下面的那个 “类单引号”的符号

来进行包裹就好了

 wx.cloud.callFunction({
            name : 'update',
            data : {
              collection : 'users',
              doc : this.data.messageId,
              data : {
                friendList: ` _.unshift('${app.userInfo._id}')`
              }
            }
          });

 

 出现的错误就是，我们把unshift也一起搞过来了，也就是我们传过去的字符串没有解析成功

 主要就是下面这里写错了

 data : `{ friendList:  _.unshift('${app.userInfo._id}')}`

是把后面整个的串都用一个`   ....   `来围住的（也就是后面整个的json对象都直接被这个符号扣住的）

 

修改了之后就成功了

 

8、新建一个removeMessage 函数，可以直接copy上面的handledelMessage方法里面的：这个函数主要是为了点击这个消息加好友的时候，可以选择是

添加它为好友，就是在点击了添加好友之后，就要把这个消息删掉了，所以这两个地方都用到了这个功能的话，就可以把这个功能封装在removeMesage函数里面，如何直接用this.removeMessage来调用即可了

效果就是：点击了添加它为好友之后，这个申请为好友的消息就会被删掉了

 

 

db.collection('message').where({
            userId : app.userInfo._id
          }).get().then((res)=>{
              // console.log(res);
              let list = res.data[0].list;
            console.log(list);
              list = list.filter((val , i)=>{
                  return val != this.data.messageId
              });
              // console.log(list);
              wx.cloud.callFunction({
                name : 'update',
                data : {
                  collection : 'message',
                  where : {
                    userId : app.userInfo._id
                  },
                  data : {
                    list : list
                  }
                }
              }).then((res)=>{
                this.triggerEvent('myevent',list) 
              });
          });

 

 整体逻辑：

1、在removeList.wxml 中的昵称中添加一个点击事件 

<movable-view bindtap="handleAddFriend" direction="horizontal" class="view">{{ userMessage.nickName }}</movable-view>

2、在removeList.js中队这个点击事件进行渲染

 handleAddFriend(){
      wx.showModal({
        title: '提示信息',
        content: '申请好友',
        confirmText: "同意",
        success: (res) => {
          if (res.confirm) {
              db.collection('users').doc(app.userInfo._id).update({
                data:{
                    friendList : _.unshift(this.data.messageId)
                }
              }).then((res)=>{});

          //其他用户和我构成好友的关系，用到客户端来实现（也就是用云函数来实现）
          wx.cloud.callFunction({
            name : 'update',
            data : {
              collection : 'users',
              doc : this.data.messageId,
              data : `{ friendList:  _.unshift('${app.userInfo._id}')}`
            }
          }).then((res)=>{});
          this.removeMessage();
          } else if (res.cancel) {
            console.log('用户点击取消')

          }
        }
      })
    }

3、点击了接受邀请之后，把这个申请好友的消息删除（和之前实现删除功能一样，就可以直接把这个功能封装到removeMessage这个函数里面

removeMessage(){
      //也就是点击了确定的话，就不提示这个了，而是删除信息
      //  目前没有直接更新的，智能是这个过程就变成了先查询然后再更新
      db.collection('message').where({
        userId: app.userInfo._id
      }).get().then((res) => {
        // console.log(res);
        let list = res.data[0].list;
        console.log(list);
        list = list.filter((val, i) => {
          return val != this.data.messageId
        });
        // console.log(list);
        wx.cloud.callFunction({
          name: 'update',
          data: {
            collection: 'message',
            where: {
              userId: app.userInfo._id
            },
            data: {
              list: list
            }
          }
        }).then((res) => {
          this.triggerEvent('myevent', list)
        });
      });

注意：因为我们开通了一个friendList 给每一个用户数据库字段，所以在user.js初始化用户数据库的时候也要加上初始化这个friendList数组才行