利用云开发优化博客小程序（二）——评论功能

这几天陆陆续续抽了点时间迭代了一版我的小程序版博客，一来是因为云开发的出现，让很多功能成为了可能，二来正好也正好深度熟悉下云开发。

这次迭代主要是完善了评论功能「不知道审核能不能过」，一开始觉得很快能搞定，然而真正开发的时候还是碰到很多问题，这篇文章既是回顾总结，也是记录下自己在开发过程中遇到的一些坑，仅供参考。

首先来看下我的成果：

开发回顾

具体思路还是比较简单的，利用云开发中的数据库来保存评论数据，在文章详情页的底部呈现具体的评论数据。

在上一篇云发开初体验中，我已经创建了posts_statistics集合，用来存储文章的访问数，喜欢数和评论数,这次新建了posts_comments集合用于存储具体的评论数据，结构如下：

代码语言：javascript复制

"_id": "集合id"
"_openid": "评论人openid"
"cAvatarUrl": "头像url"
"cNickName": "昵称"
"comment": "评论内容"
"createDate": "创建日期"
"flag": 0
"postId": "文章id"
"timestamp": "时间戳"
"childComment":
    [{"cAvatarUrl": "评论人url"
    "cNickName": "评论人昵称"
    "cOpenId": "评论人openid"
    "comment": "评论内容"
    "createDate": 2018-09-29
    "flag": "数据标识"
    "tNickName": "对方昵称"
    "tOpenId": "对方openid"
    "timestamp": "时间戳"}]

在创建完集合之后，需要编写对应的查询，新增，和新增子评论的方法。

主要说下查询和新增子评论。查询的话肯定需要分页加载，控制一次性数据的加载量，会用到skip和limit,大致写法如下：

代码语言：javascript复制

return db.collection('posts_comments')
    .where({postId: postId})
    .orderBy('timestamp', 'desc')
    .skip((page - 1) * 10)
    .limit(10)
    .get()

然后是新增子评论，相当于在主评论下回复别人，主要在集合中childComment下新增评论，这里使用db.command.push更新指令，往数组尾部添加一个或多个值。大致写法如下：

代码语言：javascript复制

const _ = db.command
return db.collection('posts_comments').doc(id).update({
    data: {
      childComment: _.push(data)
    }

在文章详情底部功能栏的样式上，还是比较纠结的，参考了一些UI，最终还是使用这种折叠的方式，具体的样式代码就不贴了。

截图1

其中有几个交互可以唠叨下。

首先是点加号会上拉底部的功能按钮，这个没什么问题，但细节需要注意，通常情况下点空白处时会自动缩回去，但这个实现有点凌乱，于是我在功能菜单以外的视图外层套了层view:

代码语言：javascript复制

<view catchtap="hiddenMenubox">
...文章主题部分...
</view>

/**
 * 非评论区隐藏菜单
*/
hiddenMenubox: function() {
    this.setData({
      isShow: false,
      menuBackgroup: false
    })
},

然后是评论输入框中的提示，默认是评论...，当点击回复具体某个人的评论时，默认修改成回复***。

然后是喜欢和收藏两个按钮，喜欢和收藏之后图标自动点亮。

还有就是提交完评论之后默认重新刷新评论列表，最后一条评论之后停止刷新，没有评论友好提示等。总之一些小的交互点还是挺多的。

这里就不一一说明了，有兴趣的可以浏览下我的小程序，并看看源码。

问题点整理

主要还是说说开发过程中的问题点和如何解决的。

1.获取用户的openid

首先是获取用户的openid问题，在没有云函数之前，获取用户的openid还是比较麻烦的，需要通过wx.login获取code，然后通过code和小程序的appid和secret请求接口从而获取到openid。

而有云函数之后，可以简单调用下云函数，经过微信鉴权之后可直接获取到用户的openid：

代码语言：javascript复制

exports.main = (event, context) => {
  return {
    openid: event.userInfo.openId,
  }
}

2. 数据库操作权限问题

因为每月云函数有调用次数的限制，所以想直接在客户端调用数据库。一开始挺顺利的，但当更新子评论的时候出现问题了，由于客户端对于数据库最大权限是所有用户可读，仅创建者及管理员可写,所以导致子评论无法更新进去「创建者和子评论者是两个用户」。

所以没办法，只能包一层云函数，云函数中调用数据库，因为服务端调用数据库没有这个权限的限制。

代码语言：javascript复制

// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('posts_comments').doc(event.id).update({
    data: {
      childComment: _.push(event.comments)
    }
  })
}

其实个人感觉数据库操作最好都放在服务端比较好，由云函数统一收口，设计好的话，云函数还能当作路由的作用。