当前位置: 首页 > news >正文

深入解析:少儿舞蹈小程序(13)作品播放量累加及点赞

目录

  • 1 实现播放累累加功能
    • 1.1 创建API
    • 1.2 更新播放量
  • 2 实现点赞功能
    • 2.1 创建API
    • 2.2 更新点赞量
  • 整体效果
  • 总结

上一篇我们已经搭建了作品列表的详细功能,包含分类查询,列表查看以及视频播放的功能。在列表页上我们展示了查看量及点赞量的功能,目前的功能是无法增加对应的数据的,本篇我们介绍一下播放量累加及点赞功能。

1 实现播放累累加功能

1.1 创建API

为了实现播放量的累加功能,我们先需要创建一个API,传入作品的数据标识,然后更新播放量。

选择资源连接,点击+号,选择自定义代码
在这里插入图片描述
输入名称和标识
在这里插入图片描述
输入方法的名称和标识
在这里插入图片描述
输入如下代码

/**
* 增加作品浏览量API
* 根据作品ID增加作品的浏览次数
*/
module.exports = async function (params, context) {
try {
// 获取作品ID参数
const showcaseId = params.showCaseId;
// 参数校验
if (!showcaseId) {
return {
code: 400,
message: '作品ID不能为空',
data: null,
timestamp: Date.now()
};
}
// 查询作品当前信息(使用查询单条记录的语法)
const showcaseResult = await context.callModel({
dataSourceName: 'showcase',
methodName: 'wedaGetItemV2',
params: {
filter: {
where: {
_id: {
$eq: showcaseId
}
}
},
select: {
$master: true
}
}
});
// 检查作品是否存在
if (!showcaseResult&&Object.keys(showcaseResult).length===0) {
return {
code: 404,
message: '作品不存在',
data: null,
timestamp: Date.now()
};
}
// 获取当前浏览量
const currentViews = showcaseResult.views || 0;
// 更新浏览量(当前浏览量+1)
const updateResult = await context.callModel({
dataSourceName: 'showcase',
methodName: 'wedaUpdateV2',
params: {
filter: {
where: {
_id: {
$eq: showcaseId
}
}
},
data: {
views: currentViews + 1
}
}
});
// 返回成功结果
return {
code: 200,
message: '浏览量更新成功',
data: {
showcaseId: showcaseId,
previousViews: currentViews,
currentViews: currentViews + 1
},
timestamp: Date.now()
};
} catch (error) {
console.error('增加作品浏览量错误:', error);
return {
code: 500,
message: '服务器内部错误',
data: null,
timestamp: Date.now()
};
}
};

添加入参
在这里插入图片描述
点击方法测试,这时候要输入入参的值
在这里插入图片描述
点击MySQL数据库,找到数据标识列,复制一行的数据
在这里插入图片描述
将复制的数据贴入我们的入参中
在这里插入图片描述
点击运行测试,成功之后点击出参自动映射
在这里插入图片描述

1.2 更新播放量

打开我们的小程序应用
在这里插入图片描述
选中我们的弹窗组件,在弹窗打开时调用数据源方法
在这里插入图片描述
选择作品管理,播放量累加方法
在这里插入图片描述
入参绑定为弹窗组件的入参的数据标识字段
在这里插入图片描述
上一篇中我们只需要播放的视频地址,现在需要修改一下,把整行输入都传入
在这里插入图片描述
播放量累加了之后还需要在弹窗关闭的时候刷新一下数据列表
在这里插入图片描述

2 实现点赞功能

2.1 创建API

点赞功能和播放累累加功能是类似的,只是累加的字段不一样。创建一个点赞的方法
在这里插入图片描述
输入如下代码

/**
* 增加作品点赞API
* 根据作品ID增加作品的点赞次数
*/
module.exports = async function (params, context) {
try {
// 获取作品ID参数
const showcaseId = params.showCaseId;
// 参数校验
if (!showcaseId) {
return {
code: 400,
message: '作品ID不能为空',
data: null,
timestamp: Date.now()
};
}
// 查询作品当前信息(使用查询单条记录的语法)
const showcaseResult = await context.callModel({
dataSourceName: 'showcase',
methodName: 'wedaGetItemV2',
params: {
filter: {
where: {
_id: {
$eq: showcaseId
}
}
},
select: {
$master: true
}
}
});
// 检查作品是否存在
if (!showcaseResult&&Object.keys(showcaseResult).length===0) {
return {
code: 404,
message: '作品不存在',
data: null,
timestamp: Date.now()
};
}
// 获取当前点赞量
const currentLikes = showcaseResult.likes || 0;
// 更新浏览量(当前浏览量+1)
const updateResult = await context.callModel({
dataSourceName: 'showcase',
methodName: 'wedaUpdateV2',
params: {
filter: {
where: {
_id: {
$eq: showcaseId
}
}
},
data: {
likes: currentLikes + 1
}
}
});
// 返回成功结果
return {
code: 200,
message: '点赞量更新成功',
data: {
showcaseId: showcaseId,
previousLikes: currentLikes,
currentLikes: currentLikes + 1
},
timestamp: Date.now()
};
} catch (error) {
console.error('增加作品点赞量错误:', error);
return {
code: 500,
message: '服务器内部错误',
data: null,
timestamp: Date.now()
};
}
};

2.2 更新点赞量

和播放量更新不同,点赞是用户主动发起的。我们需要有一个图标让用户点赞,当用户点赞之后就点亮图标,否则就是默认图标。

在弹窗的视频播放组件下边,添加一个普通容器,里边添加两个图标组件
在这里插入图片描述
将第二个图标的颜色设置为主色调

:root {
color:var(--primary-color)
}

在这里插入图片描述
然后我们创建一个布尔值类型的变量用来控制图标的显示
在这里插入图片描述
给黑色的图标,设置点击事件,将变量的值改变为true
在这里插入图片描述
然后调用数据源方法,更新点赞数据
在这里插入图片描述
给图标组件绑定条件展示
在这里插入图片描述

整体效果

打开我们的作品列表页面,可以看到点赞数和播放累
在这里插入图片描述
点赞作品的时候可以进行点赞
在这里插入图片描述
点赞之后图标点亮
在这里插入图片描述

总结

本篇我们介绍了播放累和点赞功能的开发,像这类功能性的需要先开发好API,进行完备测试,测试通过之后在前端调用API即可。用了13篇我们完整介绍了小程序的首页功能,感兴趣的可以从头到尾照着做一遍,你就能感受到低代码在开发这类应用的强大之处了。

http://www.hskmm.com/?act=detail&tid=5222

相关文章:

  • Ubuntu 24.04 安装最新版podman@5.6.1
  • 深入解析:Unity:XML笔记(二)——Xml序列化、反序列化、IXmlSerializable接口
  • 2025.9.15——知识点学习
  • 详细介绍:拉帮结派下的制造麻烦
  • C# Avalonia 13- MoreDrawing - CustomPixelShader
  • ubuntu安装docker
  • 使用标签Tag控制蒙太奇的触发时机-playmontageAndWait-Send GameplayEvent-WaitGameplayEvent
  • sql事务执行
  • GAS_Aura-Spawn FireBolt from Event
  • 在CentOS 7系统上创建SSL/TLS证书以启用HTTPS
  • 从Craigslist广告到BHIS安全顾问:非科班生的渗透测试求职之路
  • Java 微服务架构中的实践与挑战
  • Java 与大数据处理:从 Hadoop 到实时计算
  • 国产IT运维卡壳?乐维智能运维体让运维团队告别“适配难、监控乱”
  • ubuntu18安装mysql5.7
  • 【IEEE出版 |已连续5届EI稳定检索】第六届计算机工程与智能控制学术会议(ICCEIC 2025)
  • 在选择2025年代码托管平台时,Gitee和GitHub作为国内外两大主流平台各有优势。本文将从多个维度进行对比分析,帮助开发者做出更适合自身需求的选择。
  • android使用socks5的教程
  • vue3 自定义指令并实现页面元素平滑上升
  • abp记录
  • 强化学习(二十):模仿学习
  • 重生之从零开始的神经网络算法学习之路 —— 第七篇 重拾 PyTorch(超分辨率重建和脚本的使用)
  • 从基础到实践(四十五):车载显示屏LCD、OLED、Mini-LED、MicroLED的工作原理、设计差异等说明 - 教程
  • 国产项目管理工具崛起:Gitee如何以本土化优势重构开发协作生态
  • GAS_Aura-Sending Gameplay Events
  • 【IEEE-智造领空天,寰宇链未来】第五届机电一体化技术与航空航天工程国际学术会议(ICMTAE 2025)
  • 进程间通信(消息队列)
  • 有点长所以单发的闲话(对acgn的看法(存疑))
  • 【光照】Unity中的[光照模型]概念辨析
  • 深入解析:Shell脚本监控系统资源详解