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