微信小程序云开发-数据库和云函数的应用-点赞/收藏/评论功能

一、准备工作

1、创建数据库表articles，字段分别为：

2、向数据库表中导入数据

 二、新建文章列表页

新建文章列表页，取名为articlesList。

 1、articlesList.wxml

<!--pages/articlesList/articlesList.wxml-->
<block class="articlesList" wx:for="{{articleList}}" wx:key="index">
<view class="articleItem" bindtap="goArticleDetail" data-id ="{{item._id}}">
  <view>文章描述：{{item.title}}</view>
  <view>文章描述：{{item.description}}</view>
</view>
</block>

2、articlesList.wxss

.articleItem{
  height: 120rpx;
  border-bottom: 1rpx solid #c3c3c3;
  margin: 15rpx;
}

3、articlesList.js

// pages/articlesList/articlesList.js
Page({  //页面的初始数据
  data: {
    articleList:[]
  },  //页面加载
  onLoad: function (options) {
    wx.cloud.database().collection("articles").get()
    .then(res=>{
      console.log("查询成功",res);
      this.setData({
        articleList:res.data
      })
    })
    .catch(err=>{
      console.log("查询失败",err);
    })
  },  //携带id跳转到文章内容详情页
  goArticleDetail(e){
    console.log("点击列表数据进入详情页面",e);
    wx.navigateTo({
      url: '/pages/articleDetail/articleDetail?id='+e.currentTarget.dataset.id,
    })
  }})

三、新建文章详情页

新建文章详情页，取名为articleDetail。

1、articleDetail.wxml

<!-- 文章内容详情 -->
<block class="title">
<!-- 文章标题、描述、内容 -->
<view><text class="left">文章标题</text><text  class="right">{{articleDetail.title}}</text></view>
<view><text class="left">文章描述</text><text  class="right">{{articleDetail.description}}</text></view>
<view><text class="left">文章内容</text><text  class="right mm">{{articleDetail.content}}</text></view>
</block><!-- 点赞 收藏-->
<view class="likeandcollect">
<image class="img" src="{{CollectImgUrl}}" bindtap="collect"></image>
<image class="img" src="{{likeImgUrl}}" bindtap="like"></image>
</view><!-- 发表评论 -->
<block>
<view class="left">发表评论</view>
<textarea bindinput="getContent" placeholder="发表一下你的评论吧" value="{{content}}"></textarea>
<button bindtap="remark" type="primary">发表评论</button>
</block><!-- 评论列表 -->
<block class="remarksList">
  <view class="left">评论列表</view>
  <view wx:for="{{remarks}}" wx:key="index" class="remarks">
    <view class="name">{{item.name}}</view>
    <view class="name">{{time}}</view>
    <view class="content">{{item.content}}</view>
  </view>
</block>

2、articleDetail.wxss

.likeandcollect{
  margin: 20rpx;
}
.img{
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}
.title{
  margin: 20rpx;
}
.left{
  text-align: left;
  margin-left: 20rpx;
}
.right{
  text-align: right;
  color: gray;
  margin: 20rpx;
}
.remarksList{
  margin-top: 200rpx;
}
.remarks{
  text-align: left;
  margin: 20rpx;
  border-bottom: 2rpx solid #c3c3c3;
  padding: 20rpx;
}
.name{
  color: gray;
  margin-bottom: 20rpx;
}
.content{
  /*在textarea中设置输入内容的自动换行*/
  word-wrap:break-word;
}
textarea{
  width: auto;
  height: 200rpx;
  border: 1rpx solid #c3c3c3;
  margin: 20rpx;
  word-break:break-all;
}

3、articleDetail.js

//设置点赞和收藏状态 默认为false
let like = false
let collect = false
//定义全局id
let id= ''
//定义content变量存放输入的评论内容
let content = ''//获取当前时间
var util = require("../../utils/util")Page({
  //初始化数据显示
  data:{
    CollectImgUrl:"../../images/收藏no.png",
    likeImgUrl:"../../images/点赞no.png",
    //自定义变量，存储详情信息
    articleDetail:[],
    //自定义数组，用来存储并显示评论内容
    remarks:[]
  },  //页面加载
  onLoad(options){
    console.log("获取到的id",options);
    id = options.id
    wx.cloud.database().collection("articles")
    .doc(id)
    .get()
    .then(res=>{
      console.log("获取文章内容详情成功",res);
      like  = res.data.like
      collect = res.data.collect
      //如果评论不为空，则将res.data.remarks赋值给remarks变量
      this.setData({
        articleDetail:res.data,
        likeImgUrl: like?"../../images/点赞yes.png":"../../images/点赞no.png",
        CollectImgUrl: collect?"../../images/收藏yes.png":"../../images/收藏no.png",
        remarks:res.data.remarks
      })
    })
    .catch(err=>{
      console.log("获取文章内容详情失败",err);
    })    //获取当前时间
  // 调用函数时，传入new Date()参数，返回值是日期和时间
  var TIME = util.formatTime(new Date());
    this.setData({
    time: TIME,
    });  },  //收藏功能
  collect(){
    //使用三元运算符实现收藏图标切换功能（推荐使用）
    this.setData({
      CollectImgUrl: collect?"../../images/收藏no.png":"../../images/收藏yes.png",
    })
    collect=!collect
    //调用云函数来更新收藏状态到数据库
    wx.cloud.callFunction({
      name:"updateState",   //云函数名称
      data:{                //云函数参数传递
        action:"collect",        //action是在云函数内自定义的参数，用于区分点赞/收藏
        id :id,
        collect:collect
      }
    })
    .then(res=>{
      console.log("收藏状态改变成功",res);
      if(collect==true){       //如果收藏，提示
        wx.showToast({
          title: '收藏成功',
          icon:"success",
          duration:1000
        })}else if(collect ==false){ //如果取消收藏，提示
          wx.showToast({
            title: '取消收藏',
            icon:"none",
            duration:1000
          })
        }
    })
    .catch(err=>{
      console.log("收藏状态改变失败",err);
    })
  },  //点赞功能
  like(){
    //使用三元运算符实现点赞图标切换功能（推荐使用）
    this.setData({
      likeImgUrl: like?"../../images/点赞no.png":"../../images/点赞yes.png",
    })
    like=!like,
    //调用云函数来更新点赞状态到数据库
    wx.cloud.callFunction({
      name:"updateState",
      data:{
        action:"like",
        id :id,
        like:like
      }
    })
    .then(res=>{
      console.log("点赞状态改变成功",res);
      if(like==true){       //如果点赞，提示
      wx.showToast({
        title: '点赞成功',
        icon:"success",
        duration:1000
      })}else if(like ==false){ //如果取消点赞，提示
        wx.showToast({
          title: '取消点赞',
          icon:"none",
          duration:1000
        })
      }
    })
    .catch(err=>{
      console.log("点赞状态改变失败",err);
    })
  },  //获取用户输入的评论内容
  getContent(e){
    content = e.detail.value
    //动态绑定数据，实现评论结束后清空content的内容
    this.setData({
      content :e.detail.value
    })
  },  //发表评论
  remark(e){
    //如果评论长度小于4给予提示
    if(content.length<4){
      wx.showToast({
        title: '评论内容太少',
        icon:"none"
      })
      return
    }
    //定义remarksItem变量来存储插入的对象
    let remarksItem = {}
    remarksItem.name = "Monica"
    remarksItem.content = content    //remarks存储更新后的数组，
    let remarks = this.data.remarks
    remarks.unshift(remarksItem)  //将对象插入到数组中。unshift插入到数组最前面，push插入到数组最后面
    console.log("添加评论后的数组",remarks);    //调用云函数之前显示加载中
    wx.showLoading({
      title: '发表中',
    })    //调用云函数来更新评论数据到数据库
    wx.cloud.callFunction({
      name:"updateState",
      data:{
        action:"remark",
        id :id,
        remarks:remarks //将新数组remarks传递给数据库的remarks字段
      }
    })
    .then(res=>{
      console.log("发表评论成功",res);
      //提示成功
      wx.showToast({
        title: '发表评论成功',
        icon:"success",
        duration:2000
      })
      //实现动态刷新页面
      this.setData({
        remarks:remarks,  //发表成功后，动态刷新评论列表
        content:""        //发表成功后，清空input内容
      })
      //隐藏加载提示
      wx.hideLoading()
    })
    .catch(err=>{
      console.log("发表评论失败",err);
      //隐藏加载提示
      wx.hideLoading()
    })
  }
})

四、创建云函数

创建云函数updateState，用来更新点赞状态、收藏状态、评论数据到数据库。

// 云函数入口函数
exports.main = async (event, context) => {
  if(event.action =="like"){    //如果是点赞
  return cloud.database().collection("articles")
  .doc(event.id)
  .update({
    data:{
      like:event.like
    }
  })
}else if(event.action =="collect"){ //如果是评论
  return cloud.database().collection("articles")
  .doc(event.id)
  .update({
    data:{
      collect:event.collect
    }
  })
}else if(event.action =="remark"){ //如果是收藏
  return cloud.database().collection("articles")
  .doc(event.id)
  .update({
    data:{
      remarks:event.remarks
    }
  })
}

五、最终效果