Day10-微信小程序實戰-交友小程序-創建friendList字段實現好友關係（添加好友功能）–內附代碼

Posted on 2020-08-132020-08-13 by admin

回顧：之前我們進行了刪除的功能，以及對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數組才行

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司"嚨底家"!

※新北清潔公司,居家、辦公、裝潢細清專業服務

※推薦評價好的iphone維修中心

近期文章

標籤