博客

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

 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组件：

<!-- 底部功能 -->
<view class="padding-0 bg-white" id='comment'>
 <form bindsubmit="formSubmit" >
    <view class="flex ">
       <view class="flex-treble bg-white padding-0 margin-xs radius">  
          <textarea maxlength="-1" placeholder="抢沙发..." auto-height fixed="true" name='comment'></textarea>         
       </view>
       <view class="flex-sub bg-white padding-0 margin-xs radius">
         <button class='cu-btn bg-green shadow-blur' form-type='submit' open-type='getUserInfo'>
            <text>发送</text>
          </button>
       </view>
     </view>
   </form>
</view>

界面如下：

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

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及必要数据，同时去设置焦点到评论框内

已实现功能小程序