• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

开发技术 开发技术 2周前 (06-24) 21次浏览

回顾:上一次已经把消息的布局以及样式做好了

效果图:

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

 在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>

效果图:

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

 在之后设置删除功能之前,先设置一下就是只要点击了消息列表中用户的头像之后,就可以跳转到这个用户的详情页了

可以直接 在编辑个人信息的页面 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这样一个内置的方法

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

所以就要另外的给“点击了确定”加逻辑了,就要在微信开放文档里面细看这个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打印出来会发现:

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

 确实是过滤掉了的

 由于如果要删掉的话,就设计了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,再把过滤的数组进行赋值  

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

 也就是全部清空之后,再重新渲染的

 

 整个逻辑:

1、在数据库中用户的头像和昵称找到,然后获取数据

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

2、点击删除按钮的时候,弹出提示框,如果用户点了缺点删除的话,之后我们先查询

 找到之后,把那个消息在message列表中过滤掉

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

 3、然后再重新的更新,之后就触发子父通信,把更新之后的list传给

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

4、父组件拿到removelist这组件的信息

Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

 

 拿到就更新我们的列表,这样的话列表就发送了变化了

 


喜欢 (0)