小程序云开发教程七：贴子的详情及评论功能

2024-09-04 19:32
文章标签 程序 教程 功能 开发 评论 详情 贴子

本文主要是介绍小程序云开发教程七：贴子的详情及评论功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们先看看界面:
在这里插入图片描述

我们如果要实现评论功能, 先看一下总的数据结构:
在这里插入图片描述

那么需要什么参数呢?
参数如下

       comment: 评论内容username: 用户名time: 评论时间userId: 用户idid: 评论的贴子idavatar: 用户头像

先上代码, wxml:

<!--pages/itemDetail/itemDetail.wxml-->
<view class='flexDownC content'><view class='content flexDownC w100'><view class='userInfo flexRowL w100'><view class='user flexC '><image src='{{data.userImg || defaultImg}}' class='userImg'></image> {{data.username || '糗皮虎'}}</view></view><view class='txt'>{{data.content}}</view><view class='img w100' wx:for="{{data.image}}" wx:for-item='imgItem'><image lazy-load="{{lazy_load}}" mode='widthFix' src='{{(imgItem) || ""}}' class='{{data.image.length ==1 ?"dzImg1": data.image.length == 2 ?"dzimg2": data.image.length == 3 ? "dzImg3" : data.image.length == 4 ? "dzImg4": "" }} dzImg'></image></view><view class='btnsRow flexRowL'><view class='ml20  flexC' bindtap='zan' data-id='{{data.id}}' data-vote='{{data.vote}}'><image src='{{!voteFlag ? shareIconUrl: shareIconUrl1}}' class='btns ml20'></image><text class='ml10'> {{data.vote || 0}}</text></view><view class='ml60  flexC'><image src='../../images/comment.png' class='btns ml40'></image><text class='ml10'> {{data.commentNum || 0}}</text></view><view class='ml60  flexC'><label class='flexC'  data-qiuId='{{data.id}}'><image src='../../images/share.png' class='btns ml40'></image><button open-type='share' hidden='hidden'  data-qiuId='{{data.id}}' data-shareNum='{{data.shareNum}}'></button> </label><text class='ml10'> {{data.shareNum || 0}}</text></view></view></view><view class='garyLine'></view><view class='comments flexDownC'><view wx:if='{{data.comment.length > 0}}' class='com'><view wx:for='{{data.comment}}' wx:key="{{index}}" class='comItem flexDownC'><view class='userInfo flexRowL'><view class='user flexC'><image src='{{item.avatar || defaultImg}}' class='userImg'></image> {{item.username || '糗皮虎'}}</view></view><view class='txt'>{{item.comment}}</view><view class='time textalignRight'>{{item.time}}</view></view></view><view wx:else class='noComment'>暂无评论...</view></view>
</view><view class='flexC w100' wx:if='{{isShareTip}}'><button bindtap='navBack' class='navBtn'>回到首页</button>
</view><view class='bottomInput flexC' ><input class='inputB' placeholder='友善发言的人运气不会太差' placeholder-style='color:#ccc' maxlength='120' value='{{commentTxt}}' confirm-type='send' bindinput='inputHandler' bindconfirm='confirm'></input>
</view>

wxss: 引入首页样式,减少代码量

/* pages/itemDetail/itemDetail.wxss */@import '../index/index.wxss';
.content{align-items: flex-start;
}
.noComment{font-size: 28rpx;margin-top: 30rpx;color: #ccc;
}.comItem, .comments, .com{width: 100%;
}
.userImg{margin-right: 10rpx;
}.comItem{padding:10rpx 20rpx;margin-top: 30rpx;margin-bottom: 20rpx;border-bottom: 1px solid #f7f7f7;
}
.navBtn{width: 80%;height: 80rpx;color: #fff;background: #ea9518;line-height: 80rpx;margin-top: 60rpx;
}.comItem:last-child{border: none
}
.time{width: 100%;font-size: 24rpx;color: #ccc;margin-right: 50rpx;
}.bottomInput{width: 100%;height: 100rpx;
}.inputB{width: 95%;height: 80rpx;line-height: 80rpx;border: 1px solid #f4f4f4;border-radius: 10rpx;background: #f9f9f9;
}

js:

// pages/itemDetail/itemDetail.js
const db = wx.cloud.database()
const _ = db.command
var app = getApp()
const util = require('../../util/util.js');Page({/*** 页面的初始数据*/data: {defaultImg: '../../images/tx.png',data: {},shareIconUrl: '../../images/zan.png',shareIconUrl1: '../../images/zan1.png',commentTxt: '',itemId: '',comments: [],isShareTip: false,voteFlag: false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {if (options.isShareTip){this.setData({isShareTip: true})}if (options.id){this.setData({itemId: options.id})console.log(options.id)this.search(options.id)}},search: function(id){let idNum = 0;if (Number(id) || Number(id) == 0)idNum = Number(id)elseidNum = this.data.itemId;db.collection('funnys').where({id: _.eq(idNum)}).get({success: res => {console.log(res)let D = res.data;this.setData({data: D[0]})},fail: function (e) {console.log(e)}})},inputHandler: function(e){console.log(e)this.setData({commentTxt: e.detail.value})},confirm: function(){const db = wx.cloud.database()const _ = db.commandlet userOpenId = wx.getStorageSync('openId')//发送评论let d = new Date(),data = {};let arr = util.typeC(this.data.data.comment) == 'array' ? this.data.data.comment : new Array(this.data.data.comment);if (this.data.commentTxt){data = {comment: this.data.commentTxt,username: wx.getStorageSync('username'),time: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(),userId: wx.getStorageSync('userId'),id: this.data.itemId,avatar: wx.getStorageSync('avatar')}arr.push(data)}elsewx.showToast({title: '请填写内容',icon:'none'})if (!userOpenId){wx.showToast({title: '您还未登录,请先登录',icon: 'none'})setTimeout(()=>{wx.switchTab({url: '../me/me',})}, 1000)}else{var cn = this.data.data.comment.length + 1;db.collection('comments').add({data: {id: data.userId,userId: data.userId,text: data.comment,_openid: userOpenId},success: res=>{console.log('comment新增成功')},fail: e=>{console.log('comment新增失败')}})wx.cloud.callFunction({name: 'comment',data: {comment: arr,id: this.data.itemId,commentNum: cn},        success: res => {wx.showToast({title: '评论成功',})  this.search()      },fail: err => {wx.showToast({icon: 'none',title: '评论失败',})console.error('[云函数] [comment] 调用失败：', err)}})}console.log(data)},navBack: function(){wx.switchTab({url: '../index/index',})},/*** 用户点击右上角分享*/onShareAppMessage: function (res) {console.log(res)var that = this;if (res.from === "button") {wx.cloud.callFunction({name: 'shareHandler',data: {id: res.target.dataset.qiuid,shareNum: Number(res.target.dataset.sharenum) + 1},success: e => {wx.showToast({title: '分享成功',})that.search(that.data.pageId)console.log(e)},fail: e => {console.log(e)}})return {title: "我发现了一个好笑的东西,分享给你 --糗皮虎",path: '/pages/itemDetail/itemDetail?id=' + res.target.dataset.qiuid + '&isShareTip=1',imageUrl: ''}}},zan: function (e) {if (!this.data.voteFlag){var id = Number(e.currentTarget.dataset.id),vote = Number(e.currentTarget.dataset.vote);var that = this,D = this.data.data;D.vote = vote + 1wx.cloud.callFunction({name: 'zan',data: {data: {vote: vote + 1,id: id,}},success: res => {wx.showToast({title: '点赞成功',})that.setData({data: D,voteFlag: true})},fail: err => {wx.showToast({icon: 'none',title: '点赞失败',})console.error('[云函数] [zan] 调用失败：', err)}})  }else{wx.showToast({title: '你已经投过票了',icon: 'none'})}},
})

我们仔细看看onload函数:
我们判断路径中是否有参数isShareTip, 有代表是通过分享出去的链接点击进来的, 那么我们就必须给他一个回到首页的按钮;
然后判断是否有id, 如果有,就进行数据库搜索,展示该条贴子；
没有就不搜索。

我们把search封装成一个函数，适合调用。
我们看看评论功能：

  confirm: function(){const db = wx.cloud.database()const _ = db.commandlet userOpenId = wx.getStorageSync('openId')//发送评论let d = new Date(),data = {};let arr = util.typeC(this.data.data.comment) == 'array' ? this.data.data.comment : new Array(this.data.data.comment);if (this.data.commentTxt){data = {comment: this.data.commentTxt,username: wx.getStorageSync('username'),time: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(),userId: wx.getStorageSync('userId'),id: this.data.itemId,avatar: wx.getStorageSync('avatar')}//把评论的信息组成一个数组，通过云函数的update函数更新arr.push(data)}elsewx.showToast({title: '请填写内容',icon:'none'})if (!userOpenId){wx.showToast({title: '您还未登录,请先登录',icon: 'none'})setTimeout(()=>{wx.switchTab({url: '../me/me',})}, 1000)}else{var cn = this.data.data.comment.length + 1;db.collection('comments').add({data: {id: data.userId,userId: data.userId,text: data.comment,_openid: userOpenId},success: res=>{console.log('comment新增成功')},fail: e=>{console.log('comment新增失败')}})wx.cloud.callFunction({name: 'comment',data: {comment: arr,id: this.data.itemId,commentNum: cn},        success: res => {wx.showToast({title: '评论成功',})  this.search()      },fail: err => {wx.showToast({icon: 'none',title: '评论失败',})console.error('[云函数] [comment] 调用失败：', err)}})}console.log(data)},

云函数:

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()// 云函数入口函数
exports.main = async (event, context) => {var comment = event.comment, id = event.id,commentNum = event.commentNum;console.log('云函数comment成功', comment, id)// console.warn(data)try {return await db.collection('funnys').where({id: Number(id)}).update({data: {comment: comment,commentNum: commentNum},success: res => {console.log('云函数comment成功', comment, id)},fail: e => {console.error(e)}})} catch (e) {console.error(e)}}

现在， 审核功能就完成了。

小程序云开发教程一: 新建一个云开发项目以及基本布局
小程序云开发教程二:数据的获取(爬虫)
小程序云开发教程三: 数据的布局以及展示
小程序云开发教程四:云函数的使用与点赞功能的实现
小程序云开发教程五: 图片上传及发表文字的实现
小程序云开发教程六：贴子的审核
那么,到此为止,点赞功能就基本完成了, 详细代码请看:
https://github.com/LWJcoder/qiupihu

大家看在我码字那么辛苦的份上,顺手给github点一个小星星呗 ?
以上代码我会放在我的github上: LWJCoder

这篇关于小程序云开发教程七：贴子的详情及评论功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1136824。

相关文章

mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
Golang如何用gorm实现分页的功能

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》：本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体
阅读更多...
深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制（JDK/CGLIB）、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实
阅读更多...
SpringBoot开发中十大常见陷阱深度解析与避坑指南

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错？是不是同时用了.properties和.yml？二、换个位置配置就失效？搞清楚加
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
SpringBoot连接Redis集群教程

SpringBoot连接Redis集群教程

《SpringBoot连接Redis集群教程》：本文主要介绍SpringBoot连接Redis集群教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 依赖2. 修改配置文件3. 创建RedisClusterConfig4. 测试总结1. 依赖 <de
阅读更多...
Python中对FFmpeg封装开发库FFmpy详解

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》：本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
基于Python开发Windows屏幕控制工具

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2