创新实训——记录6

目录

内容综述

取消点赞帖子

删除帖子

封装了解我们页面

回帖相关

展示回帖

其余功能

补充

总结

---

内容综述

本文在后端完成相应的基础上，描述完成了给帖子取消点赞、删除帖子、封装了解我们页面、获取回帖、点赞回帖、取消点赞回帖、删除回帖等功能。

取消点赞帖子

由于上一次，后端的同学还没有完成取消点赞的接口，这次他一把接口发来，我就完成了相关功能。首先是取消帖子的赞。

上一次，在community.js中处理Post组件发来的点赞事件时，只处理了点赞即state为true的情况，对于state为false的情况，一样的解决办法。首先封装取消帖子点赞的网络请求函数：

仍然是采用Promise解决链式调用，接收传过来的postId和token作为参数即可。然后，在changeWelcome中调用：

实现效果：

取消点赞前：

取消点赞后：

功能完成。

PS：应我的要求，后端的同学在帖子和回帖中也给出了nickname，这样方便显示发帖人的名字。

删除帖子

有了点赞、发布帖子的基础，完成删除帖子功能就容易多了。首先，给Post组件的删除绑定事件：

具体实现：

 

同样是使用事件发送postId。然后，在社区页面处理：

 

处理函数实现：

 

首先，需要确认询问是不是确定删除。如果用户确定，方才调用deletePost函数。在这里看出，deletePost仍然采用Promise，封装如下：

 

这样，就能够实现删除了。实现效果：

删除前：

 

删除后：

 

效果成功。 

封装了解我们页面

之前，关于本团队的人员信息，我一直粗暴展示在my页面中，这样显得不太优雅。因此，我新建了knowUs页面，并可以通过my页面访问，在这里展示我们的信息。在page中新建：

里面存放一些我们的介绍信息：

然后，在my页面中，新建一个导航条：

点击“了解我们”，即可前往knowUs页面：

实现效果如下：

点击“了解我们”：

效果完成。

回帖相关

展示回帖

我们后端采用了MongoDB，这样可以级联存储帖子、回帖以及回帖的评论。因此，当一个帖子的postId知道了，就可以根据它获取其全部回帖。看到后端同学给出的接口：

参数只需要一个postId即可。这样，思路就是，在社区中通过Post组件展示帖子，当点击Post的评论图标时，将前往其回帖页面。

在显示回帖页面之前，必须先想办法获取回帖。要拿到postId，必须通过Post组件传递出来，因此，先给Post组件的评论图标加一个函数：

实现这个函数：

然后，需要在community中处理这个事件：

通过navigateToReply，可以获取Post传递出来的postId。但还要想办法传递给即将出现的回帖页面，这个我一开始没想到好办法。后来查阅资料意识到，wx.navigateTo可以传递参数，因此如下实现：

原理就是通过eventChannel事件总线，提交一个事件，在事件监听中接收即可。这样就解决了问题。接下来，就需要封装一个回帖页面：

除了回帖页面，每一条回帖也应该作为一个组件封装出来，因此还需要一个回帖组件：

在reply页面显示时，就需要接收postId，然后根据postId获取回帖。首先封装一个获取回帖的网络请求函数：

同样，也是Promise格式，并且处理了获取的数据。有了函数，就可以在onShow中监听事件获取postId，并调用：

到这里，可以在开发者工具中看出，已经获取成功了：

然后就可以利用ReplyItem组件展示回帖了。ReplyItem组件，我大部分直接复用了Post组件的代码，然后对其不同之处进行了更改：

基本内容都类似，因此不再赘述。这样，可以在Reply页面中调用了：

展示效果如下：

其余功能

其他功能诸如删除回帖、点赞回帖、发布回帖，其实现与帖子层面几乎一样，没有特别的区别，因此不再给出。这些功能已经实现。

补充

此外，我还发现，在用户发布帖子成功时，我用wx.showToast提示用户成功，但此时用户可以连续点击发布，从而重复发布相同的内容。这就会造成不必要的网络请求，因此，在wx.showToast中加入mask:true，这样就能遮蔽住整个提示，不会重复发布了。

总结

本文实现了帖子的取消点赞、删除、了解我们页面以及回帖相关功能。接下来要实现的是，回帖下的评论展示功能，也就是最下一级的回复了。