关注我们
成都多享科技二维码图片

成都多享科技有限公司

Chengdu DuoXiang Technology co., LTD

首页 > 小程序教程 > 用小程序云开发打造功能全面的博客

用小程序云开发打造功能全面的博客

2019-08-27

用小程序云开发打造功能全面的博客。博客是人们记录生活、沉淀知识的常用工具。本文教你用小程序·云开发打造集评论、点赞、收藏、海报发布功能于一体的mini博客小程序。本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论、点赞、收藏和海报功能,这里记录下整个实现过程和实际编码中的一些坑。
小程序开发
一、评论、点赞、收藏功能
实现思路
实现文章的一些操作功能,最主要的还是评论,这是作者和读者之间沟通的桥梁,评论功能的衍生无非是细化作者和读者之间的互动,或者增加文章的传播,所以在动手开发时需要思考下你期望实现哪些功能,并对应功能进行细化。
我一般的经验是,先在脑子里过一遍需要的功能和大致流程,然后在笔记稍微画下「最最基础的原型,相当于产品的角色」。然后就开始直接开始搭建页面和简单的交互「使用假数据,优先完成页面」,在构造页面的时候其实也能够补充最初想法上一些流程上的缺陷,这样在设计后端和数据库结构的时候可以补上,整体下来也基本比较完善了。
回头看我的小程序的需求,首先肯定是操作,在文章底部需要有个操作栏,用于发送点评和其他一些操作,在参考了一些同类型的小程序之后,逐步实现自己的一套风格。在有了功能之后,点评的数据需要有地方展示「通常是文章底部」,然后就有了文章底部的评论列表。既然有 点赞和 收藏的功能按钮,是否用户需要看下我点赞和收藏的文章列表呢,所以在「我的」中就有相应的列表。到这里,最最基础的功能基本差不多,接下来就要看后端是否能支持这些页面了,或者说「主要就是数据的保存和展示了」。
对于评论来说,肯定需要一个集合用于保存用户的评论,而对于用户的喜欢和收藏也需要一个集合来进行保存。所以根据页面我们就可以设计 mini_comments和 mini_posts_related两个集合。前者用于保存评论数据,后者用户保存用户操作与文章之间的关联。剩下的工作就是变现了,无非就是页面交互和数据的增删改查了。
细节点解析
关于评论数量,目前在文章的集合中有个 totalComments这个属性,当这篇文章每新增一个评论时,需要加1。
关于新增子评论,需要实现在某个评论下进行回复。在交互上,点击评论者的昵称或头像时,触发相应的点击事件,在事件中去记录相应的评论ID及必要数据,同时去设置焦点到评论框内。利用云开发新增子评论时可以使用 db.command.push来进行操作「更新指令,对一个值为数组的字段,往数组尾部添加一个或多个值」,往子评论集合中新增。
关于判断是否已收藏,在文章第一次加载时,我们需要判断下该用户是否有对该文章有相关操作,如果有相应的收藏和点赞操作,在初始化时需要更新相应的功能图标。至于其他一些交互细节和代码细节,可以自行阅读源码去体会,如果有任何疑问或者有更好的实现方式,也可以在下方留言。
二、海报功能
其实在最早之前的小程序中已经实现了一次,具体可以参考利用云开发优化博客小程序(三)——生成海报功能,主要还是使用原生的 cavans进行组装,原本想代码copy过来改改就行了,但总觉得原来的代码写的不是特别好。于是想看看是否有现成的轮子可以利用,果然发现了 wxa-plugin-canvas这款组件,通过非常简单的配置就可以生成精美的海报。
小程序使用npm,在总结生成海报功能之前还是有必要记录下小程序npm的使用,避免一些不必要的坑。考虑到小程序本身的大小限制,使用npm的方式是最佳的。原因是根据官方文档介绍,小程序 npm 包里只有构建文件生成目录会被算入小程序包的占用空间,上传小程序代码时也只会上传该目录的代码。这样大大减少了上传的代码体积。
小程序云开发体验总结:在开发过程中有好的开源组件可以充分利用,避免重复造轮子,有机会也可以学习下别人的实现方式。小程序本身不难,相应的文档也很详细,但是组装的过程和逻辑的实现需要自身去思考和体会。多看看文档,其实小程序的文档真的挺详细的。如果你的想法和流程都非常清晰,但还是没办法实现你的预期功能,那我建议你先放放,先把html, css, javascript熟悉下,再看几遍小程序的文档,也许你当时面临的问题就不再是问题了。
Copyright 2014 duoxiang.net, All Rights Reserved 版权所有 蜀ICP备10020808号成都多享科技有限公司网站地图

电话:18980476739邮箱:dx@duoxiang.net

地址:成都市高新区天府二街蜀都中心2栋5F


版权所有 蜀ICP备10020808 -1