微信小程序 AI 大模型实战从零打造智能美食推荐应用本文以一个真实项目为例分享如何将 AI 大模型能力集成到微信小程序中涵盖云开发、用户激励系统、数据统计等实战经验。一、项目背景每天吃什么是很多人的日常难题。为了解决这个问题我开发了一款智能美食推荐小程序名字叫喂你推荐-今天吃什么主要功能包括摇一摇推荐基于用户偏好和时段随机推荐美食AI 定制饮食计划接入大模型根据身体数据生成 7 天饮食计划饮食打卡记录每日饮食培养健康习惯勋章成就系统通过打卡、收藏等行为解锁勋章提升用户粘性技术栈微信小程序原生框架 云开发 AI 大模型二、核心技术实现2.1 AI 大模型集成项目中使用了 AI 大模型来生成个性化饮食计划。核心思路是将用户的身体数据身高、体重、年龄、目标等构建成结构化 Prompt然后调用模型 API 获取 JSON 格式的饮食方案。// 构建 PromptfunctionbuildPlanPrompt(form){return你是一位专业营养师。请根据以下用户信息生成一份 7 天饮食计划... 用户信息 - 性别${form.gender}- 年龄${form.age}岁 - 身高${form.height}cm - 体重${form.weight}kg - 口味偏好${form.tastes.join(、)}- 饮食目标${form.goal}- 忌口${form.taboos.join(、)}请严格按以下 JSON 格式返回...;}关键点Prompt 工程明确指定输出格式要求模型返回纯 JSON避免 markdown 标记容错处理模型返回可能不规范需要做 JSON 解析和字段校验兜底方案AI 调用失败时返回预设的示例数据保证用户体验try{consttextawaitai.callModel(prompt,systemPrompt);constparsedai.extractJson(text);returnbuildPlanFromParsed(parsed);}catch(err){// AI 失败时使用兜底数据returngetMockPlan();}2.2 用户激励系统设计为了提升用户留存设计了一套完整的激励体系打卡系统记录用户每日饮食支持早中晚三餐打卡。勋章系统定义了 11 种勋章覆盖不同行为维度类型勋章解锁条件打卡初来乍到首次打卡打卡一周坚持累计打卡 7 天连续三日连续连续打卡 3 天收藏美食猎人收藏 5 道美食计划计划达人生成 5 个 AI 计划勋章弹出动画用户解锁新勋章时展示炫酷的弹窗动画包含粒子特效、图标旋转、光晕脉冲等效果增强成就感。/* 粒子飘落动画 */keyframesparticleFall{0%{transform:translateY(0)scale(1);opacity:1;}100%{transform:translateY(600rpx)scale(0);opacity:0;}}/* 勋章弹入动画 */keyframespopupBounce{0%{transform:scale(0)rotate(-10deg);opacity:0;}50%{transform:scale(1.1)rotate(3deg);}100%{transform:scale(1)rotate(0);opacity:1;}}2.3 云开发数据架构使用微信云开发主要涉及以下集合├── users # 用户信息 ├── foods # 美食数据 ├── punches # 打卡记录 ├── plans # AI 饮食计划 ├── food_favorites # 美食收藏 └── plan_favorites # 计划收藏数据查询优化对于统计数据打卡天数、收藏数等采用并行查询减少等待时间const[punchRes,foodFavRes,planFavRes]awaitPromise.all([api.collection(punches).where({openid}).get(),api.collection(food_favorites).where({openid}).get(),api.collection(plan_favorites).where({openid}).get()]);2.4 智能推荐算法摇一摇推荐不是完全随机而是基于多维度筛选用户偏好过滤根据口味偏好筛选辣度忌口排除排除用户设置的忌口食材时段匹配根据当前时间优先推荐对应时段的美食饮食类型区分素食、荤食、荤素皆可// 根据口味偏好筛选辣度constallowedSpicyTASTE_SPICY_MAP[taste]||[0,1,2,3];constspicyFilteredallFoods.filter(fallowedSpicy.includes(f.spicyLevel));// 根据当前时段优先推荐constcurrentMealthis.getCurrentMealTypes();consttimeMatchedspicyFiltered.filter(ff.mealTypesf.mealTypes.some(mcurrentMeal.includes(m)));三、性能优化实践3.1 减少不必要的渲染小程序的setData是性能瓶颈之一。优化策略合并多次setData调用使用diff算法只更新变化的数据避免在setData中传递大对象3.2 数据缓存对于不常变化的数据如用户偏好使用本地缓存// 写入缓存wx.setStorageSync(user_preferences,preferences);// 读取缓存constprefswx.getStorageSync(user_preferences);3.3 云函数优化并行查询使用Promise.all同时发起多个请求分页加载列表数据分页查询避免一次性加载过多索引优化为常用查询字段添加数据库索引四、踩坑记录4.1 云数据库集合不存在新创建的集合需要在云开发控制台手动创建否则会报-502005错误。4.2 用户信息获取微信已废弃wx.getUserProfile接口新版获取用户头像需要使用open-typechooseAvatar的 button 组件。4.3 日期对象序列化云数据库返回的Date对象直接渲染会显示[object Object]需要手动格式化formatDate(date){constdnewDate(date);return${d.getMonth()1}-${d.getDate()}${d.getHours()}:${d.getMinutes()};}五、总结这个项目涵盖了小程序开发的多个核心场景AI 集成、云开发、用户激励、动画交互等。通过合理的架构设计和性能优化可以打造出体验流畅、功能丰富的小程序应用。完整项目代码已开源感兴趣的小伙伴可以自行研究学习。如果觉得本文对你有帮助欢迎点赞收藏关注后续会持续分享更多小程序开发实战经验。