自己 / 团队介绍
个人参赛
大家好，我是 u1757470382097003，骆明鑫。一名 个体户。
为什么想做这个作品：城市生活中，遛狗不清理的现象屡见不鲜，路人踩到狗屎的痛苦人人都有过。投诉无门、发泄无路，这种无奈感是做这个产品的起点。我想用一种幽默而不说教的方式，让大家标记和分享狗屎位置——既能帮助他人避雷，又能通过游戏化机制（IDSI 国际狗屎调查局特工设定）激励大家参与城市环境维护。从初赛的 Web 版 Demo 到复赛，我把它真正落地成了一个可以随时打开、多人实时同步的微信小程序，把一件令人烦恼的小事，变成一场全民参与的"特工行动"。
产品简介（复赛版）
是什么
狗屎地图是一款基于地理位置的情绪宣泄与社区共建微信小程序，解决的核心问题是：城市里遛狗不捡屎的顽疾长期存在，路人踩屎愤怒却无处发泄，管理部门缺乏数据支撑难以精准治理。狗屎地图给这种情绪一个出口——看到狗屎，打开小程序标记一坨，写句吐槽，再踩一脚别人标记的狗屎，把不满发泄出来。应用以"IDSI 国际狗屎调查局"为世界观包装，用游戏化机制让标记行为变得有趣、有传播力；复赛版本接入微信云开发，实现真正的多用户实时数据同步，标记数据本身就是一份可视化的"民意地图"。
面向谁
- 被狗屎困扰的路人：遇到不清理的狗屎很生气，需要一个出口发泄情绪、吐槽吐槽（核心用户）
- 关注城市环境的居民：希望通过标记和发声，让问题被看见、被重视
- 养宠人士：看到"狗屎热力图"意识到问题的普遍性，促使自觉清理
- 喜欢有趣事物的传播者：被特工设定和踩屎互动吸引，愿意分享给朋友
典型使用场景：走路看到狗屎很生气→掏出手机打开小程序标记→写一句吐槽→踩一脚附近别人标记的狗屎发泄→看看今天自己的城市排第几。
完整功能
功能清单：
GPS 地图标记：微信小程序原生 map 组件 + 腾讯地图服务，一键获取当前位置标记狗屎，逆地理编码自动识别城市/区县
微信云开发（多用户同步）：云端数据库 + 云函数，你标记的狗屎全国用户可见，支持云端评论、踩屎计数、排行榜实时聚合
IDSI 特工等级系统：4 级特工等级（见习特工→正式特工→高级特工→王牌特工），随标记数量自动升级，双面翻转卡片式特工档案
成就勋章系统：首踩勇士、踩屎达人、踩屎狂魔、踩屎传奇 4 枚成就，通过互动自动解锁
全国城市排行榜：云函数聚合全国标记数据，按城市实时排名，每个城市配有特色幽默文案，每周一 00:00 数据刷新
踩一脚互动：点击详情页"踩一脚"按钮，播放帧动画踩屎特效 + 蓝紫色弥散光影，云函数事务保证每人每坨只能踩一次
云端评论吐槽：每个标记下可评论吐槽，云端存储，所有用户可见
狗屎周报：特工卡片翻转背面展示个人战绩统计 + 城市足迹 + 虚拟国际狗屎快讯，幽默总结每周"成果"
特工性别切换：长按特工按钮切换男/女特工头像，档案卡同步更新
新手引导：2 步气泡引导流程，首次打开自动触发，透明塑料外壳风格
标记新鲜度：24 小时内为"新鲜出炉"（彩色图标），超过 24 小时变为"陈年发酵"（深色缩小图标）
敏感区域保护：天安门、故宫、中南海等 7 处敏感区域矩形检测，禁止标记
防刷机制：100 米范围内重复标记检测
用户使用路径：
- 微信扫码打开小程序 → 授权定位权限 → 自动定位到当前位置 → 地图加载全国标记
- 首次打开触发新手引导：欢迎加入 IDSI → 认识标记按钮
- 点击狗屎标记按钮 → GPS 定位 → 逆地理编码获取城市/区县 → 放置标记 + 掉落动画 → 检查升级 → 数据同步到云端
- 点击地图上任意标记 → 底部弹出详情窗（位置/时间/幽默文案/新鲜度/踩屎数/评论区）
- 点击"踩一脚" → 播放踩屎帧动画 → 云函数记录（防重复）→ 解锁成就
- 在评论区输入吐槽 → 发送 → 同步到云端，所有用户可见
- 点击左下角特工按钮 → 双面翻转卡片展示特工档案（等级/编号/进度条/成就勋章）
- 点击卡片上的报纸图标 → 3D 翻转到背面查看狗屎周报
- 长按特工按钮 → 切换男/女特工头像
- 点击右下角奖杯按钮 → 云函数实时聚合全国城市排行榜
- 点击定位按钮 → 回到用户当前位置
相比初赛 Demo 的升级
- [重大升级] 从 Web 升级为微信小程序：使用 uni-app (Vue 3) 重构为微信小程序，获得更好的移动端体验、更精准的 GPS 定位、原生地图组件性能、微信社交传播能力
- [重大升级] 接入微信云开发：从单机 LocalStorage 升级为云端数据库 + 云函数，真正实现多用户实时数据同步，全国用户标记共享；设计了本地/云端双模式架构，云端不可用时自动降级
- 云函数支持：部署 getOpenId（用户身份识别）、addStep（踩屎事务防重复）、getRanking（城市排行榜聚合）等云函数
- 交互优化：踩一脚从 Web 版的长按改为详情页按钮点击，更符合小程序交互习惯；底部弹出弹窗替代居中弹窗
- 狗屎周报：卡片翻转展示
- 踩屎动画适配：从小程序不支持 WebM 透明视频改为精灵图帧动画方案（这个耗时最久）
产品演示视频
2.87 复制打开抖音，看看【道长的作品】狗屎地图演示视频 狗屎地图是一款基于地理位… https://v.douyin.com/Qpo3h5Yb_QM/ :7pm Q@K.jP 12/19 pQx:/
产品创作历程
最初的灵感来源
灵感来自日常生活中反复出现的愤怒——路上遇到狗屎没人清理。这种事几乎人人都经历过：走在人行道上闻到异味低头一看是一坨屎，更糟的是没注意直接踩上去。现行政策和管理办法难以根治，只能等环卫工人打扫，对环卫工人也是额外负担。投诉无门、发泄无路，这种无奈感是做这个产品的起点。
狗屎地图的核心目的从来不是恶心人，而是给情绪一个出口：看到狗屎很生气？打开小程序标记一坨，写句吐槽，再踩一脚别人标记的狗屎，把不满发泄出来。宣泄只是第一步——我加入了"IDSI 国际狗屎调查局"特工设定、等级系统、城市排行榜等游戏化机制，让这件事变得有趣、有传播力。如果足够多人参与，这些标记数据本身就是一份"民意地图"，希望它能推动相关政策或管理办法进步，也促使养狗人更自觉清理。
过程中遇到的关键问题与解决思路
- 从 Web 到小程序的技术迁移：选择 uni-app (Vue 3) 作为跨端框架，一套代码编译到微信小程序。过程中遇到了地图组件差异问题——从高德地图 JS API 切换到微信原生 map 组件，需要重写标记管理、逆地理编码等逻辑；同时要适配小程序的权限申请机制（定位权限需要用户主动授权）。
- 云开发架构设计：这是复赛最大的技术挑战。我设计了本地/云端双模式架构，通过
data-store.js统一入口代理，两套数据层接口完全对齐——这样做的好处是开发时可以先用本地模式快速调试，云端有问题时也能自动降级不影响用户使用。采用"内存缓存 + 后台异步同步"的方案，既保证了操作响应速度（不需要等网络请求），又实现了数据云端持久化。 - 多用户数据一致性：使用微信 openid 作为用户唯一标识，云函数
addStep使用数据库事务保证每人每坨屎只能踩一次，防止刷数据。数据库权限设置为"所有用户可读，仅创建者可写"，用户只能删除自己的标记，不能篡改他人数据。 - 踩屎动画方案：Web 版用的是 WebM 透明视频，但微信小程序不支持这个格式。我改用精灵图（Sprite Sheet）帧动画方案，把动画拆成多张图片序列播放，配合 CSS
drop-shadow多层蓝紫色弥散光影，同样达到了"踩爆"的视觉冲击效果。 - 敏感区域保护：政治敏感区域必须禁止标记。我收集了 7 处核心敏感区域的经纬度范围，采用矩形区域检测算法，标记前自动校验是否在禁区内，在禁区内则提示用户"此处禁止标记"。
- 长按与点击的交互冲突：Web 版通过长按来踩屎/删除，但小程序端长按与地图拖拽、标记点击容易冲突。我最终改为更符合小程序习惯的交互：点击标记弹出详情，在详情页点击按钮来"踩一脚"或删除，避免了手势冲突。
- UI 风格统一：所有弹窗（升级卡、特工档案、周报、引导气泡）统一采用"透明塑料外壳"风格——多层彩色阴影 +
backdrop-filter毛玻璃 + 半透明渐变背景，模拟亚克力材质的质感。双面翻转卡片使用 CSS 3Dtransform-style: preserve-3d实现。
重要的设计与技术决策
- 为什么选微信小程序而不是继续做 Web：相比 H5 网页，小程序有更好的移动端体验（原生组件性能更好）、更精准的 GPS 定位（微信系统级权限）、微信社交分享能力（分享给好友/群聊/朋友圈），用户无需下载安装、扫码即用，非常适合这种 LBS 类应用的冷启动和传播。
- 为什么坚持用幽默而不是控诉的调性：如果做成一个严肃的"城市不文明现象举报平台"，用户会有心理负担，传播性也差。用反讽和幽默的方式，降低了参与门槛——“我只是来玩个游戏踩一脚屎”，但客观上数据被收集了，问题被看见了。笑着把问题解决，比愤怒地控诉更有力量。
- 每周数据刷新机制：特意设置每周一 00:00 清空上周标记数据，保持"排行榜"的新鲜感和公平性，也避免数据库里的数据无限膨胀。
TRAE 实践过程
本项目从初赛 Web 版到复赛小程序版，全程使用 TRAE IDE 开发完成。
开发流程
- 项目初始化：在 TRAE IDE 中使用 uni-app 脚手架创建微信小程序项目，搭建 Vue 3 + Vite 基础结构
- 小程序迁移：通过 TRAE AI 助手将 Web 版的核心逻辑（地图标记、特工系统、排行榜等）迁移到 uni-app (Vue 3)，适配小程序原生 API 和组件
- 地图与定位集成：通过 TRAE AI 集成微信小程序原生 map 组件，解决了定位权限申请、逆地理编码、标记管理、地图视野控制等问题
- 云开发架构设计：通过 TRAE AI 设计并实现微信云开发数据层，包括数据库集合设计、安全规则配置、云函数编写、本地/云端双模式切换逻辑
- 核心功能开发：通过 TRAE AI 逐个实现特工等级系统、成就勋章、双面翻转卡片、评论系统、狗屎周报等功能
- 交互与动画调试：通过 TRAE AI 调试踩屎帧动画、CSS 3D 翻转、新手引导气泡、升级卡片弹窗等复杂交互效果
- 云函数开发：通过 TRAE AI 编写和调试云函数，特别是
addStep的事务逻辑，解决并发踩踏的问题 - UI 打磨与样式统一：通过 TRAE AI 实现透明塑料外壳风格的设计系统，统一所有弹窗和组件的视觉风格
- 部署测试：在微信开发者工具中上传代码，配置云开发环境，部署云函数，生成体验版进行真机测试
开发关键步骤截图
关键任务对话的 Session ID
1757470382097003:0b0ead1213f60c9a4fc13d5501a48257_6a6dc14b13314ea6da6aeda9.6a6ed6e913314ea6da6b04a2.6a6ed6e913314ea6da6b04a0:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/2 13:34:33)
1757470382097003:dfba887a6ee8e3d1fcfdd3ccdb44484e_6a69d8397e3aab9a90c3c94e.6a6cb6d8689d4de9d5e809c5.6a6cb6d8689d4de9d5e809c3:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/7/31 22:53:12)
1757470382097003:d619175ff40972137dfda45fdb5ac0d4_6a6d598d13314ea6da6ae5df.6a6d638313314ea6da6ae6d1.6a6d638313314ea6da6ae6cf:TRAE Work CN.0.1.43.no_sid.no_ppe.T(2026/8/1 11:09:55)
技术方案分享
技术栈：
- 前端框架：uni-app + Vue 3 (Composition API) + Vite
- 目标平台：微信小程序
- 地图服务：微信小程序原生 map 组件（腾讯地图服务底层）
- 后端/数据库：微信云开发（云数据库 + 云函数 + 云存储）
- 数据架构：本地/云端双模式，
data-store.js统一入口抽象，支持优雅降级 - 云函数：getOpenId（用户 openid 获取）、addStep（踩屎事务防重复）、getRanking（城市排行榜聚合查询）、seedDemoData/cleanDemoData（测试数据初始化/清理）
- 动画：CSS Animations + 精灵图帧动画 + CSS 3D Transform（翻转卡片）
- 开发工具：TRAE IDE + 微信开发者工具
关键实现思路：
- 双模式数据层：抽象出统一的 DataStore 接口，LocalDataStore 和 CloudDataStore 实现相同的 API，业务代码无需关心底层存储方式，通过开关一键切换。云端不可用时 catch 错误自动降级到本地模式。
- 内存缓存 + 异步同步：所有读操作直接从内存缓存返回（同步返回，用户无等待），写操作先更新内存缓存再异步写入云端，兼顾体验和数据持久化。
- 云函数事务防重复：踩屎操作在云函数端用数据库事务实现：先查询该用户是否踩过，没踩过才插入记录并更新计数，保证并发情况下也不会重复计数。
- 敏感区域检测：每个禁区定义为 {minLng, maxLng, minLat, maxLat} 的矩形范围，标记前遍历检测当前坐标是否在任意矩形内。
商业化与社会价值分析
- 情绪价值（核心）：为公众提供一个低门槛的情绪发泄出口——标记、吐槽、踩一脚，用幽默化解愤怒，将负面情绪转化为参与感和游戏乐趣。
- 社会推动力：当标记数据形成规模，本身就是一份可视化的"民意地图"。可以定期生成《城市狗屎分布报告》，推送给城管、物业、环卫部门，为精准治理提供数据支撑；公开的排行榜也能形成舆论压力，促使养狗人更自觉清理。
- 传播性：微信小程序天然具备社交传播优势，特工设定、踩屎动画、城市排行榜等游戏化机制自带话题性，"你的城市排第几"容易引发朋友圈和群聊传播。
- 可扩展方向：未来可以接入宠物社区（文明养狗宣传）、与环卫部门数据打通（派单清理）