用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-5-13 00:12

mini-blog的详情页的功能按钮基本已经全部实现(除了生成海报功能),这里记录下整个实现过程和实际编码中的一些坑。实现思路实现文章的一些操作功能,最主要的还是评论,这是作者和读者之间沟通的桥梁,评论功能的 ...

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

实现思路

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

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

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

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

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

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

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

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

所以根据页面我们就可以设计 mini_comments 和 mini_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.command
let 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 熟悉下,再看几遍小程序的文档,也许你当时面临的问题就不再是问题了。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 玄冰 来自: bug2048