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

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。

相关文章

springboot使用Scheduling实现动态增删启停定时任务教程

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》：本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务，增加、删
阅读更多...
Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType？FIT_XYFIT_STARTFIT_CENTE
阅读更多...
Go语言开发实现查询IP信息的MCP服务器

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服
阅读更多...
Python的time模块一些常用功能(各种与时间相关的函数)

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,：本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指
阅读更多...
如何为Yarn配置国内源的详细教程

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方
阅读更多...
Android实现两台手机屏幕共享和远程控制功能

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络
阅读更多...
Maven的使用和配置国内源的保姆级教程

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H
阅读更多...
Redis消息队列实现异步秒杀功能

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结
阅读更多...
将Java程序打包成EXE文件的实现方式

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》：本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4
阅读更多...
MySQL索引的优化之LIKE模糊查询功能实现

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》：本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2