从零到一开发「天才厨神」美食烹饪小程序:架构设计与踩坑记录

从零到一开发「天才厨神」美食烹饪小程序:架构设计与踩坑记录

一、项目背景

在学习微信小程序开发的过程中,我想做一个实用且有挑战性的项目。考虑到美食烹饪是一个大众需求,且涉及数据展示、用户交互、云开发等多个技术点,最终决定开发一款美食烹饪小程序——「天才厨神」。

二、技术架构

2.1 整体架构

云开发层 - CloudBase

前端层 - 微信小程序

业务层 - cloudDB.js

index

数据库操作封装

detail

create

favorites

blindbox

profile

messages

secCheck

markMessageRead

menus

favorites

comments

messages

replies

云存储

2.2 技术选型

层级技术理由
前端微信小程序原生开发原生开发能更好地利用微信平台特性,调试体验更流畅
后端微信云开发(CloudBase)一站式解决方案,无需搭建服务器,降低开发成本
数据库云数据库(NoSQL)自动扩展,适合小程序数据存储需求
复杂逻辑云函数(Node.js)处理需要管理员权限的操作和调用微信开放接口

三、核心功能与关键代码

3.1 菜品权限控制

由于微信小程序对个人开发者的社交功能有限制,我们采用了"系统菜品+私有菜品"的模式:

// 获取用户可见的菜品asyncgetVisibleMenus(userId){returnawaitthis.db.collection('menus').where(this._.or([{isPublic:true},// 系统菜品:所有用户可见{userId:userId}// 私有菜品:仅创建者可见])).get();}

用户创建的菜品默认设为私有,只有管理员通过后台操作才能将其设为系统菜品。

3.2 收藏功能

用户可以收藏任意菜品,方便快速访问:

asynctoggleFavorite(userId,menuId){constfavorite=awaitthis.db.collection('favorites').where({userId,menuId}).get();if(favorite.data.length>0){awaitthis.db.collection('favorites').doc(favorite.data[0]._id).remove();returnfalse;}else{awaitthis.db.collection('favorites').add({data:{userId,menuId,createdAt:newDate()}});returntrue;}}

3.3 盲盒随机抽取

让用户随机发现新菜品,增加趣味性:

asyncdrawBlindBox(){letmenus=[...this.data.menus];if(this.data.favoritesOnly){menus=menus.filter(m=>this.data.favoritedMap[m.id]);}elseif(this.data.myMenusOnly){menus=menus.filter(m=>m.userId===this.data.userInfo.id);}constrandomMenu=menus[Math.floor(Math.random()*menus.length)];this.setData({randomMenu,showResult:true});}

3.4 内容安全检测

调用微信安全 API 检测用户提交的内容:

// 云函数exports.main=async(event)=>{const{type,content}=event;if(type==='text'){constresult=awaitcloud.openapi.security.msgSecCheck({content});returnresult;}};

四、开发过程中的坑(重点)

4.1 云函数依赖配置缺失

问题:创建的云函数在调用时总是报错,检查日志发现是缺少wx-server-sdk依赖。

原因:新建云函数时package.json没有自动包含必要的依赖。

解决方案:手动添加依赖配置:

{"name":"markMessageRead","dependencies":{"wx-server-sdk":"~2.6.3"}}

4.2 小程序端数据权限不足

问题:用户点击消息后,已读状态无法更新到数据库,报错"权限不足"。

原因:消息是由系统创建的(其他用户评论时),当前用户没有权限直接更新其他用户创建的记录。

解决方案:使用云函数处理需要管理员权限的操作:

// 云函数:标记消息已读exports.main=async(event)=>{awaitdb.collection('messages').doc(event.messageId).update({data:{isRead:true}});return{success:true};};

4.3 消息已读状态同步问题

问题:用户点击消息后,小红点会短暂消失,但返回消息中心后又出现。

原因:前端在调用云函数的同时就更新了本地状态,但云函数执行失败(因依赖缺失),导致数据库中的状态没有改变。返回页面重新加载时,从数据库读取的仍是未读状态。

解决方案

  1. 修复云函数依赖问题
  2. 在云函数返回成功后再更新本地状态

4.4 审核被拒:个人开发者不能做社交功能

问题:第一次提交审核被拒,原因是个人开发者不能做用户生成内容(UGC)的社交功能。

原因:原来的设计允许用户创建公共菜品并点赞,这被判定为社交功能。

解决方案

  1. 移除用户创建公共菜品的选项,默认创建私有菜品
  2. 移除点赞功能
  3. 公共菜品改名为"系统菜品",由管理员统一管理

五、成品展示

经过一系列开发和调试,「天才厨神」小程序已经完成开发并通过审核。主要功能包括:

  • 菜品浏览与搜索
  • 菜品创建(私有)
  • 菜品收藏
  • 盲盒随机抽取
  • 评论与回复
  • 消息通知
  • 意见反馈(带内容安全检测)

如果你对这个项目感兴趣,可以扫码体验:

六、总结

通过这个项目,我对微信小程序开发和云开发有了更深入的理解。最大的收获是学会了如何处理云函数依赖、数据权限等实际开发中常见的问题,以及如何根据平台规则调整产品设计。

如果你也在学习小程序开发,希望这些经验能对你有所帮助。如果你有任何问题或建议,欢迎交流!