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

目录

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

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

1 实现播放累累加功能

1.1 创建API

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

选择资源连接,点击+号,选择自定义代码

输入名称和标识

输入方法的名称和标识

输入如下代码

bash 复制代码
/**
 * 增加作品浏览量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

点赞功能和播放累累加功能是类似的,只是累加的字段不一样。创建一个点赞的方法

输入如下代码

bash 复制代码
/**
 * 增加作品点赞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 更新点赞量

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

在弹窗的视频播放组件下边,添加一个普通容器,里边添加两个图标组件

将第二个图标的颜色设置为主色调

bash 复制代码
:root {
  color:var(--primary-color)
}

然后我们创建一个布尔值类型的变量用来控制图标的显示

给黑色的图标,设置点击事件,将变量的值改变为true

然后调用数据源方法,更新点赞数据

给图标组件绑定条件展示

整体效果

打开我们的作品列表页面,可以看到点赞数和播放累

点赞作品的时候可以进行点赞

点赞之后图标点亮

总结

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

相关推荐
启扶农2 小时前
lecen:一个更好的开源可视化系统搭建项目--页面、模板、元组--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·模板·元组·表单设计器·页面·页面可视化·页面设计器
初学者52139 小时前
微信小程序调用录音没反应,本地开发测试却没问题,operateRecorderfail appid privacy api banned
微信小程序·小程序
微爱帮监所写信寄信9 小时前
微爱帮监狱寄信写信小程序信件内容实时保存技术方案
java·服务器·开发语言·前端·小程序
豆豆9 小时前
2026年企业怎么做网站建设?
低代码·cms·网站建设·低代码平台·建站·创建网站·sso单点登录
说私域10 小时前
基于开源AI大模型AI智能名片S2B2C商城小程序的内容价值生成与多点选择传播策略研究
人工智能·微信·小程序·开源
2501_916007471 天前
iPhone APP 性能测试怎么做,除了Instruments还有什么工具?
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
Windows 环境下有哪些可用的 iOS 上架工具, iOS 上架工具的使用方式
android·ios·小程序·https·uni-app·iphone·webview
AiFlutter1 天前
三、内容展示(02):图片
flutter·低代码·低代码平台·aiflutter·aiflutter低代码
摩尔元数1 天前
2025年 汽车动力控制系统行业MES厂商分析
低代码·汽车·制造·mes
2501_915106321 天前
iOS 抓包工具有哪些?不同类型的抓包工具可以做什么
android·ios·小程序·https·uni-app·iphone·webview