目录
内容综述
本文介绍了社区功能的初步搭建和静态数据展示。
社区功能概述
经过与老师的交流,我们决定在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,然后遍历帖子数组,修改相应点赞状态,然后更新数据即可。这样,就能实现点赞功能了。
实现效果
页面:
点赞:
取消点赞:
简易社区功能搭建完毕。
总结
本文实现了社区功能的静态搭建,当然还比较粗糙。接下来要完成的是,与后端接口调用,完成登录功能。