微信小程序评论的实现

实现像这样的底部悬浮的留言框并实现留言功能。
话不多说直接上代码，评论存储用的是小程序的云开发数据库。
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 = thisif (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 => {// 在返回结果中会包含新创建的记录的 _idthis.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和存储名字处需要自己输入以外，其余的可以根据自己的命名稍作修改
为了照顾新手（我也是）的感受，所有代码直接复制粘贴即可运行！！(最烦的就是复制别人代码还老是出错，找错还要半天。。)
嘿嘿，新手写博客当作笔记，大佬轻喷。。

微信小程序评论的实现相关推荐

微信小程序-评论业务的实现
微信小程序-评论业务的实现目录微信小程序-评论业务的实现一.效果二.实现 1.wxml 2.js 3.wxss 一.效果二.实现 1.wxml <!-- wx:index = &quo ...
微信小程序评论功能实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 前端 <textarea class='the_prw_in' bindinput='bindblur' ...
微信小程序-评论系统
最近沉溺于微信小程序的评论类页面难以自拔,写了几种样式吧,相关代码都上传在github上了代码地址:https://github.com/wxcomponent/wxcomment 项目列表 pag ...
微信小程序评论功能实现
微信小程序开发交流qq群 581478349 微信: 承接小程序开发 wxml <textarea class='the_prw_in' bindinput='bindblur' curso ...
微信小程序评论组件---WxComment
Github项目地址 https://github.com/yicm/WxComment WxComment WxComment是一个微信小程序的评论插件,结合BaaS提供商LeanCloud,无需其 ...
微信小程序评论留言功能实现仿知乎
最近沉迷学习无法自拔,太久没有码字,码一个小程序留言功能实现.先上一波最后效果图: (删除按钮,是用户自己的留言时才会显示该按钮) 实现技术后台:SSM框架数据库:MySQL数据库数据库设计 ...
微信小程序评论功能的实现（用的是假数据）
具体直接看代码 wxml: <view><button bindtap='showTalks'>查看评论</button></view><!-- ...
微信小程序评论功能实现源码，复制粘贴
wxml: 发送 js: var ComContent = '' var CommentList = '[]' var app = getApp() Page({ /** * */ data: { C ...
微信小程序评论/留言功能，附：前端+后端代码+视频讲解！
前端界面: 演示:  <form bindsubmit="formSubmit"> <input type="text ...

微信小程序评论的实现

微信小程序评论的实现相关推荐

最新文章

热门文章