热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,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, '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.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: '回复' + 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:'',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 = 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: '发送中',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: '成功',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.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: '回复' + 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:'',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 = 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: '发送中',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: '成功',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 {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('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 })

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

 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:'',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.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: '回复' + 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()})
/*根据不同的情况,将各中值赋值后,上传到数据库中保存。*/

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


推荐阅读
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • 本文详细介绍了JQuery Mobile框架中特有的事件和方法,帮助开发者更好地理解和应用这些特性,提升移动Web开发的效率。 ... [详细]
  • 解决JavaScript中法语字符排序问题
    在开发一个使用JavaScript、HTML和CSS的Web应用时,遇到从SQLite数据库中提取的法语词汇排序不正确的问题,特别是带重音符号的字母未按预期排序。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 3.[15]Writeaprogramtolistallofthekeysandvaluesin%ENV.PrinttheresultsintwocolumnsinASCIIbet ... [详细]
  • 本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]
  • 深入理解Java SE 8新特性:Lambda表达式与函数式编程
    本文作为‘Java SE 8新特性概览’系列的一部分,将详细探讨Lambda表达式。通过多种示例,我们将展示Lambda表达式的不同应用场景,并解释编译器如何处理这些表达式。 ... [详细]
  • Bootstrap Paginator 分页插件详解与应用
    本文深入探讨了Bootstrap Paginator这款流行的JavaScript分页插件,提供了详细的使用指南和示例代码,旨在帮助开发者更好地理解和利用该工具进行高效的数据展示。 ... [详细]
  • 在Qt框架中,信号与槽机制是一种独特的组件间通信方式。本文探讨了这一机制相较于传统的C风格回调函数所具有的优势,并分析了其潜在的不足之处。 ... [详细]
  • 本文详细介绍了如何在循环双链表的指定位置插入新元素的方法,包括必要的步骤和代码示例。 ... [详细]
  • 在移动端开发中,多点触控手势是提升用户体验的重要手段。然而,目前只有iOS浏览器原生支持手势事件,其他设备需要通过touchstart、touchmove和touchend等基础事件进行自定义实现。本文将详细介绍如何在Vue项目中实现多点触控手势。 ... [详细]
  • 分享一款基于Java开发的经典贪吃蛇游戏实现
    本文介绍了一款使用Java语言开发的经典贪吃蛇游戏的实现。游戏主要由两个核心类组成:`GameFrame` 和 `GamePanel`。`GameFrame` 类负责设置游戏窗口的标题、关闭按钮以及是否允许调整窗口大小,并初始化数据模型以支持绘制操作。`GamePanel` 类则负责管理游戏中的蛇和苹果的逻辑与渲染,确保游戏的流畅运行和良好的用户体验。 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • 优化后的摘要:默认情况下,PopupWindow在点击外部区域时会自动关闭。为了实现点击外部区域时不自动关闭的功能,可以通过自定义设置来调整PopupWindow的行为,确保其在外部点击时仍保持显示状态。这需要对PopupWindow的属性进行适当的修改和配置,以满足特定的交互需求。 ... [详细]
  • 在Android开发中,实现多点触控功能需要使用`OnTouchListener`监听器来捕获触摸事件,并在`onTouch`方法中进行详细的事件处理。为了优化多点触控的交互体验,开发者可以通过识别不同的触摸手势(如缩放、旋转等)并进行相应的逻辑处理。此外,还可以结合`MotionEvent`类提供的方法,如`getPointerCount()`和`getPointerId()`,来精确控制每个触点的行为,从而提升用户操作的流畅性和响应性。 ... [详细]
author-avatar
有心人php
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有