少儿舞蹈小程序（13）作品播放量累加及点赞

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

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篇我们完整介绍了小程序的首页功能，感兴趣的可以从头到尾照着做一遍，你就能感受到低代码在开发这类应用的强大之处了。