一个帮助用户快速决定“这一顿吃什么”的微信小程序。项目包含个人菜品库、条件随机、饮食记录、月历和基础统计,并使用微信云开发实现同一微信账号跨设备同步。
- 按餐次、分类、用餐方式和价格范围筛选菜品
- 约 1.3 秒的随机选择动画,结束后展示推荐结果
- 自动过滤最近 N 天吃过的菜品
- 菜品搜索、分类、排序、添加、编辑、详情和删除
- 记录早餐、午餐、晚餐和夜宵
- 支持 0.5 分步进评分、饮食状态和备注
- 月历查看每日饮食历史,禁止记录未来日期
- 菜品数量、本月记录、平均评分和偏好统计
- 昵称和头像保存至云端,跨设备恢复
- 云数据库同步,本地缓存作为网络异常时的兜底
- 微信原生小程序:JavaScript、WXML、WXSS
- Skyline 渲染模式
- 微信云开发文档型数据库
- 微信云存储
wx.setStorageSync本地缓存
WhatToEat/
├── app.js / app.json / app.wxss
├── components/
│ └── navigation-bar/ 自定义导航栏
├── pages/
│ ├── index/ 首页与随机选择
│ ├── dishes/ 菜品库
│ ├── dish-form/ 添加和编辑菜品
│ ├── dish-detail/ 菜品详情
│ ├── records/ 饮食月历与历史
│ ├── record-form/ 记录一餐
│ └── profile/ 个人资料、统计与设置
└── utils/
└── store.js 本地缓存、云端 CRUD 与迁移
当前代码连接的云环境:
cloud1-d7gua1dxyb865738c
如需部署到其他小程序,请同时修改 project.config.json 中的 AppID,以及 app.js 中的云环境 ID。
在云开发控制台创建以下集合:
| 集合 | 用途 | 权限 |
|---|---|---|
dishes |
菜品数据 | 仅创建者可读写 |
meal_records |
饮食记录 | 仅创建者可读写 |
user_settings |
随机设置、昵称和头像地址 | 仅创建者可读写 |
云存储也应设置为“仅创建者可读写”。每条数据由云开发自动附加 _openid,不同微信用户的数据相互隔离。
- 安装并打开微信开发者工具。
- 导入本项目根目录。
- 确认登录微信号拥有当前小程序的开发权限。
- 确认云环境、三个数据库集合和云存储权限已配置。
- 点击“编译”,然后使用“预览”进行真机测试。
项目不依赖 npm 包,无需执行依赖安装或构建命令。
首次启用云端时,程序会检查当前微信用户的 user_settings:
- 云端尚未初始化:将当前设备的本地菜品、记录和设置迁移到云端。
- 云端已经初始化:从云端拉取该用户的数据并刷新本地缓存。
- 云端请求失败:继续使用本地缓存,写入失败时向用户提示。
同一个微信账号在不同手机上打开同一 AppID 的小程序时,会读取相同的云端数据。不同微信账号通过 _openid 和集合权限隔离。
受微信隐私规则限制,小程序不能静默读取真实微信头像、昵称或微信号:
- 用户首次点击头像后,通过
chooseAvatar选择头像并上传云存储。 - 用户首次点击昵称后,通过昵称填写能力选择或输入昵称。
- 保存完成后会自动显示,并在其他设备上恢复。
- 菜品图片目前使用 Emoji 代表图标,尚未提供菜品照片上传。
- 分类和标签使用内置选项,尚未提供独立的分类/标签管理页。
- 数据同步采用前端直连云数据库,依赖集合和云存储权限正确配置。
在微信开发者工具中完成真机测试后上传版本,再到微信公众平台的版本管理中设置体验版、提交审核,并在审核通过后发布。