基于云开发的小程序评论功能实现

对于文章评论，新建数据库集合来保存评论内容及相关书籍，有以下数据库字段：

 var args={
      cNickName: that.data.userInfo.nickName,
      cAvatarUrl: that.data.userInfo.avatarUrl,
      cOpenId: app.globalData.openid,
      createDate: util.formatTime(new Date()),
      comment: comment,
      flag: true,
      title:that.data.title
    }

评论框实现，本次UI组件选用ColorUI组件：

 

    
         
                   
       
       
         
            发送
          
       
     
   

界面如下：

当输入内容完成后，点击发送按钮，执行以下逻辑代码，保存评论内容至数据库。

formSubmit: function (e) {
    let that = this;
    let userinfo = app.globalData.userInfo;
    let list = that.data.comment_list;
    let comment_total = that.data.comment_total;
    let comment = e.detail.value.comment;
    if(comment == undefined || comment == null ||  comment==""){
      wx.showToast({
        title: '请输入内容',
        icon: 'none',
        duration: 1500
      });
      return;
    }
    var args={
      cNickName: that.data.userInfo.nickName,
      cAvatarUrl: that.data.userInfo.avatarUrl,
      cOpenId: app.globalData.openid,
      createDate: util.formatTime(new Date()),
      comment: comment,
      flag: true,
      title:that.data.title
    }
    that.addPostComment(args);
  },
  /**
 * 新增评论
 */
   addPostComment(commentContent) {
     const db = wx.cloud.database();
     db.collection('comment').add({
       data: commentContent
     });
   },

对于评论内容用scroll-view视图分页加载，没有加载5条评论数据。

对于新增子评论：后续开发中

需要实现在某个评论下进行回复。在交互上，点击评论者的昵称或头像时，触发相应的点击事件，在事件中去记录相应的评论ID及必要数据，同时去设置焦点到评论框内

已实现功能小程序