🎯 **背景与核心需求**：为了解决业余体育比赛中比分不透明、人工记分易出错以及直播缺乏专业感的问题，开发了“赛播记分”微信小程序。其核心目标是实现体育比赛的实时比分显示，并支持多设备协同操作以及将比分信息叠加到直播画面上，提升观赛体验。

🏗️ **技术选型与架构**：项目前端采用 UniApp (Vue3) 框架，并结合 Vuex 进行状态管理，主要面向微信小程序平台，同时兼容 H5。后端服务基于 EggJS (Node.js) 构建，关键在于利用 Socket.IO 实现 WebSocket 实时通信和房间管理，以支持设备间的实时数据同步。

⚡ **核心功能实现**：小程序通过微信的 `camera` 组件获取直播画面，并使用 `cover-view` 组件在画面上动态叠加比分信息，用户可通过简单的点击操作更新比分。多设备协同控制是另一亮点，通过 Socket.IO 的房间机制，实现一人开启直播，多人扫码加入并同步比分更新，做到“一人直播，多人协同”。

🔧 **开发难点与优化**：在开发过程中，解决了 WebSocket 掉线重连问题，通过心跳检测和自动重连保证连接稳定性。同时，注重性能优化，通过控制 `cover-view` 的渲染层级来保证直播画面流畅不掉帧，并确保了多端（小程序与 H5）的兼容性。

🚀 **应用场景与未来展望**：该小程序适用于校园篮球赛、村 BA、小型体育活动直播等多种场景。未来计划扩展功能，如加入音效反馈、比赛数据统计，并支持更多运动类型（如足球、羽毛球）以及直播推流功能，进一步提升其应用价值。

最近我开发了一款 微信小程序 —— [赛播记分] ，主要用于篮球等体育比赛的 实时计分 + 直播画面叠加。本文就和大家分享一下它的开发思路和关键实现，希望对做跨端应用、实时通信的同学有所帮助。

🎯 背景与需求

在业余篮球赛、村 BA 、学校班级赛、甚至一些小型直播中，常常会遇到：

比分不透明：观众/观赛者总是追问“比分多少？”人工记分容易出错直播缺乏专业感

所以目标是：

做一个基于微信小程序的工具，能够 实时显示比分，并支持 多设备协同 和 直播画面叠加。

🏗️ 技术选型

前端

框架：UniApp (Vue3)状态管理：Vuex样式：CSS Variables + 原生 CSS平台：微信小程序（主平台），兼容 H5

后端

服务框架：EggJS (Node.js)实时通信：Socket.IO (WebSocket)房间管理：Socket.IO Rooms

⚡ 核心功能拆解

1. 实时计分 & 画面叠加

使用微信小程序的 camera 组件获取摄像头画面通过 cover-view 组件在画面上叠加比分条用户点击队伍名称/比分，即可加减分

<cover-view class="scoreboard">  <cover-view class="team">{{ homeTeam }} {{ score.home }}</cover-view>  <cover-view class="team">{{ awayTeam }} {{ score.away }}</cover-view></cover-view>

2. 多设备协同控制

用户 A 开启直播 → 房间 ID用户 B 扫码进入 → 加入同一个房间通过 Socket.IO 实现实时同步

// 客户端发送事件socket.emit('score:update', { team: 'home', delta: +1 });// 服务端广播io.to(roomId).emit('score:sync', newScore);

这样实现“一人直播，多人协同”。

3. 状态管理

统一用 Vuex 管理比赛状态，避免多页面切换时状态丢失。

state: {  gameSettings: {...},   // 比赛标题、队伍名称  gameState: {...},      // 当前比分、时间  cameraState: {...}     // 摄像头状态}

4. 模板系统

提供 4 种不同风格的比分条：

经典圆角科技六边形渐变卡片圆形徽章

通过配置项切换，实现 UI 与逻辑解耦。

🔧 开发难点与解决

WebSocket 掉线重连

加入心跳检测 + 自动重连逻辑

性能优化

控制 cover-view 渲染层级，避免掉帧操作保持 60FPS 流畅

多端兼容

H5 调试环境，最终打包为小程序

🚀 应用场景

🏀 校园/社团篮球比赛🎮 电竞赛事（后续扩展）📺 小型体育活动直播🏫 体育教学演示

📌 总结

这次项目最大的收获是：

UniApp 跨端开发 能快速适配微信小程序和 H5WebSocket 实时通信 非常适合做多设备协同组件化设计 能灵活扩展不同的运动和模板

未来还计划加入：

音效反馈比赛数据统计更多运动类型（足球、羽毛球）直播推流功能

如果你需要看成品效果，可以在微信上小程序上搜索 [赛播记分] ，已发布上线。