微信小程序利用云开发实现评论功能
如果喜欢可以给我一个关注。
一.微信小程序,评论功能的实现。
首先我们先布局,一个文章或者是商品,底下是评论,
<!-- 商品详情 -->
<view>
<view class="store">
<!-- 商品 -->
<view class="store_box item_center">
<view class="store_box_image">
<image src="{{order.boots_image}}"></image>
</view>
<view class="store_box_title font30">
<text>{{order.boots_name}}</text>
<view class="colorred">¥{{order.boot_price}}</view>
</view>
</view>
</view>
<view class="comment_box">
<text>评论:</text>
<view wx:for="{{order.pinlun}}" wx:key='index'>
<text class="blue">{{item.name}}:</text>
<text>{{item.login_text}}</text>
</view>
</view>
</view>
<view class="nar flexed color">
<view class="login_img">
<image src="{{login.avatarUrl}}"></image>
</view>
<view class="search_input">
<view class="search_inputbox flexed">
<text class="iconfont icon-search"></text>
<input placeholder="请输入内容" bindinput="pinlun"/>
</view>
</view>
<view class="search" bindtap="send">
<block>评论</block>
</view>
</view>
上面的布局是在一个商品中添加了 下面评论功能,有点像qq的留言。
底下的是用固定定位写的一个带头像的评论功能,
.nar{
position: fixed;
bottom: 0;
width: 100%;
margin-top: 20rpx;
/* 用来适配 设置安全区域 */
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
background-color: #ffffff;
}
然后就是比较基本的布局了我就贴出css代码来
/* pages/packaged/pinlun/pinlun.wxss */
/* 公共样式类 */
.flexed{
display: flex;
align-items: center;
}
.nar{
position: fixed;
bottom: 0;
width: 100%;
margin-top: 20rpx;
/* 用来适配 设置安全区域 */
height: calc(100rpx + env(safe-area-inset-bottom) / 2);
background-color: #ffffff;
}
.colorred{
color: red;
}
.colorhui{
color: #b3b2b2;
}
.font30{
font-size: 30rpx;
}
/* 订单详情 */
.store{
width: 100%;
padding: 15rpx;
font-size: 32rpx;
background-color: #fff;
}
.store_title{
width: 100%;
font-size: 32rpx;
justify-content: space-between;
border-bottom: 1px solid #c5c5c5;
}
.store_box{
width: 100%;
height: 150rpx;
padding-bottom: 10rpx;
border-bottom: 1px solid #c5c5c5;
}
.store_box_image{
width: 26%;
}
.store_box_image>image{
width: 150rpx;
height: 150rpx;
border-radius: 5px;
}
.store_box_title{
width: 50%;
}
.store_box_prise{
width: 24%;
text-align: right;
}
.store_count{
margin-top: 10rpx;
padding: 20rpx 0;
text-align: right;
}
.comment_box{
width: 100%;
padding: 10rpx;
font-size: 30rpx;
line-height: 1.6;
}
.blue{
color: #03f8f8;
}
/* 搜索模块1 */
.color{
background-color: #03f8f8;
}
.login_img{
height: 100%;
flex: 0.8;
text-align: center;
}
.login_img>image{
width: 80rpx;
height: 80rpx;
margin: 11rpx auto;
border-radius: 50%;
}
.search_input{
height: 100%;
flex: 3.2;
padding: 10rpx;
}
.search_inputbox{
height: 100%;
border-radius: 3px;
background-color: #ffffff;
}
.search_inputbox>text{
display: inline-block;
width: 10%;
height: 100%;
line-height: 2.5;
font-size: 13px;
margin-left: 5rpx;
}
.search_inputbox>input{
width: 90%;
height: 100%;
font-size: 29rpx;
margin-right: 10rpx;
}
.search{
height: 100%;
flex: 1;
text-align: center;
line-height: 3;
font-size: 14px;
color: #ffffff;
}
.search>text{
font-size: 10px;
margin-left: 10rpx;
}
最后最核心的是js代码 。
js其实有没有忒别的偏难
首先是在数据库中建一个记录数据类型为json类型的数据,用来储存评论
然后是获取用户输入后亲求数据库。把评论的内容记录到该条记录中。
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
login:{},
order:{},
pinlun:''
},
//获取初始化
loads(){
var id = this.data.order._id
wx.cloud.database().collection('boots').doc(id).get().then(res=>{
console.log(res)
this.setData({order:res.data})
}).catch(res=>{
app.fail();
})
},
pinlun(e){this.setData({pinlun:e.detail.value})},
//发送评论
send(){
var login_name = wx.getStorageSync('login').nickName
if(this.data.pinlun == ''){wx.showToast({title: '请输入完整!',icon:'none'})}
else{
var pinlun = this.data.pinlun
wx.cloud.callFunction({name:'pinlun',data:{'login_name':login_name,'pinluns':pinlun,'id':this.data.order._id}}).then(res=>{
this.loads();
}).catch(res=>{
app.fail();
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if(wx.getStorageSync('login') == ''){
wx.showModal({title: '登录提醒',content: '系统显示你未登录,请先登录!',showCancel: false,
success (res) {if (res.confirm) {wx.switchTab({url: '/pages/packtable/home/home'})}}
})
}else{
var pinlun = wx.getStorageSync('pinlun')
var login = wx.getStorageSync('login')
this.setData({login:login,order:pinlun})
console.log(pinlun)
this.loads();
}
},
})
这里其实还要做一个登录判断,
应为数据对象是 储存在本地中的如果没有登录就没有本地记录,
所以需要判断一下是否登录。
以下为云函数的代码
// 云函数入口文件
const cloud = require('wx-server-sdk')
//适配本环境用户
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
var db = cloud.database();
var _ = db.command;
var data = await db.collection('boots').doc(event.id).update({data:{
pinlun: _.push({'name':event.login_name,'login_text':event.pinluns})
}})
return {event,data}
}