用AI开发微信小程序（七）：TaoToken统一Key接入，让点菜小程序跑通拿手菜推荐

1. 点菜小程序卡在推荐这一步问题到底出在哪微信小程序里做 AI 点菜最直观的体验是用户点开一道「拿手菜」小程序应该立刻给出搭配建议、口味调整或者一句有温度的推荐语。但真动手写的时候很多人会卡在同一个地方——推荐链路跑不通。不是模型不返回而是 Key 管理、请求通道、图片编码、字段映射这几件事各管各的拼不到一起。我这次要解决的就是这个场景一个已经能记录菜谱、能展示列表的微信小程序在用户点选某道拿手菜之后触发一次 AI 推荐。推荐内容需要结合菜名、材料、做法甚至用户上传的成品图。图片要转 Base64 传给模型PRD 里定义的字段要准确映射到请求体里最后还要保证整条链路一次跑通而不是调一次改一次。适合谁看正在用 TRAE 或类似工具开发微信小程序、已经有一版菜谱功能、准备接入大模型做推荐或对话的开发者。你不需要从零搭项目但需要能看懂config.toml、settings.json和小程序wx.request的基本写法。下面我会把统一 Key 通道的配置骨架、Base64 图片上传的验证动作、PRD 字段映射的对照关系全部拆开目标只有一个让点菜推荐链路一次跑通。2. TaoToken 统一 Key 接入前的准备在微信小程序里直接写死某个模型的 Key短期能跑长期会出问题换模型要改代码、多环境要复制 Key、Key 泄露风险高。TaoToken 的思路是提供一个统一的 API 通道你用同一个 Key 就能访问不同模型小程序端只认一个 BaseURL 和一个 Key切换模型只改配置不改业务代码。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址后面不加 UTM 参数直接作为base_url使用。你需要先拿到一个可用的 Key。进入控制台创建 API Key路径是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。创建之后先别急着写进小程序因为小程序代码包会被反编译Key 直接放前端等于公开。推荐做法是小程序端只请求你自己的后端或云函数由后端持有 TaoToken Key 再转发。如果你只是本地调试可以临时放在config.toml里但上线前必须挪走。模型对话的调试入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 你可以先在网页里发一条消息确认 Key 和通道是通的再回到小程序里接。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有针对 OpenAI 兼容格式的说明小程序端按这个格式拼请求体即可。3. config.toml 与 settings.json 可复制骨架TRAE 这类工具通常会在项目里生成配置文件用来描述模型通道和运行参数。下面这份config.toml骨架可以直接复制重点是把base_url指向 TaoToken 的 API 地址api_key先用占位符本地调试时替换成真实 Key。# config.toml # TaoToken 统一通道配置骨架 [provider] name taotoken base_url https://taotoken.net/api api_key sk-你的TaoTokenKey timeout_seconds 60 [model] # 点菜推荐场景建议用响应快、中文好的模型 default gpt-4o-mini fallback claude-3-5-sonnet [request] # 推荐场景不需要太长输出控制成本 max_tokens 800 temperature 0.7 stream false [scene] # 与小程序点菜推荐链路对应 name dish_recommend system_prompt 你是一个家常菜推荐助手根据用户点选的拿手菜给出搭配建议和一句推荐语。对应的settings.json用来描述小程序端读取的字段和 PRD 映射关系。这份文件的作用是让前端知道请求体里哪个字段对应菜名、哪个字段对应材料、图片以什么格式传。{ api: { baseUrl: https://taotoken.net/api, chatPath: /v1/chat/completions, apiKeyEnv: TAOTOKEN_API_KEY }, prdMapping: { dishName: name, ingredients: ingredients, steps: steps, imageBase64: image, createTime: createTime }, recommend: { trigger: onDishTap, maxImageWidth: 750, imageFormat: jpeg, includeImage: true } }这里有个关键点prdMapping里的字段名必须和 PRD 中定义的数据结构一致。PRD 里菜谱对象是name、ingredients、steps、image、createTime那么映射表就按这个来。小程序端在触发推荐时从本地缓存my_recipes里取出当前菜谱对象按映射表拼成请求体而不是临时想字段名。如果你用的是 Coding Plan 做长期编码或 Agent 场景配置里可以再加一段[coding]把模型固定成适合代码补全的版本。入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 适合需要反复调试推荐逻辑的阶段。4. Base64 图片上传与 PRD 字段映射的验证动作图片是点菜推荐里最容易出问题的部分。微信小程序里用户拍照或选图后拿到的是临时文件路径不能直接传给模型需要先读成 Base64。PRD 里也写了「图片转为 Base64 字符串存储」所以这一步和存储逻辑是统一的。先看小程序端的图片处理函数。核心是用wx.getFileSystemManager().readFile读文件指定encoding: base64然后拼成 data URL。// utils/image.js function fileToBase64(filePath) { return new Promise((resolve, reject) { wx.getFileSystemManager().readFile({ filePath: filePath, encoding: base64, success: (res) { // PRD 中 image 字段存的就是这种 data URL const base64 data:image/jpeg;base64, res.data; resolve(base64); }, fail: (err) { reject(err); } }); }); } module.exports { fileToBase64 };拿到 Base64 之后不要直接塞进请求体。PRD 里提到图片要压缩到宽度 750px 以内否则本地缓存 10MB 很快爆掉请求体也会过大。压缩可以用wx.compressImage然后再转 Base64。// 压缩后再转 Base64 wx.compressImage({ src: tempFilePath, quality: 70, success: (res) { fileToBase64(res.tempFilePath).then((base64) { // 存入菜谱对象 recipe.image base64; wx.setStorageSync(my_recipes, recipes); }); } });接下来是字段映射的验证动作。你要确认三件事第一从缓存取出的菜谱对象字段名和settings.json里的prdMapping一致第二拼出的请求体符合 TaoToken 的 OpenAI 兼容格式第三图片以正确的 content 类型传入。// services/recommend.js const settings require(../settings.json); function buildRecommendPayload(recipe) { const mapping settings.prdMapping; const userContent [ { type: text, text: 我点了一道拿手菜${recipe[mapping.dishName]}。 材料${recipe[mapping.ingredients]}。 做法${recipe[mapping.steps]}。 请推荐一道搭配的菜并给一句推荐语。 } ]; // 如果 PRD 中 image 字段非空加入图片 if (settings.recommend.includeImage recipe[mapping.imageBase64]) { userContent.push({ type: image_url, image_url: { url: recipe[mapping.imageBase64] } }); } return { model: gpt-4o-mini, messages: [ { role: system, content: 你是一个家常菜推荐助手。 }, { role: user, content: userContent } ], max_tokens: 800, temperature: 0.7 }; } module.exports { buildRecommendPayload };验证动作可以这样设计在开发者工具里手动构造一个菜谱对象调用buildRecommendPayload打印出请求体检查name、ingredients、steps、image四个字段是否都出现在正确位置。如果图片字段是空字符串确认请求体里没有多余的image_url项。这一步做完字段映射就算验证通过。5. 验证请求与成功结果请求发送用wx.request注意 TaoToken 的 chat 路径是/v1/chat/completions和settings.json里的chatPath对应。下面是小程序端的完整请求函数。// services/recommend.js 续 function requestRecommend(recipe) { const payload buildRecommendPayload(recipe); const api settings.api; return new Promise((resolve, reject) { wx.request({ url: api.baseUrl api.chatPath, method: POST, header: { Content-Type: application/json, Authorization: Bearer getApp().globalData.taotokenKey }, data: payload, success: (res) { if (res.statusCode 200 res.data.choices) { const text res.data.choices[0].message.content; resolve(text); } else { reject(res.data); } }, fail: reject }); }); }注意Authorization头里的 Key 不要写死在小程序代码里。本地调试可以放在globalData上线前改成请求你自己的后端。如果你只是验证链路可以临时用这个方式但记得验证完就改。成功结果长这样用户在列表里点选「红烧肉」小程序取出该菜谱对象拼出请求体TaoToken 返回一段推荐文本比如「搭配一道清炒时蔬解腻又下饭。推荐语红烧肉配青菜日子有滋有味。」前端把这段文本展示在详情弹窗或推荐卡片里整条链路就算跑通了。验证时建议先关掉图片只传文本确认模型能返回。然后再打开图片确认 Base64 没有把请求体撑爆。如果返回 400先看请求体字段名如果返回 401先看 Key 和 Authorization 头如果返回超时先看timeout_seconds和网络。6. 本篇常见错排查第一个高频错误是字段名对不上。PRD 里写的是ingredients代码里写成material模型收到的就是空材料推荐结果会跑偏。排查方法在buildRecommendPayload里console.log出请求体逐字段核对settings.json的prdMapping。第二个错误是 Base64 前缀缺失。只传了纯 Base64 字符串没有data:image/jpeg;base64,前缀模型无法识别图片类型。排查方法检查fileToBase64返回的字符串是否以data:image开头。第三个错误是图片过大导致请求失败。微信小程序wx.request对请求体有大小限制Base64 又会膨胀约 33%。排查方法压缩到 750px 宽、quality 70再转 Base64观察请求体大小。第四个错误是 Key 放错位置。把 TaoToken Key 写在小程序前端或者写在后端但没带Bearer前缀。排查方法确认Authorization头格式是Bearer sk-xxx且 Key 来自 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。第五个错误是模型名写错。config.toml里写了gpt-4o-mini但请求体里写成了别的名字TaoToken 会返回模型不存在。排查方法请求体里的model字段和config.toml的default保持一致或者先在模型对话页确认可用模型。第六个错误是缓存字段被覆盖。用户修改菜谱后image字段可能变成临时路径而不是 Base64导致推荐时图片传不出去。排查方法在保存逻辑里统一走fileToBase64确保存入my_recipes的image始终是 data URL。7. 下一步把推荐链路接进真实点菜流程链路跑通之后你可以把它接进真实的点菜交互。用户点选拿手菜触发requestRecommend返回的推荐文本展示在详情弹窗底部或者单独做一个推荐卡片。如果要做长期编码和 Agent 调试可以用 Coding Plan 固定模型和参数入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。模型对话调试在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。我自己的做法是先把文本推荐跑稳再加图片最后再考虑多轮对话。因为图片一进来请求体和缓存都会变复杂先跑通文本能帮你快速定位是字段问题还是图片问题。另外PRD 里的createTime字段虽然不参与推荐但排序和调试时很有用建议保留。推荐语不要追求长一句到两句就够太长反而影响点菜体验。