Day10-微信小程式實戰-交友小程式-建立friendList欄位實現好友關係（新增好友功能）--內附程式碼
回顧：之前我們進行了刪除的功能，以及對message訊息的增刪，下面實現新增好友的功能
我們先在資料庫中，在message這個欄位的list裡面，新增上測試號的id，就是模擬這個兩個測試號要加我主號的效果“
就可以達到這個效果了
下面我們正式開始實現
1、在removeList的wxml的暱稱結構處新增一個點選事件handleAddFriend
2、在removeList.js中來實現這個點選事件即可的，並且它也是要提示（讓使用者選擇確認的這種，所以就可以直接copy前面的刪除按鈕的程式碼
直接把hanleDelMessage函式裡面的：
wx.showModal({
title: '提示資訊',
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: '申請好友',
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陣列才行