立项背景和目标:每天面临"今天吃什么"的决策时,用户常陷入选择困难,反复纠结后浪费时间甚至随意将就。市场上缺乏一个快速、有趣、可自定义食物库的随机决策工具。目标:帮助用户3秒内做出饮食决定,提供开箱即用的预设食物库(7大类40+种),同时支持自定义食物管理。
软件功能、核心功能模块:1)随机选餐:转盘/老虎机滚动动画模式和Tinder式卡片滑动模式两种交互;2)多维筛选:按类别、口味、价格、用餐时段、场景标签5个维度自由组合筛选;3)饮食模式:7种一键预设模式(减脂轻食、无辣不欢、省钱模式、一人食、聚餐模式、快手速食等);4)食物库管理:预设40+种食物+用户自定义增删改;5)周饮食计划:按周规划每日早/午/晚餐,支持周导航切换;6)选餐历史:自动记录最近200条选餐记录,按日分组展示;7)深色模式:浅色/深色主题一键切换;8)云端同步:微信云开发跨设备数据同步。
业务流程、功能路径描述:用户打开小程序 → 首页默认随机选餐 → 可选择转盘或卡片两种模式 → 选前可按类别/口味/价格/时段/标签筛选 → 点击开始随机 → 动画播放后显示结果 → 可"再来一次"或"就吃这个" → 结果自动保存到历史记录 → 用户可在"饮食计划"中规划一周三餐 → 在"食物库"中管理自己的食物列表。
整体架构和设计思路:采用前后端分离架构(前端uni-app + 后端微信云开发)。前端按"页面层 → 组件层 → 业务逻辑层 → 数据层"四层划分。页面层5个功能页面(首页/食物库/历史/设置/饮食计划),组件层封装3个可复用组件(转盘动画/卡片滑动/筛选面板),业务逻辑层包含随机引擎和数据存储模块。数据层采用"本地存储优先 + 云端同步"策略,离线可用。随机引擎设计为纯逻辑模块(zero UI依赖),输入食物列表+筛选条件→输出随机结果,可独立单元测试。数据源采用适配器模式,预设食物和用户自定义数据通过统一接口访问,未来可扩展第三方数据源(如高德POI)。
"我"的负责模块和结果:本人独立完成全部前端开发和云开发配置。实现功能:7大类40+种预设食物数据设计、多维筛选引擎(5维度组合过滤)、Fisher-Yates洗牌随机算法、转盘缓出动画(30-40步动态步进、二次缓出曲线)、卡片滑动手势交互、周饮食计划ISO周键算法、深色模式CSS Variables全组件适配、本地存储+云开发双写同步机制。
遇到的难点、方案:1)Vue响应式链冲突:在@tap事件中同时修改data和其依赖的computed属性,导致Vue 2 + uni-app事件系统崩溃,所有按钮失效。方案:将筛选条件更新逻辑移到watch中,事件方法只保留最精简的状态切换,遵循"事件只改状态,watch响应变化"的职责分离原则。2)老虎机滚动动画性能:微信小程序中高频DOM更新导致卡顿。方案:使用setTimeout循环替代setInterval避免积压,动态步数(30-40步)+二次缓出曲线(delay = 40 + progress² × 300),开始时快速滚动、结束时渐近减速。3)本地存储与云端冲突:离线操作后同步可能冲突。方案:本地优先策略,本地作为唯一数据源,云端仅备份,冲突时以本地为准。