最近開發小程序用戶發佈動態之後，需要進行評論，剛開始沒什麼思路。就在網上逛了一圈，也沒啥結果，都不是我想要的。要麼是轉載，要麼是講的不夠清楚。
經過我半天的思考和開發，終於將這個評論功能給實現了。先看個效果圖吧：
今天我就帶大家瞭解一下評論功能！
評論功能實現步驟：
- 設計數據庫信息儲存方式
- 編寫邏輯代碼
- 編寫雲函數
實現評論功能，最重要的一點就是設計數據庫到底該如何進行儲存評論的內容，這一點很重要！如果不瞭解這個，給你代碼你也不一定能搞懂。並且那麼長的代碼我直接複製粘貼出來，你也不一定看！
數據庫設計，我是在每條動態裏放一個 comment 數組字段，父評論直接以json格式存入數組中，所以在界面顯示父評論時直接用循環就可以了。那麼子評論也類似，在每個父評論的記錄中有個字段爲childComment 數組子彈用於儲存子評論。有子評論的話直接將信息以json格式存入childComment數組中。
給大家看個數據庫的格式圖：
以這種方式設計的儲存格式，不用判斷哪條父評論屬於哪個動態，也不用判斷哪個子評論屬於哪個父評論。在頁面上展示的時候，就直接用兩個for循環就OK了。
（估計代碼全給你們，你們也不會看，並且複製拿走之後，你們也許要修改一下代碼，邏輯代碼比較長，有三百行。所以，上面的思路給你們之後，你們就按照那樣的數據庫進行設計就行了。如有問題，可以在評論區問我。）
先給大家看一下界面代碼吧：
<view class="commentBlock">
<text class="comtitle">全部評論</text>
<view wx:for="{{dynamicInfo.comment}}" wx:key="{{index}}" class="comments">
<view class="parent">
<view class="a-n-t">
<image class="ava" src="{{item.avatarUrl}}"></image>
<view class="n-t">
<view class="avlogo">
<text class="textnick">{{item.nickName}}</text>
<image class="logo" wx:if="{{item.isbuilding}}" src="cloud://hualibiaobaiqiang-1omla.6875-hualibiaobaiqiang-1omla-1302418355/me_icon/6-樓主.png"></image>
</view>
<text class="comtime">{{item.commentTime}}</text>
</view>
</view>
<view class="com" data-index="{{index}}" data-name="{{item.nickName}}" data-id="{{item.id}}" data-openid="{{item.openid}}" bindlongpress="iscommenter" bindtap="replayCom">
<text>{{item.commentText}}</text>
</view>
<view class="childComment" wx:for="{{item.childComment}}" wx:for-item="item" wx:key="*this" wx:for-index="bindex">
<text decode="{{true}}" space="{{true}}">{{item.nickName}} 回覆@ {{item.replyName}}: </text>
<text data-bindex="{{bindex}}" data-index="{{index}}" data-name="{{item.nickName}}" data-id="{{item.id}}" data-openid="{{item.openid}}" bindlongpress="ischildcommenter" bindtap="replayCom">{{item.commentText}}</text>
</view>
</view>
</view>
</view>
<form bindsubmit="submit">
<view class='ask'>
<input class='input' type='text' focus="{{focus}}" value="{{value}}" placeholder='{{placeholder}}' bindblur="blur" name="comment"/>
<button class='button' form-type="submit">評論</button>
</view>
</form>
css：
.commentBlock{
margin-top: 10rpx;
margin-bottom: 200rpx;
padding: 20rpx;
flex-direction: column;
display: flex;
}
.comtitle{
font-size: 14px;
color:#666;
}
.comments{
margin-bottom: 50rpx;
}
.parent{
flex-direction: column;
display: flex;
}
.a-n-t{
flex-direction: row;
display: flex;
height: 85rpx;
width: 100%;
margin-bottom: 10rpx;
}
.ava{
height: 85rpx;
width: 85rpx;
}
.avlogo{
flex-direction: row;
display: flex;
height: 55rpx;
}
.n-t{
width: auto;
height: 85rpx;
flex-direction: column;
display: flex;
margin-left: 20rpx;
}
.comtime{
font-size: 14px;
color: #666;
height: 23rpx;
}
.textnick{
height: 52rpx;
width: auto;
}
.logo{
height: 55rpx;
width: 64rpx;
margin-left: 5rpx;
}
.com{
margin-left: 85rpx;
margin-bottom: 10rpx;
}
.childComment{
padding:10rpx 20rpx;
border-radius: 20rpx;
height: auto;
width: 600rpx;
margin-left: 85rpx;
}
接着就是邏輯代碼了：
submit(e){
console.log(e)
if(e.detail.value.comment==''){
wx.showToast({
title: '請輸入回覆內容',
icon:'none'
})
}else{
wx.showLoading({
title: '發送中...',
})
const Time = utils.formatTime(new Date())
const sendtime = Time.split(' ')
const hs = sendtime[1].split(':')
const HS = hs[0]+':'+hs[1]
const commentTime = sendtime[0]+' '+HS
const openid = wx.getStorageSync('openId')
const userInfo = wx.getStorageSync('userInfo')
if(openid){
if(openid==this.data.dynamicOpenid&&this.data.placeholder=='我來說兩句~'){ //判斷是否爲樓主
wx.cloud.callFunction({
name:"addComment",
data:{
avatarUrl:userInfo.avatarUrl, //回覆者頭像
nickName:userInfo.nickName, //回覆者名稱
_id:this.pagesData, //動態ID,隨機數
commentText:e.detail.value.comment, //回覆內容
commentTime:commentTime, //回覆時間
openid:openid, //回覆者openid
replyName:'', //被回覆者名稱
isbuilding:true, //是否爲樓主
childComment:[], //子評論
id:Math.floor(Math.random()*100000000) //通過該條記錄在父評論數組中的索引來添加子評論
},
success:res=>{
wx.showToast({
title: '評論成功！',
icon:'success'
})
this.setData({
value:''
})
wx.hideLoading({
success: (res) => {},
})
this.getDynamic()
}
})
}else if(openid!=this.data.dynamicOpenid&&this.data.placeholder=='我來說兩句~'){
wx.cloud.callFunction({
name:"addComment",
data:{
avatarUrl:userInfo.avatarUrl, //回覆者頭像
nickName:userInfo.nickName, //回覆者名稱
_id:this.pagesData, //動態ID
commentText:e.detail.value.comment, //回覆內容
commentTime:commentTime, //回覆時間
openid:openid, //回覆者openid
replyName:'', //被回覆者名稱
isbuilding:false, //是否爲樓主
childComment:[], //子評論
id:Math.floor(Math.random()*100000000) //通過該條記錄在父評論數組中的索引來添加子評論
},
success:res=>{
wx.showToast({
title: '評論成功！',
icon:'success'
})
this.setData({
value:''
})
this.getDynamic()
wx.hideLoading({
success: (res) => {},
})
}
})
}else if(openid==this.data.dynamicOpenid&&this.data.placeholder!='我來說兩句~'){
wx.cloud.callFunction({
name:"addChildComment",
data:{
avatarUrl:userInfo.avatarUrl, //回覆者頭像
nickName:userInfo.nickName, //回覆者名稱
_id:this.pagesData, //動態ID,隨機數
commentText:e.detail.value.comment, //回覆內容
commentTime:commentTime, //回覆時間
openid:openid, //回覆者openid
replyName:this.data.name, //被回覆者名稱
isbuilding:true, //是否爲樓主
index:this.data.index, //對象數組索引
id:Math.floor(Math.random()*100000000) //通過該條記錄在父評論數組中的索引來添加子評論
},
success:res=>{
wx.showToast({
title: '評論成功！',
icon:'success'
})
this.setData({
value:''
})
wx.hideLoading({
success: (res) => {},
})
this.getDynamic()
}
})
}else if(openid!=this.data.dynamicOpenid&&this.data.placeholder!='我來說兩句~'){
wx.cloud.callFunction({
name:"addChildComment",
data:{
avatarUrl:userInfo.avatarUrl, //回覆者頭像
nickName:userInfo.nickName, //回覆者名稱
_id:this.pagesData, //動態ID,隨機數
commentText:e.detail.value.comment, //回覆內容
commentTime:commentTime, //回覆時間
openid:openid, //回覆者openid
replyName:this.data.name, //被回覆者名稱
isbuilding:false, //是否爲樓主
index:this.data.index, //對象數組索引
id:Math.floor(Math.random()*100000000) //通過該條記錄在父評論數組中的索引來添加子評論
},
success:res=>{
wx.showToast({
title: '評論成功！',
icon:'success'
})
this.setData({
value:''
})
wx.hideLoading({
success: (res) => {},
})
this.getDynamic()
}
})
}
}else{
wx.showToast({
title:'請登錄',
icon:'none'
})
}
}
},
如有問題可在評論區問我，這裏的邏輯代碼沒有給出所有。參考上面的數據庫設計，只要你會數據的讀取和寫入，那就不是問題了。