对于文章评论，新建数据库集合来保存评论内容及相关书籍，有以下数据库字段：
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及必要数据，同时去设置焦点到评论框内
小程序已经上线啦，欢迎添加体验！！！（老何的博客）
