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

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

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

<!-- 商品详情 -->
<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._idwx.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').nickNameif(this.data.pinlun == ''){wx.showToast({title: '请输入完整！',icon:'none'})}else{var pinlun = this.data.pinlunwx.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}
}

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

通过微信小程序的云开发实现留言功能
通过微信小程序的云开发实现留言功能 index.wxml index.wxss index.js 微信小程序中用于解析date的util.js 授权页home.wxml home.wxss home. ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
【微信小程序】云开发篇（一）——申请小程序
[微信小程序]云开发篇(一)--申请小程序 [微信小程序]云开发篇(二)--初始化云开发(微信开发者工具) [微信小程序]云开发篇(三)--代码管理 [微信小程序]云开发篇(四)--开通云开发 [微信 ...
微信小程序使用云开发实现微信支付功能报错Error: 签名错误，史上最全解决办法，不服留言骂我
报错背景微信小程序使用云开发实现微信支付功能,但是报错了报错信息报错原因小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...
微信小程序的云开发以及与传统开发的比较
一.微信小程序的云开发概念云开发就是一套解决小程序前后端开发的一种云端能力它提供了一整套云服务及简单.易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发.尽 ...
微信小程序用云开发实现多人聊天2020/05/21
微信小程序用云开发实现多人聊天室微信小程序用云开发实现多人聊天2020/05/21 效果图片 js wxml wxss 微信小程序用云开发实现多人聊天2020/05/21 用微信云开发实现聊天室无 ...
小程序云开发服务器太慢,为什么微信小程序的云开发响应这么慢？
为什么微信小程序的云开发响应这么慢?Why is the response of WeChat applet cloud development so slow?为什么微信小程序的云开发响应这么慢? ...
微信小程序基于云数据库实现点赞功能
微信小程序基于云数据库实现点赞功能微信小程序基于云数据库实现点赞功能小Tips 2022.04.27 更新微信小程序基于云数据库实现点赞功能首先你要开通云开发,然后点击数据库创建集合(这里我的 ...
微信小程序直播间开发抽红包功能
1.前言微信小程序直播间开发抽红包功能微信小程序直播是微信官方提供的商家经营工具,商家可通过在小程序内直播实现用户互动与商品销售的闭环,无需任何的跳转,提高下单转化率,直播更是成为链接商家和消费者 ...

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

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

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

最新文章

热门文章