微信小程序雲開發-數據庫和雲函數的應用-點贊/收藏/評論功能

一、准備工作

1、創建數據庫表articles，字段分別為：

序號	字段名稱	字段類型	字段值	字段描述	備注說明
1	title	string	"標題1"	文章標題
2	description	string	"描述1"	文章描述
3	content	string	"進入迎峰度夏，受華東、華中、華南持續大范圍高溫天氣影響，全國發用電量持續攀升。記者從國家發展改革委了解到，7月14日全國發電量達271.87億千瓦時，創歷史新高...	文章內容
4	like	boolean	false	點贊
5	collect	boolean	false	收藏
6	remark	array	[{name："陳世卿"，content："第1條評論"}，{name："王海雲"，content："第2條評論"}，{name："馬雲海"，content："第3條評論"}]	評論	數組里面存儲對象

 

 

 

 

 

 

 

 

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
    }
  })
}

五、最終效果