得物小程序深入一：简单实现评论点赞功能👌

接着得物小程序开发的第一次启动，近几天实现了简单的评论点赞功能，一起来看看吧了😊

• 效果如下

• 布局这里我是用 ColorUI 和 vant 组件快速进行布局的。评论使用的是ColorUI-card布局，这里也推荐和我一样的新手尝试这个小组件库，非常便利。

下面直接进入主题。

数据库

两个表：一个comment_list表和一个reply_list表。 数据项主要如下：

    - _id                     
    - comment_text          评论/回复内容
    - comment_time          评论/回复时间
    - comment_user_avatar   头像
    - comment_user_name     用户名
    - parent_id             回复所属评论
    - reply_id              回复id
    - reply_name            回复用户名
    - comment_id            评论id

js

初始化评论列表回复列表以及点赞状态，当parent_id == comment_id时显示对应回复。

  onLoad() {
    this.getComment()
    this.getReply()
    this.getTotal()
  },
  async getComment() {
    await commentCollection 
    .where({
      parent_id: 0
    }) 
    .get()
    .then(res => {
      // console.log(res);
      this.setData({
        comment_list: res.data
      })
    })
  },
  async getReply() {
    await replyCollection
    .get()
    .then(res => {
      this.setData({
        reply_list: res.data
      })
    })
  },
  async getTotal() {
    let cnum = await commentCollection.count()
    let rnum = await replyCollection.count()
    this.setData({
      total: cnum.total + rnum.total
    })
  },

点赞更新数据库，根据_id和comment_id的唯一性以及parent_id，找出点赞所属评论，将like属性设为！like。

  async clicklike(e) {
    // console.log(e);
    let pid = e.currentTarget.dataset.pid
    let id = e.currentTarget.dataset.id
    let like = !e.currentTarget.dataset.like
    wx.cloud.callFunction({
      name: "like",
      data: {
        id: id,
        like: like,
        pid: pid
      }
    })
    .then(res => {
      console.log('ok',res);
      this.onLoad()
      this.onShow()
    }) 
  },
  replyComment(e) {      // 点击评论时更改数据项
    // console.log(e);
    this.setData({
      reply_name: e.currentTarget.dataset.name,
      reply_id: e.currentTarget.dataset.id,
      placeHolder: '回复 '+e.currentTarget.dataset.name,
      parent_id: e.currentTarget.dataset.pid,
    })
  },

发送评论，parent_id决定是评论还是回复。

  sendComment(e) {      
    this.setData({
      value: e.detail.value
    })                              // 获取数据设置信息并传参
    let myName = '莉莉娅', value = e.detail.value, comment_time = '刚刚',
        total = ++this.data.total, replyName = this.data.reply_name,
        replyId = this.data.reply_id, parent_id = this.data.parent_id,
        myAvatar = 'https://game.gtimg.cn/images/lol/act/img/champion/Lillia.png'
    if (value == '') {
      wx.showToast({
        icon: 'none',
        title: '请输入评论',
      })
      return
    }
    if (parent_id != 0) {
      wx.cloud.callFunction({
        name: "replyComment",
        data: {
          comment_id: total,
          reply_name: replyName,
          reply_id: replyId,
          parent_id: parent_id,
          comment_user_name: myName,
          comment_user_avatar: myAvatar,
          comment_text: value,
          comment_time: comment_time,
        }
      })
      .then(res => {
        this.setData({
          value: ''
        })
      this.onLoad()
      this.onShow()
      })
      
    }
    else {
      wx.cloud.callFunction({
        name: "sendComment",
        data: {
          comment_id: total,
          reply_name: replyName,
          reply_id: replyId,
          parent_id: parent_id,
          comment_user_name: myName,
          comment_user_avatar: myAvatar,
          comment_text: value,
          comment_time: comment_time,
        }
      })
      .then(res => {
        this.setData({
          value: ''
        })
      this.onLoad()
      this.onShow()
      }) 
    }
  },

云函数

点赞like

exports.main = async (event, context) => {
  if (event.pid) {
    return await cloud.database().collection('reply_list')
  .doc(event.id)
  .update({
    data : {
      like: event.like
    }
  })
  .then(res => {
    return res
  })
  }
  else {
    return await cloud.database().collection('comment_list')
  .doc(event.id)
  .update({
    data : {
      like: event.like
    }
  })
  .then(res => {
    return res
  })
  }
}

回复replyComment

exports.main = async (event, context) => {
  return await cloud.database().collection('reply_list')
  .add({
    data: {
      comment_id: event.comment_id,
      reply_name: event.reply_name,
      reply_id: event.reply_id,
      parent_id: event.parent_id,
      comment_user_name: event.comment_user_name,
      comment_user_avatar: event.comment_user_avatar,
      comment_text: event.comment_text,
      comment_time: event.comment_time,
      like: false,
    }
  })
  .then(res => {
    return res
  })
}

评论sendComment

exports.main = async (event, context) => {
  return await cloud.database().collection('comment_list')
  .add({
    data: {
      comment_id: event.comment_id,
      reply_name: event.reply_name,
      reply_id: event.reply_id,
      parent_id: event.parent_id,
      comment_user_name: event.comment_user_name,
      comment_user_avatar: event.comment_user_avatar,
      comment_text: event.comment_text,
      comment_time: event.comment_time,
      like: false,
    }
  })
  .then(res => {
    return res
  })
}

踩坑排坑

新建云函数时加上代码初始化适应版本问题。

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

上传并部署：所有文件需为云函数安装依赖，在命令行输入。

npm install --save wx-server-sdk@latest

collection.doc() 只能查找指定_id的记录，不能查找指定其它属性。使用where根据查询条件，查询出来的数据结果是对象数组；使用doc查询出来的是一个对象。

数据库操作之后调用onLoad()及时更新显示。

源码

gitee