创新实训——记录3

目录

内容综述

社区功能概述

帖子组件

结构搭建

代码实现

帖子应用：社区模块

​ 

本地数据应用

实现效果

​ 

总结

---

内容综述

本文介绍了社区功能的初步搭建和静态数据展示。

社区功能概述

经过与老师的交流，我们决定在web端和微信小程序端都实现一个社区，类似于csdn，但当然不会像csdn这么强大。这个社区里，大家可以发帖讨论，后期还可以提供资源下载功能，例如刘凤君老师的书籍资源等。因此，今天初步搭建的只是一个简易的朋友圈，且只是静态资源。功能可以逐步扩展，并且等后端的同学完成接口后再联合调用。

初步计划：封装帖子组件，在社区页面调用帖子即可。

帖子组件

结构搭建

像Tabs组件一样，在components目录下面新建一个Post组件：

一条帖子，我是参考的微博结构：

一开始，加入图片有些困难，因此我暂时只实现了在帖子中加入文字。 

代码实现

根据设想，帖子组件的内容应该包括发布用户头像和名称、发布时间、帖子文字内容（先简单实现文字）、点赞人数、当前用户是否点赞等，这些都需要外部传递给组件。因此，在帖子的properties中加入这些变量：

参考微博，搭建页面结构如下：

帖子分为3个部分，分别是基本信息（包含用户头像、用户名、发布时间等）、帖子内容、点赞和评论。大部分信息都由外部传入，因此展开基本信息：

 

帖子内容：

 

点赞和评论：

 

在点赞和评论这里，由于使用图片会占用很大空间，因此我使用了阿里图标库：

 

在阿里图标库中建立项目，存储这几个图表，然后在wxss文件中建立相关字体：

然后在相应位置应用即可。在点赞和不点赞的帖子上，点赞图表的颜色有所区别。

目前后端架构还未产生，因此暂时只实现了模拟点赞功能。具体实现方法是，给点赞区域添加点击事件，绑定回调函数handleWelcome，函数具体实现如下：

在方法内部，首先判断，如果本来用户是点赞的，那就取消点赞，否则就是进行点赞。注意，到这里，仅仅是得知是点赞还是取消点赞，要修改数据，还需要将事件传递给外部。类似之前的Tab组件，这里使用this.triggerEvent发送changeWelcome事件，事件传递的参数是帖子的id和修改状态，交给外部处理数据即可。

至此，帖子组件封装完毕。

帖子应用：社区模块

在上一篇博客中，整体的架构中还没有包含社区模块，因此，要新建社区模块：

并在app.json中配置：

 

 

本地数据应用

本文使用本地静态数据模拟实现社区帖子。首先需要准备相应的数据，在community.js中保存：

然后community.json中引入组件：

 

 在页面中循环遍历Post组件：

先将基本的数据传入组件，并且要注意，在这里要接收Post组件内部传出来的changeWelcome事件，并绑定处理函数。 函数实现如下：

接收传过来的id和state，然后遍历帖子数组，修改相应点赞状态，然后更新数据即可。这样，就能实现点赞功能了。

实现效果

页面：

 

点赞：

取消点赞：

 

简易社区功能搭建完毕。

总结

本文实现了社区功能的静态搭建，当然还比较粗糙。接下来要完成的是，与后端接口调用，完成登录功能。