云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）
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(内容管理)及案例
感谢大家，点赞，收藏，关注，评论！
