微信小程序移动开发与应用——旅行日记
MAD Travel Diary · WeChat Mini Program
一款基于 uni-app (Vue3) + 微信云开发的旅行足迹记录小程序 —— 用足迹地图串起每一次出发，留存每一条线路与日记。
uni-app (Vue3)
微信云开发
JavaScript
腾讯地图
开发背景 Development Background
每次旅行结束，很多人的记忆都是散落的。照片躺在相册里、去过的地方挤在地图里、出行的计划记在备忘录里,过后很难再拼出"那次旅行到底走了哪些路、留下了什么"。
所以我和 3 位组员合作做了这款旅行足迹记录小程序,把地点、线路、日记收进同一个应用——出发前能规划,旅途中能随手记,回来后能在地图上回顾整段足迹。
项目简介 Project
与 3 名组员协作开发"旅行足迹记录"微信小程序，围绕足迹地图、旅行线路、旅行日记、个人中心四大模块，实现从记录、管理到展示的完整闭环。我负责项目初始化与环境搭建、地图页 / 日记页 / 个人中心 / 设置页 / 关于页等页面的基础开发，以及云函数编写与前后端联调。
项目内置 6 套主题 + 深色模式、数据滚动动画、分页加载、滑动删除、云存储头像上传等完整交互。
用户与场景设计 User & Scenario
目标用户(设计假设):喜欢记录生活、常出门旅行的年轻人与旅行爱好者;核心场景:出发前规划线路、旅途中随手记日记、回来后在地图上回顾整段足迹。
设计取舍:把"足迹地图 + 旅行线路 + 旅行日记"放进同一个应用,让记录和回顾在同一处发生;6 套主题与深色模式降低白天/夜间、强光/暗处不同场景下的使用门槛。
我的职责与亮点 My Role & Highlights
- ◆足迹地图：实现全屏腾讯地图 + 足迹图钉标记与点击弹窗、定位缩放、足迹统计数字滚动动画、骨架屏加载、新增足迹 Tab 徽章。
- ◆旅行线路：实现线路卡片管理（名称/日期/途经城市/状态），长按编辑或删除，数据实时同步云端。
- ◆旅行日记：实现图文日记（心情/天气标注），分页加载、下拉刷新、左滑删除与长按编辑，是"记录-回顾"的核心载体。
- ◆个人中心：实现头像云存储上传、昵称修改（每月限改 3 次）、一键初始化/清空示例数据，便于演示与开发。
- ◆主题系统：搭建 6 套主题 + 独立深色模式，由 CSS 变量驱动，切换后持久化并同步导航栏配色。
- ◆云开发对接：参与云数据库四集合 (足迹/线路/日记/用户) 设计，编写 5 个云函数（足迹获取、数据统计、示例数据初始化、用户资料管理），实现日记分页、头像云存储上传、昵称月度限改等逻辑。
- ◆架构与工程化：搭建 uni-app (Vue3) 工程并配置路由与 TabBar；编写构建脚本，通过云函数目录链接 (junction) 实现热更新；参与云数据库设计与云函数编写、前后端联调；沉淀 9 个通用组件（城市选择器/日期选择器/星级评分/时间线等）与 11 个工具函数（日期/校验/地理/颜色/事件总线等），直接复用，统一团队开发风格。
- ◆体验优化：骨架屏过渡、统计数字滚动、分页减载、暗色护眼，兼顾首屏与加载体验。
页面展示 Screenshots
① 足迹地图全屏腾讯地图 · 足迹图钉标记 · 顶部统计面板（城市/日记/线路滚动动画）· 右下角缩放与定位
② 足迹详情弹窗点击图钉弹出 · 展示标题 / 城市 / 日期 / 描述，足迹数据来自云数据库
③ 旅行线路线路卡片：名称 / 日期 / 途经城市 / 状态标签 · 长按编辑与删除 · 返回顶部
④ 旅行日记日记卡片：心情 / 天气图标 · 触底分页加载 · 左滑删除 · 长按编辑
⑤ 个人中心头像云存储上传 · 昵称修改（每月限 3 次）· 长按复制 OpenID · 一键初始化示例数据
⑥ 设置 · 主题系统6 套主题（暖阳/清冷/森林/落日/海洋/暗夜）+ 深色模式开关，CSS 变量驱动全局换肤并持久化
⑦ 关于页应用信息 · 完整功能列表 · 技术栈说明（uni-app / 微信云开发 / 云数据库）
以上 7 张页面截图均来自小程序实机运行画面。
如何运行 How to Run
在项目根目录执行 npm run dev:mp-weixin 后，用微信开发者工具导入 dist/dev/mp-weixin/ 目录；云函数修改后右键"上传并部署（云端安装依赖）"。首次使用进入"我的"点击"初始化示例数据"即可查看地图 / 线路 / 日记示例数据。
项目复盘 Project Recap
- ◆目标：把"足迹地图、旅行线路、旅行日记"收进同一个应用，让旅途记忆能沉淀、能回顾。
- ◆做法：先确定四大模块与数据集合，再以 4 人分工推进页面开发与云函数，逐页联调、反复取舍。
- ◆结果：六大页面跑通，地图/线路/日记数据与云端打通，主题与深色模式全局生效，沉淀 9 个通用组件与 11 个工具函数。
- ◆下一步：补充年度足迹回顾与分享功能，让"记录-回顾-分享"的记忆闭环更完整。
项目收获 Reflections
- ◆用户场景驱动：设计足迹地图、日记记录与主题切换时，始终以用户场景为原点——记录时追求顺手，回顾时追求沉浸。交互细节服务于体验，而非功能堆砌，产品功能需回归真实使用情境。
- ◆数据结构即洞察：参与数据库设计时意识到，字段结构既是技术基础，也是理解用户行为的数据入口。数据如何被组织，决定了后续分析与优化策略的可能性。
- ◆从 0 到 1 的协作与交付：与 3 位伙伴从需求对齐、分工推进到反复取舍，将想法完整落地为可演示程序。好产品是团队持续打磨的结果，也是协作能力的真实体现。