微信小程序利用云开发实现评论功能

微信小程序利用云开发实现评论功能

如果喜欢可以给我一个关注。

一.微信小程序，评论功能的实现。
首先我们先布局，一个文章或者是商品，底下是评论，

<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}
}