微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

作者：有心人php | 来源：互联网 | 2024-11-07 09:43

本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。

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

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

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

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

html：

回复的关键代码

{{item.nickname}} 回复 {{item.reply_name}}： {{item.nickname}}：{{item.text}}{{item.createtime}} 删除

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

完整代码：

> {{motto}} {{itemName.nickname}}{{itemName.createtime}}{{itemName.content}}{itemName.total_likes}} --> {{itemName.nickname}}{{itemName.text}}{{itemName.createtime}}删除{itemName.total_likes}} --> {{item.nickname}} 回复 {{item.reply_name}}： {{item.nickname}}：{{item.text}}{{item.createtime}} 删除发送发送

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, &＃39;Segoe UI&＃39;, Roboto, Oxygen, Ubuntu, Cantarell, &＃39;Open Sans&＃39;, &＃39;Helvetica Neue&＃39;, 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 === &＃39;&＃39;) {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:&＃39;删除评论&＃39;,content:&＃39;是否删除该评论&＃39;,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: &＃39;删除成功&＃39;,})})}}}) }, delel(e){var that = this;wx.showModal({title:&＃39;删除评论&＃39;,content:&＃39;是否删除该评论&＃39;,success:function(res){if(res.confirm){var commentId = e.currentTarget.dataset.id;console.log(commentId)wx.cloud.callFunction({// 云函数名称name: &＃39;remove&＃39;,// 传给云函数的参数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: &＃39;删除成功&＃39;,})})}}}) },replyComment:function(e){var id = e.currentTarget.dataset.cidconsole.log(id)var name = e.currentTarget.dataset.namevar type = e.currentTarget.dataset.typevar parent_id = e.currentTarget.dataset.pidconsole.log(parent_id)this.setData({now_reply:id,now_reply_name: name,now_reply_type: type,now_parent_id:parent_id,focus:true,placeholder: &＃39;回复&＃39; + name+":"})},jcontent:function(e){var id = e.currentTarget.dataset.cidconsole.log(id)var name = e.currentTarget.dataset.namevar type = e.currentTarget.dataset.typevar parent_id = e.currentTarget.dataset.pidconsole.log(parent_id)this.setData({now_reply:getApp().globalData.commentId,now_reply_name:&＃39;&＃39;,now_reply_type:&＃39;&＃39;,now_parent_id:getApp().globalData.commentId,focus:true,placeholder: &＃39;回复帖子&＃39;+":"}) }, 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 = nullvar parent_id = 0var reply_id = that.data.now_replyconsole.log("回复的id是" + reply_id)if (reply_id!=getApp().globalData.commentId ){console.log("现在是回复")var reply_type = that.data.now_reply_typeparent_id = that.data.now_parent_idconsole.log("回复的所属的parent_id是" + parent_id)console.log("回复的类型是" + reply_type)if (parent_id!=getApp().globalData.commentId) {if (reply_type == 1){parent_id = reply_idconsole.log("现在是回复评论")}else{reply_name = that.data.now_reply_nameconsole.log("现在是再回复" + reply_name+"的回复")}}}else{console.log("现在是评论" )}wx.showLoading({title: &＃39;发送中&＃39;,mask:true})var text=this.data.contentdb.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: &＃39;成功&＃39;,icon: &＃39;success&＃39;,duration: 500})this.setData({content:&＃39;&＃39;});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:&＃39;&＃39;, fenlei:&＃39;&＃39;, /*回复再回复变量 */ now_reply:&＃39;&＃39;, now_reply_name: &＃39;&＃39;, now_reply_type:&＃39;&＃39;, now_parent_id:&＃39;&＃39;, focus:&＃39;&＃39;, placeholder:&＃39;&＃39;, content:&＃39;&＃39;, only:&＃39;&＃39;},contentInput(e) { //当输入框的值发生改变时，获取this.setData({content: e.detail.value});},onReplyBlur: function (e) {var that = this;const text = e.detail.value.trim(); //删空格if (text === &＃39;&＃39;) {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:&＃39;删除评论&＃39;,content:&＃39;是否删除该评论&＃39;,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: &＃39;删除成功&＃39;,})})}}}) }, delel(e){var that = this;wx.showModal({title:&＃39;删除评论&＃39;,content:&＃39;是否删除该评论&＃39;,success:function(res){if(res.confirm){var commentId = e.currentTarget.dataset.id;console.log(commentId)wx.cloud.callFunction({// 云函数名称name: &＃39;remove&＃39;,// 传给云函数的参数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: &＃39;删除成功&＃39;,})})}}}) },replyComment:function(e){var id = e.currentTarget.dataset.cidconsole.log(id)var name = e.currentTarget.dataset.namevar type = e.currentTarget.dataset.typevar parent_id = e.currentTarget.dataset.pidconsole.log(parent_id)this.setData({now_reply:id,now_reply_name: name,now_reply_type: type,now_parent_id:parent_id,focus:true,placeholder: &＃39;回复&＃39; + name+":"})},jcontent:function(e){var id = e.currentTarget.dataset.cidconsole.log(id)var name = e.currentTarget.dataset.namevar type = e.currentTarget.dataset.typevar parent_id = e.currentTarget.dataset.pidconsole.log(parent_id)this.setData({now_reply:getApp().globalData.commentId,now_reply_name:&＃39;&＃39;,now_reply_type:&＃39;&＃39;,now_parent_id:getApp().globalData.commentId,focus:true,placeholder: &＃39;回复帖子&＃39;+":"}) }, 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 = nullvar parent_id = 0var reply_id = that.data.now_replyconsole.log("回复的id是" + reply_id)if (reply_id!=getApp().globalData.commentId ){console.log("现在是回复")var reply_type = that.data.now_reply_typeparent_id = that.data.now_parent_idconsole.log("回复的所属的parent_id是" + parent_id)console.log("回复的类型是" + reply_type)if (parent_id!=getApp().globalData.commentId) {if (reply_type == 1){parent_id = reply_idconsole.log("现在是回复评论")}else{reply_name = that.data.now_reply_nameconsole.log("现在是再回复" + reply_name+"的回复")}}}else{console.log("现在是评论" )}wx.showLoading({title: &＃39;发送中&＃39;,mask:true})var text=this.data.contentdb.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: &＃39;成功&＃39;,icon: &＃39;success&＃39;,duration: 500})this.setData({content:&＃39;&＃39;});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: &＃39;important1&＃39;,// 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 {console.log(res)for (var a = 0; a {that.setData({boolean:res.data[0].value})console.log(2112)console.log(that.data.boolean)}})},/*** 生命周期函数--监听页面显示*/onShow: function () {if (wx.canIUse(&＃39;hideHomeButton&＃39;)) {wx.hideHomeButton()}},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},bindrefresherrefresh(e) {wx.showToast({title: &＃39;刷新成功&＃39;,icon: &＃39;success&＃39;,})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 })

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

huifu库：放置所有的回复

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

最后解析一下：

/*3.5.2增加回复（n级回复）*/ /*3.5.2.1回复帖子*/ jcontent:function(e){var id = e.currentTarget.dataset.cidconsole.log(id)var name = e.currentTarget.dataset.namevar type = e.currentTarget.dataset.typevar parent_id = e.currentTarget.dataset.pidconsole.log(parent_id)this.setData({now_reply:getApp().globalData.commentId,now_reply_name:&＃39;&＃39;,now_reply_type:&＃39;&＃39;,now_parent_id:getApp().globalData.commentId,focus:true,placeholder: &＃39;回复帖子&＃39;+":"}) },/*先获取到当前回复帖子的id号，同时将本回复所属于的帖子的id号传入。回复帖子的情况下now_reply和now_parent_id相同，因为所属的id和要回复的id号都是本帖子，并且没有回复对象的名字。 3.5.2.2回复一条回复*/replyComment:function(e){var id = e.currentTarget.dataset.cidconsole.log(id)var name = e.currentTarget.dataset.namevar type = e.currentTarget.dataset.typevar parent_id = e.currentTarget.dataset.pidconsole.log(parent_id)this.setData({now_reply:id,now_reply_name: name,now_reply_type: type,now_parent_id:parent_id,focus:true,placeholder: &＃39;回复&＃39; + name+":"})}, /*回复回复情况下，now_reply获得当前回复的回复id值， now_reply_name为当前回复对象的人的姓名，now_parent_id获取到当前该回复属于哪一个帖子/属于哪一个回复（如果回复的是帖子的话该值为0，否则为回复的回复id值），而type用来标记当前是何种类别的回复。*/ var reply_name = nullvar parent_id = 0var reply_id = that.data.now_replyconsole.log("回复的id是" + reply_id)if (reply_id!=getApp().globalData.commentId ){console.log("现在是回复")var reply_type = that.data.now_reply_typeparent_id = that.data.now_parent_idconsole.log("回复的所属的parent_id是" + parent_id)console.log("回复的类型是" + reply_type)if (parent_id!=getApp().globalData.commentId) {if (reply_type == 1){parent_id = reply_idconsole.log("现在是回复评论")}else{reply_name = that.data.now_reply_nameconsole.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()}) /*根据不同的情况，将各中值赋值后，上传到数据库中保存。*/