微信小程序评论的实现

实现像这样的底部悬浮的留言框并实现留言功能。
话不多说直接上代码，评论存储用的是小程序的云开发数据库。
WXML代码

<!--评论-->
<!--留言板实现-->
<!--评论-->
<!--留言板实现-->
<view class='top'>
            <view bindtap='onTabsItemTap' data-index='{{index}}' class="top-item">
                <text class="{{currentTabsIndex==index?'on':''}}">精彩评论</text>
            </view>
    </view>
  <view class='newsBox'>
    <block  wx:for="{{talks}}"  wx:for-index="talks" wx:key="talks">
      <view class='container-content'>
          <view class='user-info'>
            <image class='user-head' src='{{item.photo}}' mode='aspectFill'></image>
            <view class='user-name-time'>
              <view class='user-name'>{{item.name}}</view>
              <view class='user-publish-time'>{{item.date}}</view>
            </view>
            </view>
            <view class='content'>
            <!-- 显示文本 -->
              <view style="display:flex;flex-direction:column">
                <text class='content-text'>{{item.content}}</text>
              </view>
             </view>
            </view>
    </block>
    </view>

<view class="talk">
    <input class='input' type='text' value='' confirm-type='send' placeholder='发表评论！' bindinput='talkInput' value='{{inputValue}}'></input>
    <button  class="confirm"  bindtap="submit">确定</button>
</view>

WXSS代码

.newsaContent {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bdescription {
  color: #7a7979;
   font-size: 15px;
   display: -webkit-box;
  text-align: left;
  margin:0px 20px 20px 20px;
   text-indent: 60rpx;
}
.adescription {
  color: rgba(56, 56, 56, 0.849);
  font-size: 20px;
  display: flex;  
justify-content: center;
 margin:20px 40px 20px 40px;
}
.hdescription {
  
  color: #7a7979;
   font-size: 15px;
   display: -webkit-box;
  text-align: left;
  margin:0px 20px 20px 20px;
}
.newsaImage {    
width:600rpx;
height:400rpx; 
margin-bottom: 20px;
margin-left: 80rpx;
}
.top {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 80rpx;
    background-color: #fff;
    border-bottom: solid 1px #efefef;
    margin-top:-20px;
}

.top-item {
    line-height: 80rpx;
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 30px;
    color: #666;
    padding: 0 20rpx;
}

.top-item text {
    display: inline-block;
    line-height: 80rpx;
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 30rpx;
    color: #666;
    padding: 0 20rpx;
}
.talk{
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom:0;
  background-color: white;
}
.user-info {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  margin: 20rpx 20rpx 0 20rpx;
}

.user-head {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background-color: #ccc;
}

.user-name-time {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin-top: 5px;
  margin-left: 10px;
}

.user-name {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.user-publish-time {
  font-size: 20rpx;
  color: #999;
}
.content {
  display: flex;
  margin: 20rpx 10rpx;
  flex-direction: column;
  margin-top:20rpx;
  width: 85%;
}

.content-scroll {
  width: 100%;
}

.content-text {
  font-size: 30rpx;
  color: #666;
  overflow:hidden;
  text-overflow:ellipsis;
  word-wrap: break-word;
  display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
margin: 20rpx 0 0 40rpx;
}
.input{
  width: 540rpx;
  margin-right: 30rpx;
  margin-left: 50rpx;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
  border-bottom: solid 1px #7e7d7d;
}
.confirm{
  font-size: 30rpx;
    margin-top: 30rpx;
  margin-bottom: 50rpx;
  margin-right: 20rpx;
}
button::after {
  border: none;
}

JS代码

const app = getApp()
//原util，时间格式化函数
function formatNumber(n) {//
  n = n.toString()
  return n[1] ? n : '0' + n
}
const formatTime = (date) => {
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

//js主体
Page({
  data: {
    inputValue: null,
  },
  
 onLoad: function (options) {
  var TIME = formatTime(new Date());
  this.setData({
    time: TIME,
  });
  var that = this;
  that.setData({//获取用户信息
    nickName:app.globalData.nickName,
    avatarUrl:app.globalData.avatarUrl
  })
  
//留言显示，按照留言顺序，最新的在最上面
const db = wx.cloud.database({
      env: '云开发实例名称'
    })
    db.collection('数据库名称').get({
      success: res => {
        console.log(res.data.length)
        for (let i=res.data.length-1,j=0; i >= 0;i--,j++) {
          console.log(res.data[j])
          var talks = "talks[" + j + "]";
          that.setData({
            [talks]: res.data[i],
          })
        }
        }
    })
  },
talkInput: function (e) {
    var that= this;
   that.setData({
      talk: e.detail.value
    });
  },
  submit: function (e) {//这个是评论上传函数，是需要点击事件触发的
    var that = this
    if (this.data.talk) {  //talk不为空的时候
      const db = wx.cloud.database()
      if(!that.data.avatarUrl){//判断是否获取到用户信息
        wx.showToast({
          title: '请先获取用户信息！',
          icon: "none"
        })
    wx.getUserProfile({//获得微信用户信息
      desc: '用于完善资料',
      success: function (res) {
        app.globalData.nickName = res.userInfo.nickName;
        app.globalData.avatarUrl = res.userInfo.avatarUrl;
}
     })
     that.setData({//获取用户信息
      nickName:app.globalData.nickName,
      avatarUrl:app.globalData.avatarUrl
    })
    }else{
      db.collection('数据库名称').add({
        data: {
          name: this.data.nickName,//获得用户名
          content: this.data.talk,//获得评论
          time: this.data.time,//获得评论时间
          photo: this.data.avatarUrl,//获得用户头像
        },
        success: res => {
          // 在返回结果中会包含新创建的记录的 _id
          this.setData({
            'inputValue': ''
          })
          wx.showToast({
            title: '评论成功',
          })	//成功将评论数据写入小程序云开发数据库
          var that = this;
          db.collection('数据库名称').get({
            success: res => {
              console.log(res.data.length)
              for (let i = res.data.length - 1, j = 0; i >= 0; i-- , j++) {
                console.log(res.data[j])
                var talks = "talks[" + j + "]";
                that.setData({
                  [talks]: res.data[i],
                })		//将评论区刷新，显示最新的留言
              }
            }
          })
        },
        fail: err => { //未成功写入数据库
          wx.showToast({
            icon: 'none',
            title: '请检查网络'
          })
          console.error('[数据库] [新增记录] 失败：', err)
        }
      })
    }}
    else {// talk为0，输入框未输入数据
      wx.showModal({
        title: '提示',
        content: '评论不能为空',
        showCancel: false,
        confirmText: '我知道了',
      })
    }
  }
  })

PS：代码亲测可用！
除了云开发ID和存储名字处需要自己输入以外，其余的可以根据自己的命名稍作修改
为了照顾新手（我也是）的感受，所有代码直接复制粘贴即可运行！！(最烦的就是复制别人代码还老是出错，找错还要半天。。)
嘿嘿，新手写博客当作笔记，大佬轻喷。。