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

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。

相关文章

使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Python虚拟环境终极(含PyCharm的使用教程)

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》：本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境？二、虚拟环境创建方式对比三、命令行创建虚拟环境（venv）3.1 基础命令3
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
SpringBoot实现微信小程序支付功能

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作（一）微信支付商户平台配置（二）Spring Boot项目搭建（三）配置文件
阅读更多...
python连接本地SQL server详细图文教程

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面：本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.
阅读更多...
在Android平台上实现消息推送功能

在Android平台上实现消息推送功能

《在Android平台上实现消息推送功能》随着移动互联网应用的飞速发展,消息推送已成为移动应用中不可或缺的功能,在Android平台上,实现消息推送涉及到服务端的消息发送、客户端的消息接收、通知渠道（... 目录一、项目概述二、相关知识介绍2.1 消息推送的基本原理2.2 Firebase Cloud Me
阅读更多...
Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》：本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制（Master-Slave Replication）2. 读写分离3.
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Python 安装和配置flask, flask_cors的图文教程

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》：本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2