微信小程序开发类似微博回复功能自带云开发数据库（无限回复）

最新推荐文章于 2023-05-29 23:11:34 发布

一只搬砖狗

最新推荐文章于 2023-05-29 23:11:34 发布

阅读量1.2k

点赞数 7

文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/weixin_45829292/article/details/122492839

版权

注意事项：本文放置了关键代码和全部该页的全部代码，按需自取。html中存在少许图片，大家加上自己喜欢的即可。数据库结构内容也会展示给大家。

效果：第一条回复的是帖子，第二条回复的是第三条，第三条回复的是第一条。第一条回复下的回复均按照时间先后进行排序。

选中回复的人的时候，输入框会显示回复的对象。

这里把部分代码和全部代码都放上了，大家自取。然后解析在最后。

html：

回复的关键代码

 <!--双重循环 回复回复表 尝试回复和回复回复再一个表中--> 
      <block wx:for="{{list1}}"  wx:for-index="id" wx:for-item="item">  
            <view class="reply" wx:if="{{item.parent_id==itemName._id}}">  <!--判断此回复属不属于这个评论-->
              <view class="reply_kuang" bindtap='replyComment' data-name='{{item.nickname}}' data-cid='{{item._id}}' data-type="2" data-pid="{{item.parent_id}}">
                <view wx:if="{{item.reply_name.length>0}}">{{item.nickname}} 回复 {{item.reply_name}}：</view>  <!--大于0说明是有回复对象的 -->
                <block wx:else> <!--说明评论是评论这条评论的-->
                  <view>{{item.nickname}}：</view>
                </block>
                <view class=''>{{item.text}}<text class="reply_time">{{item.createtime}}</text> 
                <text bindtap="dele"  wx:if="{{item._openid==only}}" data-Id="{{item._id}}" class="showdel">删除</text>
              </view>
              </view>
             
            </view>
         </block>

知道有些兄弟有一部分代码断，也整不出来，我干脆就把我这个界面的全放上来吧

完整代码：

<!--pages/square/square.wxml-->
<!--回复评论-->>
<!--index.wxml-->
<view>

<!-- 主页内容 -->
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
   
      <scroll-view  class="refresh"
  scroll-y="{{true}}"
  refresher-enabled="{{true}}"
  refresher-triggered="{{showTriggered}}"
  refresher-threshold="{{100}}"
  refresher-default-style="none"
  bindrefresherrefresh="bindrefresherrefresh">
        <view class="refresh-container" slot="refresher">
    <image src="/images/011c835d761152a8012060be1d17f9.gif"></image>
  </view>
  <block wx:for="{{list}}" wx:for-index="id" wx:for-item="itemName">
  <view class="box" >
    <view class="firstblock">
      <image class="touxiang" src='{{itemName.avatarurl}}'> </image>
      <view class="person">
        <view class="name">
          <text class="showname">{{itemName.nickname}}</text>
        </view>
        <view class="tel">
          <text class="showtime">{{itemName.createtime}}</text>
        </view>
      </view>
    </view>
    <view class="secondblock"  bindtap="jcontent"  data-name='{{itemName.nickname}}' data-cid='{{itemName._id}}' data-type="1" data-pid="{{itemName._id}}">
      <text class="content" >{{itemName.content}}</text>
      <view wx:if="{{itemName.tupian!=''}}">
     <image class="bucuo"  src="{{itemName.tupian}}"></image>
     </view>
    </view>
    <view class="thirdblock">
      <!-- <image class="like" src="/images/like.png"></image>
      <text class="num">{{itemName.total_likes}}</text> -->
    </view>
  </view>
</block>


<block wx:for="{{list1}}" wx:for-index="id" wx:for-item="itemName">
  <view class="box1"  wx:if="{{itemName.parent_id=='0'}}">
    <view class="firstblock1">
      <image class="touxiang1" src='{{itemName.avatarurl}}'> </image>
      <view class="person1">
        <view class="name1">
          <text class="showname1">{{itemName.nickname}}</text>
        </view>
      </view>
    </view>
    <view class="secondblock1">
      <text class="content1" bindtap="replyComment" data-name='{{itemName.nickname}}' data-cid='{{itemName._id}}' data-type="1" data-pid="{{itemName._id}}">{{itemName.text}}</text>
      <view class="thirdblock1">
      <view class="tel1">
          <text class="showtime">{{itemName.createtime}}</text>
          <text bindtap="delel"  wx:if="{{itemName._openid==only}}" data-Id="{{itemName._id}}" class="showdel">删除</text>
        </view>
      <!-- <image class="like" src="/images/like.png"></image>
      <text class="num">{{itemName.total_likes}}</text> -->
    </view>

      <!--双重循环 回复回复表 尝试回复和回复回复再一个表中--> 
      <block wx:for="{{list1}}"  wx:for-index="id" wx:for-item="item">  
            <view class="reply" wx:if="{{item.parent_id==itemName._id}}">  <!--判断此回复属不属于这个评论-->
              <view class="reply_kuang" bindtap='replyComment' data-name='{{item.nickname}}' data-cid='{{item._id}}' data-type="2" data-pid="{{item.parent_id}}">
                <view wx:if="{{item.reply_name.length>0}}">{{item.nickname}} 回复 {{item.reply_name}}：</view>  <!--大于0说明是有回复对象的 -->
                <block wx:else> <!--说明评论是评论这条评论的-->
                  <view>{{item.nickname}}：</view>
                </block>
                <view class=''>{{item.text}}<text class="reply_time">{{item.createtime}}</text> 
                <text bindtap="dele"  wx:if="{{item._openid==only}}" data-Id="{{item._id}}" class="showdel">删除</text>
              </view>
              </view>
             
            </view>
         </block>
    </view>
  
  </view>
</block>
</scroll-view>
    </view>
  </view>
  <!--pages/huifu/huifu.wxml-->
<view class="bottomrow" >
  <view class="container">
  <view class="release">
    <textarea 
      class="text"
      placeholder-class="releaseInput"
      value="{{content}}"
      fixed="true" 
      maxlength="120" 
      show-confirm-bar="{{false}}" 
      cursor-spacing="15" 
      auto-height="true" 
      focus="{{focus}}"
      placeholder="您暂时没有权限回复 "
      bindinput="contentInput" wx:if="{{boolean=='1'||boolean=='2'}}" disabled="disabled"></textarea>
      <textarea 
      class="text"
      placeholder-class="releaseInput"
      value="{{content}}"
      fixed="true" 
      maxlength="120" 
      show-confirm-bar="{{false}}" 
      cursor-spacing="15" 
      auto-height="true" 
      focus="{{focus}}"
      placeholder="{{placeholder}}" bindblur="onReplyBlur"
      bindinput="contentInput" wx:else></textarea>

    <view class="submit1"  wx:if="{{boolean=='1'||boolean=='2'}}">发送</view>
    <view class="submit" bindtap="comment" wx:else>发送</view>
  </view>
</view>
</view>

css：

我知道大家是贪婪的css肯定也想要

/* pages/jcontent/jcontent.wxss *//* pages/square/square.wxss */
@import "/pages/bottom_menu/bottom_menu";

/*引入bottomwxss 复用*/
page {
  background-color: #EFEFEF;
}

.scbg {

  background-color: #EFEFEF;
  width: 100%;
  height: 93%;
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  position: absolute;
}

.box {
  width: 100%;
  background-color: white;
  padding-top: 30rpx;
  border-bottom: 2rpx solid #EFEFEF;
margin-bottom: 30rpx;
border-radius: 40rpx;
}
.box1{
  margin-left: 16rpx;
  width: 96%;
  background-color: white;
  padding-top: 30rpx;
  border-bottom: 2rpx solid #EFEFEF;
  border-radius: 40rpx;
  margin-bottom: 10rpx;

}
.firstblock {
  height: 150rpx;
  margin-left: 4%;
  margin-right: 4%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.firstblock1 {
  height: 60rpx;
  margin-left: 4%;
  margin-right: 4%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.touxiang {
  width: 80rpx;
  height: 80rpx;
}
.touxiang1 {
  width: 70rpx;
  height: 70rpx;
  border-radius: 40rpx;
}

.person {
  width: 75%;
  height: 130rpx;
  margin-left: 30rpx;
  margin-top: 5rpx;

}
.person1 {
  width: 45%;
  height: 60rpx;
  margin-left: 30rpx;
  margin-top: 15rpx;

}
.name {
  display: flex;
  justify-content: flex-start;
  margin-top: 10rpx;
  font-size: 40rpx;
  flex-direction: row;

}
.name1 {
  display: flex;
  justify-content: flex-start;
  margin-top: 0rpx;
  font-size: 40rpx;
  flex-direction: row;

}

.tel {
  display: flex;
  justify-content: flex-start;
  margin-top: 2rpx;
  flex-direction: row;
}
.tel1 {
  display: flex;
  justify-content: flex-start;
  margin-top: 2rpx;
  flex-direction: row;
  margin-left: 390rpx;
}

.showname {
  font-size: 28rpx;
  color: #3F518B;
  font-family: PingFangSC-regular;
  font-weight: bold;

}
.showname1 {
  font-size: 26rpx;
  color: #3F518B;
  font-family: PingFangSC-regular;
  font-weight: bold;

}

.showtime {
  font-size: 21rpx;
  color: #5e5d5d;
  font-family: PingFangSC-regular;
}

.secondblock {
  margin-top: 80rpx;
  margin-left: 15%;
  margin-right: 7%;
  padding-bottom: 20rpx;
}
.secondblock1 {
  margin-top: 10rpx;
  height: auto;
}
.bucuo{
  width: 300rpx;
  height: 250rpx;
}
.xx{
  margin-left: 5rpx;
  width: 70rpx;
  height: 65rpx;
}
.content {
  font-size: 29rpx;
  color: #101010;
  word-break: break-all;
}
.content1 {
  font-size: 29rpx;
  color: #101010;
  margin-left: 120rpx;
  word-break: break-all;
}

.thirdblock {
  height: 200rpx;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5rpx;
}
.thirdblock1 {
  height: 30rpx;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5rpx;
 
}
.like {
  margin-top: 4rpx;
  margin-left: 20rpx;
  width: 50rpx;
  height: 50rpx;
}
.num {
  font-size: 30rpx;
  line-height:50rpx;
  margin-top: 25rpx;
  margin-left: 20rpx;
  height: 52rpx;
  color: #101010;
}
.dele{
  font-size: 26rpx;
  line-height:50rpx;
  margin-left: 510rpx;
  height: 52rpx;
  color:white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.refresh{position:absolute;left:0;top:0rpx;width:100%;height:93%; background-color:#eeeeee;color:#000000;}
.refresh-container image{ width: 750rpx; height: 500rpx;} 
.tishi{
  display: flex;
  flex-direction: row;
  justify-content: center;
  color:rgb(138, 42, 42);
  font-weight: bold;
}
.textarea{
background-color: teal;
}
/* pages/bottom_menu/bottom_menu.wxss */
.bottomrow{
  background-color:teal;
  width: 100%;
  height: 5%;
  bottom: 0rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  border-top:black ;

}
.bottomtab{
  width: 50rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.release{
  font-size: 14px;
  background-color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 5px 0 5px 15px;
}
.releaseInput{
  color: #ccc;
}
.release .text{
  margin-left: 20rpx;
  width: 299px;
  min-height: 17px;
  max-height: 51px;
  line-height: 17px;
  border-width: 7px 10px;
  border-style: solid;
  border-color: #fff;
  background-color: #fff;
}
.release .submit{
  color: #6c0;
  width: 58px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
.release .submit1{
  color: rgb(132, 133, 132);
  width: 58px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
.reply{
  padding-left: 110rpx;
  font-size: 29rpx;
}
.reply_time{
  
float: right;
padding-right: 5rpx;
font-size: 21rpx;
color: #5e5d5d;
font-family: PingFangSC-regular;
}
.reply_kuang{
 
  margin-top: 5rpx;
}
.is-none{
  display: none
}
.showdel{
  font-size: 25rpx;
  color: #5e5d5d;
  font-family: PingFangSC-regular;
  margin-left: 30rpx;
  color: #3F518B;
position: relative;
bottom: 5rpx;
}

最后js

关键代码：


onReplyBlur: function (e) {
  var that = this;
  const text = e.detail.value.trim(); //删空格
  if (text === '') {
    that.setData({
      now_reply: 0,
      now_reply_name:null,
      now_reply_type:0,
      now_parent_id:0,
      placeholder: "就不说一句吗？",
      focus:false
    });
  }
},
dele(e){
  var that = this;
  wx.showModal({
    title:'删除评论',
  content:'是否删除该评论',
  success:function(res){
    if(res.confirm){
      var commentId = e.currentTarget.dataset.id;
      console.log(commentId)
      db.collection("huifu").doc(commentId).remove().then(res=>{
                 console.log(res)
                 that.bindrefresherrefresh()
                 wx.showToast({
                   title: '删除成功',
                 })
               })
    }
  }
  }) 
},
delel(e){
  var that = this;
  wx.showModal({
    title:'删除评论',
  content:'是否删除该评论',
  success:function(res){
    if(res.confirm){
      var commentId = e.currentTarget.dataset.id;
      console.log(commentId)
      wx.cloud.callFunction({
        // 云函数名称
        name: 'remove',
        // 传给云函数的参数
        data: {
          parent_id:commentId
        },
        success: function(res) {
          console.log(res.result) 
          console.log(1212)
        },
        fail: console.error
      })
      db.collection("huifu").doc(commentId).remove().then(res=>{
                 console.log(res)
                 that.bindrefresherrefresh()
                 wx.showToast({
                   title: '删除成功',
                 })
               })
    }
  }
  }) 
},
  replyComment:function(e){
    var id = e.currentTarget.dataset.cid
    console.log(id)
    var name = e.currentTarget.dataset.name
    var type = e.currentTarget.dataset.type
    var parent_id = e.currentTarget.dataset.pid
    console.log(parent_id)
    this.setData({
      now_reply:id,
      now_reply_name: name,
      now_reply_type: type,
      now_parent_id:parent_id,
      focus:true,
      placeholder: '回复' + name+":"
    })
  },
  jcontent:function(e){
    var id = e.currentTarget.dataset.cid
    console.log(id)
    var name = e.currentTarget.dataset.name
    var type = e.currentTarget.dataset.type
    var parent_id = e.currentTarget.dataset.pid
    console.log(parent_id)
    this.setData({
      now_reply:getApp().globalData.commentId,
      now_reply_name:'',
      now_reply_type:'',
      now_parent_id:getApp().globalData.commentId,
      focus:true,
      placeholder: '回复帖子'+":"
    })      
  },
comment(e){
  
  var that= this
  // var comment_list = that.data.comment_list  //获取data中的评论列表
  // var comment_list2 = that.data.comment_list2  //获取data中的回复列表

  // var userinfo = that.data.userinfo   //获取当前的用户信息
  
 
  var reply_name = null
  var parent_id = 0
  var reply_id = that.data.now_reply
  console.log("回复的id是" + reply_id)
  if (reply_id!=getApp().globalData.commentId ){
    console.log("现在是回复")
    var reply_type = that.data.now_reply_type
    parent_id = that.data.now_parent_id
    console.log("回复的所属的parent_id是" + parent_id)
    console.log("回复的类型是" + reply_type)
    if (parent_id!=getApp().globalData.commentId) {
      if (reply_type == 1){
        parent_id = reply_id
        console.log("现在是回复评论")
      }else{
  
        reply_name = that.data.now_reply_name
        console.log("现在是再回复" + reply_name+"的回复")
      }
    }
  }else{
    console.log("现在是评论" )
  }

  wx.showLoading({
    title: '发送中',
    mask:true
  })

  var text=this.data.content
  db.collection("huifu").add({
    data:{
      commentId:getApp().globalData.commentId,
      text:text,
      createtime:db.serverDate(),
      nickname: getApp().globalData.nickname,
      avatarurl:getApp().globalData.avurl,
      reply_id:reply_id,
      parent_id:parent_id,
      reply_name:reply_name,
      fenlei:that.data.fenlei

    }
  }).then(res=>{
    console.log(res)
    that.bindrefresherrefresh()
  })
  setTimeout(function()  {
    wx.hideLoading()
  });
  wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 500
  })
  this.setData({
    content:''

  });
  
  that.setData({
    comment_text:null,
    now_reply: 0,
    now_reply_name: null,
    now_reply_type: 0,
    now_parent_id: 0,
    placeholder: "就不说一句吗？",
  })

  },

完整的js：

// pages/square/square.js
const db=wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tupian:"/images/zhinanb.png",
    wode:"/images/mineblack.png",
    tongzhi:"/images/messagepurple.png",
list:[],
list1:[],
showTriggered: true,
boolean:'',
fenlei:'',
/*回复再回复变量 */
now_reply:'',
now_reply_name: '',
now_reply_type:'',
now_parent_id:'',
focus:'',
placeholder:'',
content:'',
only:''

  },
  
  contentInput(e) { //当输入框的值发生改变时，获取
    this.setData({
      content: e.detail.value
    });
  },

onReplyBlur: function (e) {
  var that = this;
  const text = e.detail.value.trim(); //删空格
  if (text === '') {
    that.setData({
      now_reply: 0,
      now_reply_name:null,
      now_reply_type:0,
      now_parent_id:0,
      placeholder: "就不说一句吗？",
      focus:false
    });
  }
},
dele(e){
  var that = this;
  wx.showModal({
    title:'删除评论',
  content:'是否删除该评论',
  success:function(res){
    if(res.confirm){
      var commentId = e.currentTarget.dataset.id;
      console.log(commentId)
      db.collection("huifu").doc(commentId).remove().then(res=>{
                 console.log(res)
                 that.bindrefresherrefresh()
                 wx.showToast({
                   title: '删除成功',
                 })
               })
    }
  }
  }) 
},
delel(e){
  var that = this;
  wx.showModal({
    title:'删除评论',
  content:'是否删除该评论',
  success:function(res){
    if(res.confirm){
      var commentId = e.currentTarget.dataset.id;
      console.log(commentId)
      wx.cloud.callFunction({
        // 云函数名称
        name: 'remove',
        // 传给云函数的参数
        data: {
          parent_id:commentId
        },
        success: function(res) {
          console.log(res.result) 
          console.log(1212)
        },
        fail: console.error
      })
      db.collection("huifu").doc(commentId).remove().then(res=>{
                 console.log(res)
                 that.bindrefresherrefresh()
                 wx.showToast({
                   title: '删除成功',
                 })
               })
    }
  }
  }) 
},
  replyComment:function(e){
    var id = e.currentTarget.dataset.cid
    console.log(id)
    var name = e.currentTarget.dataset.name
    var type = e.currentTarget.dataset.type
    var parent_id = e.currentTarget.dataset.pid
    console.log(parent_id)
    this.setData({
      now_reply:id,
      now_reply_name: name,
      now_reply_type: type,
      now_parent_id:parent_id,
      focus:true,
      placeholder: '回复' + name+":"
    })
  },
  jcontent:function(e){
    var id = e.currentTarget.dataset.cid
    console.log(id)
    var name = e.currentTarget.dataset.name
    var type = e.currentTarget.dataset.type
    var parent_id = e.currentTarget.dataset.pid
    console.log(parent_id)
    this.setData({
      now_reply:getApp().globalData.commentId,
      now_reply_name:'',
      now_reply_type:'',
      now_parent_id:getApp().globalData.commentId,
      focus:true,
      placeholder: '回复帖子'+":"
    })      
  },
comment(e){
  
  var that= this
  // var comment_list = that.data.comment_list  //获取data中的评论列表
  // var comment_list2 = that.data.comment_list2  //获取data中的回复列表

  // var userinfo = that.data.userinfo   //获取当前的用户信息
  
 
  var reply_name = null
  var parent_id = 0
  var reply_id = that.data.now_reply
  console.log("回复的id是" + reply_id)
  if (reply_id!=getApp().globalData.commentId ){
    console.log("现在是回复")
    var reply_type = that.data.now_reply_type
    parent_id = that.data.now_parent_id
    console.log("回复的所属的parent_id是" + parent_id)
    console.log("回复的类型是" + reply_type)
    if (parent_id!=getApp().globalData.commentId) {
      if (reply_type == 1){
        parent_id = reply_id
        console.log("现在是回复评论")
      }else{
  
        reply_name = that.data.now_reply_name
        console.log("现在是再回复" + reply_name+"的回复")
      }
    }
  }else{
    console.log("现在是评论" )
  }

  wx.showLoading({
    title: '发送中',
    mask:true
  })

  var text=this.data.content
  db.collection("huifu").add({
    data:{
      commentId:getApp().globalData.commentId,
      text:text,
      createtime:db.serverDate(),
      nickname: getApp().globalData.nickname,
      avatarurl:getApp().globalData.avurl,
      reply_id:reply_id,
      parent_id:parent_id,
      reply_name:reply_name,
      fenlei:that.data.fenlei

    }
  }).then(res=>{
    console.log(res)
    that.bindrefresherrefresh()
  })
  setTimeout(function()  {
    wx.hideLoading()
  });
  wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 500
  })
  this.setData({
    content:''

  });
  
  that.setData({
    comment_text:null,
    now_reply: 0,
    now_reply_name: null,
    now_reply_type: 0,
    now_parent_id: 0,
    placeholder: "就不说一句吗？",
  })

  },
  /**
   * 
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      only:getApp().globalData.openid
    })
console.log("验证判断",this.data.only)
    var that=this
   //that.data.url=that.data.list2[jk].op
    // wx.getStorage({
    //   key: 'important1',
    //   success: function(res) {
    //     console.log(res)
    //     that.setData({
    //       url:res.data
    //     })
    //   } 
    // })
    var commentId = getApp().globalData.commentId 
    db.collection("tongzhi").where({_id:commentId}).get({
      success:res=>{
        console.log(999)
        console.log(res)
        for (var a = 0; a < res.data.length; a++) {
          var unixTimestamp = new Date(res.data[a].createtime)
          var birthday = unixTimestamp.getFullYear() + "年" + (unixTimestamp.getMonth() + 1) + "月" + unixTimestamp.getDate() + "日 " + checked(unixTimestamp.getHours() )+ ":" + checked(unixTimestamp.getMinutes() )+ ":" + checked(unixTimestamp.getSeconds());
          function checked(j){
            if(j<10)
            j='0'+j;
             return j;
    }
          res.data[a].createtime = birthday;
    }
        this.setData({
          list:res.data,
          fenlei:res.data[0].fenlei
         // list1:res.data[0].content1
        })
      }
    })
    console.log(123)
    db.collection("huifu").where({commentId:commentId}).get({
      success:res=>{
        console.log(res)
        for (var a = 0; a < res.data.length; a++) {
          var unixTimestamp = new Date(res.data[a].createtime)
          var birthday = unixTimestamp.getFullYear() + "年" + (unixTimestamp.getMonth() + 1) + "月" + unixTimestamp.getDate() + "日 " + checked(unixTimestamp.getHours() )+ ":" + checked(unixTimestamp.getMinutes() )+ ":" + checked(unixTimestamp.getSeconds());
          function checked(j){
            if(j<10)
            j='0'+j;
             return j;
    }
          res.data[a].createtime = birthday;
          console.log(birthday)
    }
        this.setData({
          list1:res.data.reverse(),
        })
      console.log(res.data)
      }
    })
        db.collection("mingdan").where({
      _openid:getApp().globalData.openid
    }).get({
          success:res=>{
              that.setData({
                boolean:res.data[0].value
              })
              console.log(2112)
              console.log(that.data.boolean)
          }
        })
      
    


   
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (wx.canIUse('hideHomeButton')) {
      wx.hideHomeButton()
    }
   
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },
  bindrefresherrefresh(e) {
    wx.showToast({
      title: '刷新成功',
      icon: 'success',
    })
    setTimeout(() => {
      this.setData({ 
        showTriggered: false
      })
    }, 2000);
    var commentId = getApp().globalData.commentId 
    db.collection("huifu").where({commentId:commentId}).get({
      success:res=>{
        console.log(res)
        for (var a = 0; a < res.data.length; a++) {
          var unixTimestamp = new Date(res.data[a].createtime)
          var birthday = unixTimestamp.getFullYear() + "年" + (unixTimestamp.getMonth() + 1) + "月" + unixTimestamp.getDate() + "日 " + checked(unixTimestamp.getHours() )+ ":" + checked(unixTimestamp.getMinutes() )+ ":" + checked(unixTimestamp.getSeconds());
          function checked(j){
            if(j<10)
            j='0'+j;
             return j;
    }
          res.data[a].createtime = birthday;
          console.log(birthday)
    }
        this.setData({
          list1:res.data.reverse()
        })
      console.log(res.data)
      }
    })
    
 
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

数据库格式：用的是微信小程序自带的数据库

huifu库：放置所有的回复

tongzhi库：放置所有的通知（帖子）

最后解析一下：

/*3.5.2增加回复（n级回复）*/
/*3.5.2.1回复帖子*/
jcontent:function(e){
    var id = e.currentTarget.dataset.cid
    console.log(id)
    var name = e.currentTarget.dataset.name
    var type = e.currentTarget.dataset.type
    var parent_id = e.currentTarget.dataset.pid
    console.log(parent_id)
    this.setData({
      now_reply:getApp().globalData.commentId,
      now_reply_name:'',
      now_reply_type:'',
      now_parent_id:getApp().globalData.commentId,
      focus:true,
      placeholder: '回复帖子'+":"
    })      
  },

/*先获取到当前回复帖子的id号，同时将本回复所属于的帖子的id号传入。
回复帖子的情况下now_reply和now_parent_id相同，因为所属的id和要回复的id号都是本帖子，
并且没有回复对象的名字。
3.5.2.2回复一条回复*/
 replyComment:function(e){
    var id = e.currentTarget.dataset.cid
    console.log(id)
    var name = e.currentTarget.dataset.name
    var type = e.currentTarget.dataset.type
    var parent_id = e.currentTarget.dataset.pid
    console.log(parent_id)
    this.setData({
      now_reply:id,
      now_reply_name: name,
      now_reply_type: type,
      now_parent_id:parent_id,
      focus:true,
      placeholder: '回复' + name+":"
    })
  },
/*回复回复情况下，now_reply获得当前回复的回复id值，
now_reply_name为当前回复对象的人的姓名，now_parent_id获取到当前该回复属于哪一个帖子/属于哪一个回复（如果回复的是帖子的话该值为0，否则为回复的回复id值），
而type用来标记当前是何种类别的回复。*/
var reply_name = null
  var parent_id = 0
  var reply_id = that.data.now_reply
  console.log("回复的id是" + reply_id)
  if (reply_id!=getApp().globalData.commentId ){
    console.log("现在是回复")
    var reply_type = that.data.now_reply_type
    parent_id = that.data.now_parent_id
    console.log("回复的所属的parent_id是" + parent_id)
    console.log("回复的类型是" + reply_type)
    if (parent_id!=getApp().globalData.commentId) {
      if (reply_type == 1){
        parent_id = reply_id
        console.log("现在是回复评论")
      }else{
        reply_name = that.data.now_reply_name
        console.log("现在是再回复" + reply_name+"的回复")
      }
    }
  }else{
    console.log("现在是评论" )
  }
/*首先通过当前的reply_id判断是否等于该帖子的id如果不等则说明现在的操作不是回复本帖子而是回复一条回复或者是回复一条别人回复的回复，
如果等于则是一条回复帖子的评论。将获取到的parent_id 和type赋值给局部变量后，判断当前parent_id是否等于帖子的id号来判断，
当前的操作是属于回复，如果type的值等于1的话，表明现在是回复一条回复，其属于当前的回复，
所以将reply_id赋值给parent_id，因为回复一条回复，所以只需要属于这条评论，
不需要获取回复人的姓名，直接罗列在该回复人回复的下面，否则就是回复回复后的再回复，
此时需要获得回复对象的姓名，
来区分是回复这条评论还是回复评论下面的一条评论。根据对应的操作把相应的值赋值。*/
 db.collection("huifu").add({
    data:{
      commentId:getApp().globalData.commentId,
      text:text,
      createtime:db.serverDate(),
      nickname: getApp().globalData.nickname,
      avatarurl:getApp().globalData.avurl,
      reply_id:reply_id,
      parent_id:parent_id,
      reply_name:reply_name,
      fenlei:that.data.fenlei

    }
  }).then(res=>{
    console.log(res)
    that.bindrefresherrefresh()
  })
/*根据不同的情况，将各中值赋值后，上传到数据库中保存。*/

所有代码都给了，再有问题说不过去了吧，同学加油

一只搬砖狗

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发类似微博回复功能自带云开发数据库（无限回复）

注意事项：本文放置了关键代码和全部该页的全部代码，按需自取。html中存在少许图片，大家加上自己喜欢的即可。数据库结构内容也会展示给大家。效果：第一条回复的是帖子，第二条回复的是第三条，第三条回复的是第一条。第一条回复下的回复均按照时间先后进行排序。选中回复的人的时候，输入框会显示回复的对象。这里把部分代码和全部代码都放上了，大家自取。然后解析...
复制链接

扫一扫