微信小程序评论功能

最新推荐文章于 2025-06-30 20:07:48 发布

卖小鱼干娶你丶

最新推荐文章于 2025-06-30 20:07:48 发布

阅读量3.5k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41641760/article/details/86565654

本文介绍了如何在微信小程序中实现评论功能。首先展示了代码结构，包括Utils.js中的时间格式化函数，然后详细讲解了评论界面的JS部分，包括获取和格式化日期，以及评论数据的展示。此外，还提到了页面加载、上拉加载更多评论和表情选择等功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：
在这里插入图片描述

代码部分：
首先建完小程序项目后会有一个自动生成的utils 文件。
Utils.js:
var ossAliyuncs = “http://soupu.oss-cn-shanghai.aliyuncs.com”;

function formatTime(date) {
var year = date.getFullYear() //获取年
var month = date.getMonth() + 1 //获取月
var day = date.getDate() //获取日

var hour = date.getHours() //获取小时
var minute = date.getMinutes() //获取分钟
var second = date.getSeconds() //获取秒

return [year, month, day].map(formatNumber).join(’-’) + ’ ’ + [hour, minute, second].map(formatNumber).join(’:’)
}

function formatDate(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()

return [year, month, day].map(formatNumber).join(’-’)
}

function formatNumber(n) {
n = n.toString()
return n[1] ? n : ‘0’ + n
}

module.exports = {
formatTime: formatTime,
formatDate: formatDate,
ossAliyuncs: ossAliyuncs
}
接下来是我们创建的评论界面代码：
Js:
var util = require("…/…/utils/util")

Page({
data: {
isShow: false,//控制emoji表情是否显示
isLoad: true,//解决初试加载时emoji动画执行一次
content: “”,//评论框的内容
isLoading: true,//是否显示加载数据提示
disabled: true,
cfBg: false,
_index: 0,
detail:
{
},
comments: [
{
avatar: util.ossAliyuncs + “/images/banner6.jpg”,
uName: “一朵奇葩向阳开”,
time: “2016-12-11”,
content: "门前大桥下，游过一群鸭~。
},
{
avatar: util.ossAliyuncs + “/images/banner2.jpg”,
uName: “一朵奇葩向阴开”,
time: “2016-12-11”,
content: "快来快来数一数~。
},
{
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩朝天开”,
time: “2016-12-01”,
content: " 2₄6₇8~ "
},
{
avatar: util.ossAliyuncs + “/images/banner5.jpg”,
uName: “一朵奇葩朝天开”,
time: “2016-12-01”,
content: " 2₄6₇8~ "
}
],
emojiChar: "☺-,
//0x1f—
emoji: [
“60a”, “60b”, “60c”, “60d”,