Day10-微信小程式實戰-交友小程式-實現刪除好友資訊與子父元件間通訊

阿新 • • 發佈：2020-06-24

回顧：上一次已經把訊息的佈局以及樣式做好了

效果圖：

在removeList.js檔案中，messageId就是發起這個訊息的使用者了

先檢視一下自定義元件的生命週期

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

 lifetimes: {

    attached: function() {

      // 在元件例項進入頁面節點樹時執行

    },

    detached: function() {

      // 在元件例項被從頁面節點樹移除時執行

    },

  }

直接就是在lifttimes裡面進行定義的（直接就是在methods的同級的下面加上即可了）

因為要對使用者的資訊進行渲染，就可以看成是一個一個的物件，所以就可以在removeLIst.js中定義一個物件

然後遇到的問題就和之前是一樣的了，就是我們得到的資料太多了，沒必要全部都要，可以選擇性的要，只需要頭像和暱稱

（所以就可以在get前面來一個field）

lifetimes: {

    attached: function () {

      // 一進來就會進行它了

      db.collection('users').doc(this.data.messageId)

      .field({
 

        userPhoto : true,

        nickName : true

      })

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

        this.setData({

            userMessage　: res.data

        });

      });

    }

  }

這樣的話我們在這個頁面裡面就可以得到使用者的資料了，剩下的就是直接可以在wxml中用了

<!--components/removeList/removeList.wxml-->

<movable-area class="area">
 

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

     <image src="{{ userMessage.userPhoto }}" />

     <view class="delete">刪除</view>

 </movable-area>

效果圖：

在之後設定刪除功能之前，先設定一下就是隻要點選了訊息列表中使用者的頭像之後，就可以跳轉到這個使用者的詳情頁了

可以直接在編輯個人資訊的頁面 editUserInfo.wxml中COPY程式碼　　

在設定這個跳轉頁面的url的時候，因為同時要給這個url傳遞引數的，所以這個時候就要用大括號括起來了

<!--components/removeList/removeList.wxml-->

<movable-area class="area">

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

     <navigator url="{{'/pages/detail/detail?userId=' + userMessage._id}}" open-type="navigate">

     <image src="{{ userMessage.userPhoto }}" />

     </navigator>

     <view class="delete">刪除</view>

 </movable-area>

即可實現，點選頭像跳轉到個人的詳情頁面

二、下面就是對刪除功能進行設計

一開始的就是，點選了之後，要給使用者一個提示資訊，讓使用者可以選擇是取消還是確定的，這裡用的是一個wx.showModel這樣一個內建的方法

所以就要另外的給“點選了確定”加邏輯了，就要在微信開放檔案裡面細看這個API了

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

wx.showModal({

  title: '提示',

  content: '這是一個模態彈窗',

  success (res) {

    if (res.confirm) {

      console.log('使用者點選確定')

    } else if (res.cancel) {

      console.log('使用者點選取消')

    }

  }

})

把查到的賦值給list，然後在用陣列的filter進行刪除即可了

通過fileter過濾之後，就是過濾初和我們不想要的東西，然後把這些東西再次賦值為list，然後我們把前後的list打印出來會發現：

確實是過濾掉了的

由於如果要刪掉的話，就設計了removeList這個元件和message這各頁面之間的通訊了，並且是子元件像父元件，用到事件來做的

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

<!-- 當自定義元件觸發“myevent”事件時，呼叫“onMyEvent”方法 -->

<component-tag-name bindmyevent="onMyEvent" />

<!-- 或者可以寫成 -->

<component-tag-name bind:myevent="onMyEvent" />

所以在message.wxml中隊子元件remove-list設定

<remove-list wx:for="{{ userMessage }}" wx:key="{{index}}" messageId="{{ item }}"

     bindmyevent="onMyEvent"/>

這樣事件監聽就寫好了，但是如何在元件中觸發呢，我們回到removelist.js中

繼續檢視山脈的連結-微信開發檔案

Component({

  properties: {},

  methods: {

    onTap: function(){

      var myEventDetail = {} // detail物件，提供給事件監聽函式

      var myEventOption = {} // 觸發事件的選項

      this.triggerEvent('myevent', myEventDetail, myEventOption)

    }

  }

})

在removelist.js中通過：

 this.triggerEvent('myevent',list)

前面引數，要和在 message.wxml設定的 bindmyevent，後面的myevent對應上

第二個引數就是我們過濾剩下的list

給message傳過去之後

  onMyEvent(ev){

  this.setData({

    userMessage : ev.detail

  });

通過這樣的設定出現了一個bug，就是我們刪除第一條資訊的時候，直接把第二條刪掉了，第一條被留下來了

當我們檢視資料庫的時候，留下來的就是第二條資訊，但是在前端顯示的是第一條資訊留下，第二條資訊沒了

要這樣修改：

onMyEvent(ev){

    this.setData({

      userMessage : []

    },()=>{

        this.setData({

          userMessage : ev.detail

        });

    });

  }

先賦值為空，之後再次呼叫removelist，再把過濾的陣列進行賦值　　