默契家庭之角色转换 · 代际答题小程序产品系统Vibe Coding

我要开发同款
AlexEcho2026年10月20日
11阅读

技术信息

语言技术
HTML5、CSS、Vue、React、TypeScript
系统类型
小程序轻应用、Web
行业分类
生活旅游、内容平台

作品详情

行业场景

面向家庭群/家长群的代际互动答题小程序:父母答子女世界的题、子女答父母世界的题,用一道题测出两代人的默契。 后端基于 微信云开发(CloudBase),无需自建服务器(后改成自建服务器)。
- 不做知识教育,做**情感连接**
- 不是两代人对抗,是**联手打败“代沟”**
- 核心情绪价值:制造“原来我们真的不了解彼此”的温和冲击,再把冲击转化为理解

- 市面解决代际问题的产品全是严肃课程、鸡汤文章、调解节目,**没人做成轻游戏**
- 成年人/家庭场景的游戏化产品极少
- 天然适配微信生态和群社交传播

功能介绍

| 功能 | 说明 |
|---|---|
| 双线答题(子女答父母世界 / 父母答子女世界) | 每关 9 题:小辈 4 题 + 长辈 4 题 + 1 道双方共答的价值观题(**每方实际作答 5 题**) |
| 知识/黑话/场景题计分 | 答对得分;答错不得分,勾选「我不确定,但我愿意学」+3 理解分 |
| 价值观题「默契影响值」光谱计分 | 选项分值 -3~+3,理解分 = 分值 × 3(-9~+9),无对错判定 |
| 默契分(双方价值观选择比对) | 分差 0→+3 / ≤1→+2 / 2→+1 / ≥3→0 |
| 综合得分(默契分) | 云端计算,默契分 = 知识正确率×50% + 理解分×30% + 默契分×20%(满分100,越高越默契),≥60 分解锁下一关 |
| 段位体系(灵魂家人…隔代银河) | 结算页/排行榜均展示 |
| 闯关地图 10 关(大门→全家福) | 卡片式关卡列表,逐关解锁 |
| 群排名(圈子排行榜) | 群主建「圈子」,家庭凭圈子码加入,按通关数+默契分排名。圈子页「分享到群」的卡片落地后自动把圈子码填进输入框(`leaderboard` 页 `onLoad` 解析 `circleCode` 参数),点「加入圈子」确认即可 |
| 串门(家庭信息浮框 + 关注) | 排行榜上方一条速览条展示「我家 + 已关注家庭」的排名;我家/关注家庭在列表里带浅色底。点任意家庭弹出信息浮框(宣言有才显示、组员、成就、各关得分 3 列可滚动,右上角关注/取关开关,点空白处关闭、点其他家庭直接切换);关注关系存 `users.following`,家庭信息仅对同圈子开放 |
| 组队宣言 | 首页「⚙️ 队伍设置」里、切换身份按钮下方输入编辑,≤32 字,留空保存即清除;保存后展示在排行榜串门浮框里(同圈子家庭可见) |
| 成就系统(8项)

项目实现

我使用Vibecoding完成全部开发。
小程序端使用原生 JS + WXML + WXSS,web端使用React 18 + TypeScript 5.6 + Vite 5 + React Router 6,后端使用Node 20 + Express 4 + MongoDB 6 driver + JWT,运维使用Nginx + acme.sh(HTTPS) + PM2 + fail2ban + cron 备份。
架构上,四端 + 一套后端契约 + 一份业务逻辑

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论