云开发（微信-小程序）笔记（十六）---- 评论

云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）

1.引言

在之前编写了收藏，点赞的功能，当然评论这个功能也是不可缺少，这次我们将编写评论的功能。

2.代码编写

2-1.在数据库里添加pinglun字段,并增加内容

评论数据的添加

2-2.在app.json里增加评论的页面

"pages": [
    "pages/pinglun/pinglun",

2-3.编写pinglun.js文件

// pages/pinglun/pinglun.js
let ID = ''
let content = ''
Page({
  data: {
    pinglun: []   //评论数组

  },
  onLoad() {
    ID = 'b69f67c06268c88b005446ac66f0ad09'
    wx.cloud.database().collection('Goods')
      .doc(ID)
      .get()
      .then(res => {
        console.log('详情页成功', res)
        this.setData({
          detail: res.data,
          pinglun: res.data.pinglun
        })
               
      })
      .catch(res => {
        console.log('请求数据失败', res)
      })
  },
  //获取用户输入的评论内容
  getContent(e) {
    content = e.detail.value
    console.log('获取用户输入的值：', content)
  },
  //发布评论
  getgo() {
    //输入内容不能少于10位
    if (content.length < 10) {
      wx.showToast({
        icon: 'none',
        title: '内容过短！',
      })
        return
      }
      let pinglunItem = {}
      pinglunItem.name = 'catgod'      //评论者
      pinglunItem.content = content    //评论内容
      let pinglunadd = this.data.pinglun
      pinglunadd.push(pinglunItem)
      console.log('添加后的评论：',pinglunadd)
      //调用云函数进行数据的更新
      wx.cloud.callFunction({
        name: 'tubiao',
        data: {
          id: ID,
          action: "pinglun",
          pinglun: pinglunadd
        }
      }).then( res =>{
        console.log('评论发表成功',res)
        this.setData({ //数据的更新
          pinglun: pinglunadd
        })
      }).catch( res =>{
        console('评论发表失败',res)
      })
    }
})

2-4.编写pinglun.json文件

{
  "usingComponents": {},
  "navigationBarTitleText": "评论"
}

2-5.编写pinglun.wxml文件

<!--pages/pinglun/pinglun.wxml-->
<view class="tip">评论区域</view>
<block wx:for="{{pinglun}}" wx:key="index">
<view class="pinglunItem">
<view>{{item.name}}发表评论：</view>
<view>{{item.content}}</view>
</view>
</block>
<input class="input" bindinput="getContent" placeholder="请输入评论内容"> </input>
<button bindtap="getgo" type="primary">发表评论</button>

2-6.编写pinglun.wxss文件

/* pages/pinglun/pinglun.wxss */
.tip{
  margin-top: 30rpx;
  font-size: 50rpx;
  color:goldenrod;
}
.pinglunItem{
  border-bottom: 2px solid gainsboro;
  margin-left: 50rpx;
  margin-top: 30rpx;
}
.input{
  border: 1px solid gainsboro;
  margin-top: 150rpx;
  margin-bottom: 30rpx;
}

2-7.效果图（视频）

评论效果视频

3.优化

主要优化如下：
1.输入内容后，输入栏清空。
2.进行友好提示如加载中…

3-1.修改pinglun.js文件

// pages/pinglun/pinglun.js
let ID = ''
Page({
  data: {
    pinglun: [],   //评论数组
    content: ''
  },
  onLoad() {
    ID = 'b69f67c06268c88b005446ac66f0ad09'
    wx.cloud.database().collection('Goods')
      .doc(ID)
      .get()
      .then(res => {
        console.log('详情页成功', res)
        this.setData({
          detail: res.data,
          pinglun: res.data.pinglun
        })
               
      })
      .catch(res => {
        console.log('请求数据失败', res)
      })
  },
  //获取用户输入的评论内容
  getContent(e) {
    this.setData({
      content: e.detail.value
    })
  },
  //发布评论
  getgo() {
    //输入内容不能少于10位
    let content=this.data.content
    if (content.length < 10) {
      wx.showToast({
        icon: 'none',
        title: '内容过短！',
      })
        return
      }
      let pinglunItem = {}
      pinglunItem.name = 'catgod'      //评论者
      pinglunItem.content = content    //评论内容
      let pinglunadd = this.data.pinglun
      pinglunadd.push(pinglunItem)
      console.log('添加后的评论：',pinglunadd)
      wx.showLoading({
        title:'发表中...'
      })
      //调用云函数进行数据的更新
      wx.cloud.callFunction({
        name: 'tubiao',
        data: {
          id: ID,
          action: "pinglun",
          pinglun: pinglunadd
        }
      }).then( res =>{
        console.log('评论发表成功',res)
        this.setData({
          pinglun: pinglunadd,
          content: ''
        })
        wx.hideLoading()
      }).catch( res =>{
        console.log('评论发表失败',res)
        wx.hideLoading()
      })
    }
})

3-2.修改pinglun.wxml文件

<!--pages/pinglun/pinglun.wxml-->
<view class="tip">评论区域</view>
<block wx:for="{{pinglun}}" wx:key="index">
<view class="pinglunItem">
<view>{{item.name}}发表评论：</view>
<view>{{item.content}}</view>
</view>
</block>
<input class="input" bindinput="getContent" placeholder="请输入评论内容" value="{{content}}"> </input>
<button bindtap="getgo" type="primary">发表评论</button>

3-3.效果图（视频）

评论优化效果视频

小程序-评论

云开发（微信-小程序）笔记（十七）---- cms(内容管理)及案例

感谢大家，点赞，收藏，关注，评论！