专栏首页Bug生活2048基于云开发的小程序评论、点赞、收藏功能实现总结

基于云开发的小程序评论、点赞、收藏功能实现总结

mini-blog的详情页的功能按钮基本已经全部实现(除了生成海报功能),这里记录下整个实现过程和实际编码中的一些坑。

实现思路

实现文章的一些操作功能,最主要的还是评论,这是作者和读者之间沟通的桥梁,评论功能的衍生无非是细化作者和读者之间的互动,或者增加文章的传播,所以在动手开发时需要思考下你期望实现哪些功能,并对应功能进行细化。

我一般的经验是,先在脑子里过一遍需要的功能和大致流程,然后在笔记稍微画下「最最基础的原型,相当于产品的角色」。

然后就开始直接开始搭建页面和简单的交互「使用假数据,优先完成页面」,在构造页面的时候其实也能够补充最初想法上一些流程上的缺陷,这样在设计后端和数据库结构的时候可以补上,整体下来也基本比较完善了。

回头看我的小程序的需求,首先肯定是操作,在文章底部需要有个操作栏,用于发送点评和其他一些操作,在参考了一些同类型的小程序之后,逐步实现自己的一套风格,样式截图如下:

小程序截图1

在有了功能之后,点评的数据需要有地方展示「通常是文章底部」,然后就有了文章底部的评论列表,样式如下:

小程序截图2

既然有点赞收藏的功能按钮,是否用户需要看下我点赞和收藏的文章列表呢,所以在「我的」中就有相应的列表,样式如下:

小程序截图3

到这里,最最基础的功能基本差不多,接下来就要看后端是否能支持这些页面了「主要就是数据的保存和展示了」

对于评论来说,肯定需要一个集合用于保存用户的评论,而对于用户的喜欢和收藏也需要一个集合来进行保存。

所以根据页面我们就可以设计mini_commentsmini_posts_related两个集合。前者用于保存评论数据,后者用户保存用户操作与文章之间的关联。

剩下的工作就是变现了,无非就是页面交互和数据的增删改查了。

细节点解析

关于评论数量

目前在文章的集合中有个totalComments这个属性,当这篇文章每新增一个评论时,需要加1。

最初在写这个的时候,每次都是先查再更新,两段式,原代码如下:

let count=post.totalComments+1;let result =await db.collection('mini_posts').doc(event.commentContent.postId).update({    data: {      totalComments: count    }  });

后来看文档发现,可以使用db.command.inc这个指令,无需再查一遍,直接可对原字段加1,还能保证原子性。代码如下:

const _ = db.commandlet result = db.collection('mini_posts').doc(event.commentContent.postId).update({    data: {      totalComments: _.inc(1)    }  });

关于新增子评论

需要实现在某个评论下进行回复。

在交互上,点击评论者的昵称或头像时,触发相应的点击事件,在事件中去记录相应的评论ID及必要数据,同时去设置焦点到评论框内:

  /**  * 点击评论内容回复  */  focusComment: function (e) {    let that = this;    let name = e.currentTarget.dataset.name;    let commentId = e.currentTarget.dataset.id;    let openId = e.currentTarget.dataset.openid;
    that.setData({      commentId: commentId,      placeholder: "回复" + name + ":",      focus: true,      toName: name,      toOpenId: openId    });  },

利用云开发新增子评论时可以使用db.command.push来进行操作「更新指令,对一个值为数组的字段,往数组尾部添加一个或多个值」,往子评论集合中新增:

/** * 新增子评论 * @param {} event  */async function addPostChildComment(event) {
  let task = db.collection('mini_posts').doc(event.postId).update({    data: {      totalComments: _.inc(1)    }  });  await db.collection('mini_comments').doc(event.id).update({    data: {      childComment: _.push(event.comments)    }  })  await task;}

关于判断是否已收藏

在文章第一次加载时,我们需要判断下该用户是否有对该文章有相关操作,如果有相应的收藏和点赞操作,在初始化时需要更新相应的功能图标,核心代码如下:

/**   * 获取收藏和喜欢的状态   */  getPostRelated: async function (blogId) {    let where = {      postId: blogId,      openId: app.globalData.openid    }    let postRelated = await api.getPostRelated(where, 1);    let that = this;    for (var item of postRelated.data) {      if (config.postRelatedType.COLLECTION === item.type) {        that.setData({          collection: { status: true, text: "已收藏", icon: "favorfill" }        })        continue;      }      if (config.postRelatedType.ZAN === item.type) {        that.setData({          zan: { status: true, text: "已赞", icon: "appreciatefill" }        })        continue;      }    }  },

至于其他一些交互细节和代码细节,可以自行阅读源码去体会,如果有任何疑问或者有更好的实现方式,也可以与我沟通。

总结

这里主要想分享实现一个功能时候的过程,有想法的时候如何一步步去成功变现。

小程序本身不难,相应的文档也很详细,但是组装的过程和逻辑的实现需要自身去思考和体会

如果你的想法和流程都非常清晰,但还是没办法实现你的预期功能,那我建议你先放放,先把html,css,javascript熟悉下,再看几遍小程序的文档,也许你当时面临的问题就不再是问题了。

本文分享自微信公众号 - Bug生活2048(BugLife2048),作者:Bug2048

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序富文本解析的「伪需求」,从wxParse到towxml的坑

    其实有很多场景会用到富文本框「通常后台维护一长串html文本,前台进行渲染展示」。但由于小程序的一些特殊性,无法直接渲染html,因此类似wxParse的开源组...

    Bug生活2048
  • [mini-blog][v2.1.0]博客小程序签到功能实现

    首先是mini_member,用于记录会员相关的汇总数据,以openId作为唯一索引,其中也预留了一些属性,比如积分,未读消息等,用于后期的功能迭代中。

    Bug生活2048
  • [mini-blog][v1.6.0]体现后台管理功能的价值时刻到了——丰富文章的筛选

    这次改版,用户最直观的效果就是可以对文章进行筛选了,最早期的一版,只能通过简单的搜索框进行筛选:

    Bug生活2048
  • Spring容器初始化完成的回调方法

    我们可能经常会碰到一些奇奇怪怪的需求,比如在IOC容器初始化完成前实例化一些bean,bean的初始化回调等等等。今天来讲一下如何实现Spring IOC容器如...

    冰枫
  • 入门 | 学完了在线课程?如何开启深度学习论文的阅读模式

    在一个 Quora 问答《I want to pursue machine learning as a career but not sure if I am ...

    机器之心
  • 又有两家"论文工厂"被扒!80多家医院无一幸免

    至少有412篇(还在持续增加)来自中国医院的论文可能出自同一个“论文工厂”!这些论文全部来自中国的几十家医院,其中三甲医院就有数十家。点击查看详情:重磅!中国论...

    百味科研芝士
  • 深度学习先驱Bengio:AI顶会论文的Deadline是时候取消了

    Yoshua Bengio:深度学习先驱,蒙特利尔大学计算机系教授,2019 年图灵奖获得者。

    机器之心
  • 牛津教授吐槽DeepMind心智神经网络,还推荐了这些多智能体学习论文

    在Machine Theory of Mind中,DeepMind提出了“机器心智理论网络”ToMnet,让AI智能体能理解自己和周围智能体的情绪、意图、欲望等...

    量子位
  • 2018热点总结:BERT最热,GANs最活跃,每20分钟就有一篇论文...

    【导读】本文的作者 Ross Taylor 和 Robert Stojnic 在今年一起启动了一个名为“Paper with Code”的项目,将 AI 领域的...

    abs_zero
  • 2018热点总结:BERT最热,GANs最活跃,每20分钟就有一篇论文...

    【导读】本文的作者 Ross Taylor 和 Robert Stojnic 在今年一起启动了一个名为“Paper with Code”的项目,将 AI 领域的...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券