Day11-微信小程序實戰-交友小程序-好友詳情頁+好友列表頁面

前期回顧：我們給每個用戶的數據庫都添加了一個friendList字段這個是一個數組的字段，用來保存他的好友的id，然后通過點擊消息列表中的

昵稱，就可以添加這個好友了，然后點擊添加好友之后，就會把這個消息刪掉，在數據庫中申請人和被申請人都會看到對方的id出現在自己的friendList字段里面的

也就是構成了一個相互的好友關系了

 

 

 

 

下面就是根據好友的關系，我們來設置其他的東西， 比如我和你是好友的話，在好友的詳情頁里面噢可以看到你設置的手機號和微信號，但是看不到最上面的添加好友的按鈕了，反之，不是好友的話就相反了，

就可以直接在 詳情頁 detail中操作了

我們開始的時候就在detail.js文件里面定義了一個 isFriend 字段了，用來判斷他們之間是不是好友關系，然后在wxml中在微信號和手機號中也做一下這樣的判斷，用來表示顯示還是不顯示

 <text>手機號：</text>
    <block wx:if="{{ isFriend }}">
      <text class="detail-phoneNumber">{{ detail.phoneNumber }}  </text>
       <call-phone phoneNumber="{{ detail.phoneNumber }}" />
    </block>
    <text wx:else>僅好友可見</text>

就可以通過這樣，添加了好友就可以看到微信號和手機號了，沒添加的話，顯示的就是“僅好友可見"

 

糾正一下之前的一個錯誤：

就是從消息message頁面點擊查看用戶的詳情頁的惡化，在detail.js onload里面的options打印出來的話，里面的參數是userId，但是從主頁index點進用戶的詳情頁的話打印出來的options是userID，也就是報錯為是因為

 

 因為兩個情況分別是 userID 和userId，所以就是主頁index和message頁傳給詳情頁detail的參數名是不同的，所以在檢查的時候就發現

在index.js 的handle中：

寫錯了，要改成userId才行的，就可以在主頁index中訪問詳情頁也可以在消息message中查看詳情頁了

 

接着來：

在detail.js文件中在onload里面的話，也就是一進去就判斷用戶是不是和這個人是好友的關系，因為從外面傳進來的我們在里面獲取了用戶的數據庫，

用res.data表示了，里面也包括了friendList的，商業我們就可以用數組的includes方法來看我們用戶的id在不在這個數組里面即可了

 

效果圖：

 

 

 優化一下，下面的手機號和微信號假如用戶沒寫的話，還是會看到后面的兩個圖標的，優化的話就是只有微信號和手機號是存在的時才會顯示分別的圖標的

 

 

接下來就是隊，個人中心-》個人主頁中進行處理，目前點進去的話會報錯，並且還是空白的狀態的：

 

 這個就是跳轉到detail中的，但是要帶上本身用戶的id：

 <navigator url="{{ '../detail/detail?userId=' + id }}" open-type="navigate">
      <view class="user-list-item">
        <text>個人主頁</text>
        <text class="iconfont iconyoujiantou"></text>
      </view>
 </navigator>

這里的id，我們在user.js設置一下變量，然后在下面的函數中，就隊這個id進行賦值就可以了

得到的效果：（就好像是一個陌生人進去一下，所以還要進行優化）

 

 

 

 因為自己的好友列表里面還有自己的，所以在detail.js的onload函數里面的話，是不會走if里面的語句，而是會走else的語句的　　，

onLoad: function (options) {
     console.log( options );

    let userId = options.userId;
    db.collection('users').doc(userId).get().then((res)=>{
      console.log(res);
      this.setData({
        detail :　res.data
      });
      let friendList = res.data.friendList;
      if ( friendList.includes(app.userInfo._id )){
        this.setData({
          isFriend : true
        });
      }
      else{
        this.setData({
          isFriend : false
        },()=>{
          if ( userId == app.userInfo._id){
            // 當前用戶看自己的詳情頁的時候
            this.setData({
              isFriend : true ,
              isHidden : true 
            });
          }
        });
      }
    });
  },

 

所以就可以在else里面進行處理了，不僅要設置”自己就是自己的好友“還要設置把上面的按鈕隱藏起來了

所以就可以在detail.js文件里面另外定義一個 isHidden 來控制上面的按鈕是否會被隱藏了

<block wx:if="{{ !isHidden }}">
 <button wx:if="{{ isFriend }}">已是好友</button>
  <button wx:else bindtap="handleAddFriend">添加好友</button>
</block>

效果圖：

 

以上就是根據不同的好友關系（或者看自己的主頁）這樣看到的不同內容的渲染了

 

二、完成查看好友列表頁面（我的頁面-》查看好友列表）

---也就是把用戶的好友查詢出來，然后渲染到這個頁面里面就可以了

還是先做布局

具體的好友列表，我們可以使用之前的編輯edituserInofo頁面的布局來使用

就是這樣的：

 <navigator url="./name/name" open-type="navigate">
      <view class="editUserInfo-list-item">
        <text>修改昵稱</text>
        <text class="iconfont iconyoujiantou"></text>
      </view>
 </navigator>

這個就可以作為一個基本結構了，wxss代碼也是可以直接參考編輯頁面edit的wxss

 

<!--miniprogram/pages/friendList/friendList.wxml-->
<view class="friendList">
  <text>好友列表：</text>
   <navigator url="" open-type="navigate">
      <view class="friendList-item">
        <view>
         <image src="" />
         <text>昵稱</text>
        </view>
        <text class="iconfont iconyoujiantou"></text>
      </view>
     </navigator>
</view>

/* miniprogram/pages/friendList/friendList.wxss */
.friendList{margin-top: 40rpx;}
.friendList-item{
  /* 這里可以直接把user.wxss中的樣式復印過來了 */
  height: 120rpx;border-bottom:1px #b4b5b6 dashed;
padding: 10rpx; display: flex;align-items: center;justify-content: space-between;
}
.friendList-item view{display : flex; align-items: center;}
.friendList-item image{width: 100rpx;height: 100rpx;border-radius: 50%;}

得到一個基本的布局：

 

最左邊就是一個用戶的頭像了，這里還沒得到，就是一個空白了

就可以開始搞邏輯的部分了，先把好友給查詢出來即可了，就可以設置一個 friendList數組了，然后在onready當中給這個數組設置值了

由於我們要從自己的數據庫中的friendList字段里面把我們的好友id讀出來的話，這是一次查詢了，然后又要帶着這個查詢到的好友id進行查詢

得到這個id的信息的話，這也是一次查詢了，也就是說要進行兩次查詢才可以的，但是這其實是可以優化的，沒必要兩次查詢的

也就是我們可以直接找其他的用戶下面的friendlist有沒有我的id，如果有得話，說明它就是我得好友，也就可以把他得信息給打印出來了，這個

過程我們就只用隊數據庫查詢一次就行了，把滿足得用戶都找出來，放在一個數組里面，就是我們想要得到的所有好友的信息了

（是可以通過下面這個代碼直接在數據庫中找到friendlist這個字段之后，在這個數組中找到有 app.userInfo._id 這個數值的，然后返回的，也就是查詢”是否存在“

如果這個調節滿足的話，就薈查詢到我們想要的用戶的全部資料，但是這里還是並不是這個用戶的全部信息我們都想要，所以就可以用一個field來進行限制了

onLoad: function (options) {

db.collection('users').where({

friendList : app.userInfo._id

}).field({

userPhoto : true,

nickName : true

}).get().then((res)=>{

console.log(res.data)

});

},

打印出來的結果就是：

 

 

通過這個打印的，我們就可以直接賦值了

this.setData({

friendList : res.data

});

得到這個數組之后，我們就可以在wxml頁面中用wx：for來寫循環了

<!--miniprogram/pages/friendList/friendList.wxml-->
<view class="friendList">
  <text>好友列表：</text>
   <navigator wx:for="{{ friendList }}" wx:key="{{ index }}" url="{{ '../detail/detail？userId=' + item._id}}" open-type="navigate">
      <view class="friendList-item">
        <view>
         <image src="{{ item.userPhoto }}" />
         <text> {{ item.nickName }} </text>
        </view>
        <text class="iconfont iconyoujiantou"></text>
      </view>
     </navigator>
</view>

得到的效果就是：

 然后點擊進去之后，就可以跳轉到這個好友的詳情頁面了