1. 點(diǎn)菜小程序卡在推薦這一步問題到底出在哪微信小程序里做 AI 點(diǎn)菜最直觀的體驗(yàn)是用戶點(diǎn)開一道「拿手菜」小程序應(yīng)該立刻給出搭配建議、口味調(diào)整或者一句有溫度的推薦語。但真動手寫的時(shí)候很多人會卡在同一個(gè)地方——推薦鏈路跑不通。不是模型不返回而是 Key 管理、請求通道、圖片編碼、字段映射這幾件事各管各的拼不到一起。我這次要解決的就是這個(gè)場景一個(gè)已經(jīng)能記錄菜譜、能展示列表的微信小程序在用戶點(diǎn)選某道拿手菜之后觸發(fā)一次 AI 推薦。推薦內(nèi)容需要結(jié)合菜名、材料、做法甚至用戶上傳的成品圖。圖片要轉(zhuǎn) Base64 傳給模型PRD 里定義的字段要準(zhǔn)確映射到請求體里最后還要保證整條鏈路一次跑通而不是調(diào)一次改一次。適合誰看正在用 TRAE 或類似工具開發(fā)微信小程序、已經(jīng)有一版菜譜功能、準(zhǔn)備接入大模型做推薦或?qū)υ挼拈_發(fā)者。你不需要從零搭項(xiàng)目但需要能看懂config.toml、settings.json和小程序wx.request的基本寫法。下面我會把統(tǒng)一 Key 通道的配置骨架、Base64 圖片上傳的驗(yàn)證動作、PRD 字段映射的對照關(guān)系全部拆開目標(biāo)只有一個(gè)讓點(diǎn)菜推薦鏈路一次跑通。2. TaoToken 統(tǒng)一 Key 接入前的準(zhǔn)備在微信小程序里直接寫死某個(gè)模型的 Key短期能跑長期會出問題換模型要改代碼、多環(huán)境要復(fù)制 Key、Key 泄露風(fēng)險(xiǎn)高。TaoToken 的思路是提供一個(gè)統(tǒng)一的 API 通道你用同一個(gè) Key 就能訪問不同模型小程序端只認(rèn)一個(gè) BaseURL 和一個(gè) Key切換模型只改配置不改業(yè)務(wù)代碼。官網(wǎng)地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。注意 API 地址后面不加 UTM 參數(shù)直接作為base_url使用。你需要先拿到一個(gè)可用的 Key。進(jìn)入控制臺創(chuàng)建 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 。創(chuàng)建之后先別急著寫進(jìn)小程序因?yàn)樾〕绦虼a包會被反編譯Key 直接放前端等于公開。推薦做法是小程序端只請求你自己的后端或云函數(shù)由后端持有 TaoToken Key 再轉(zhuǎn)發(fā)。如果你只是本地調(diào)試可以臨時(shí)放在config.toml里但上線前必須挪走。模型對話的調(diào)試入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 你可以先在網(wǎng)頁里發(fā)一條消息確認(rèn) Key 和通道是通的再回到小程序里接。接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有針對 OpenAI 兼容格式的說明小程序端按這個(gè)格式拼請求體即可。3. config.toml 與 settings.json 可復(fù)制骨架TRAE 這類工具通常會在項(xiàng)目里生成配置文件用來描述模型通道和運(yùn)行參數(shù)。下面這份config.toml骨架可以直接復(fù)制重點(diǎn)是把base_url指向 TaoToken 的 API 地址api_key先用占位符本地調(diào)試時(shí)替換成真實(shí) Key。# config.toml # TaoToken 統(tǒng)一通道配置骨架 [provider] name taotoken base_url https://taotoken.net/api api_key sk-你的TaoTokenKey timeout_seconds 60 [model] # 點(diǎn)菜推薦場景建議用響應(yīng)快、中文好的模型 default gpt-4o-mini fallback claude-3-5-sonnet [request] # 推薦場景不需要太長輸出控制成本 max_tokens 800 temperature 0.7 stream false [scene] # 與小程序點(diǎn)菜推薦鏈路對應(yīng) name dish_recommend system_prompt 你是一個(gè)家常菜推薦助手根據(jù)用戶點(diǎn)選的拿手菜給出搭配建議和一句推薦語。對應(yīng)的settings.json用來描述小程序端讀取的字段和 PRD 映射關(guān)系。這份文件的作用是讓前端知道請求體里哪個(gè)字段對應(yīng)菜名、哪個(gè)字段對應(yīng)材料、圖片以什么格式傳。{ 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 } }這里有個(gè)關(guān)鍵點(diǎn)prdMapping里的字段名必須和 PRD 中定義的數(shù)據(jù)結(jié)構(gòu)一致。PRD 里菜譜對象是name、ingredients、steps、image、createTime那么映射表就按這個(gè)來。小程序端在觸發(fā)推薦時(shí)從本地緩存my_recipes里取出當(dāng)前菜譜對象按映射表拼成請求體而不是臨時(shí)想字段名。如果你用的是 Coding Plan 做長期編碼或 Agent 場景配置里可以再加一段[coding]把模型固定成適合代碼補(bǔ)全的版本。入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 適合需要反復(fù)調(diào)試推薦邏輯的階段。4. Base64 圖片上傳與 PRD 字段映射的驗(yàn)證動作圖片是點(diǎn)菜推薦里最容易出問題的部分。微信小程序里用戶拍照或選圖后拿到的是臨時(shí)文件路徑不能直接傳給模型需要先讀成 Base64。PRD 里也寫了「圖片轉(zhuǎn)為 Base64 字符串存儲」所以這一步和存儲邏輯是統(tǒng)一的。先看小程序端的圖片處理函數(shù)。核心是用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 之后不要直接塞進(jìn)請求體。PRD 里提到圖片要壓縮到寬度 750px 以內(nèi)否則本地緩存 10MB 很快爆掉請求體也會過大。壓縮可以用wx.compressImage然后再轉(zhuǎn) Base64。// 壓縮后再轉(zhuǎn) Base64 wx.compressImage({ src: tempFilePath, quality: 70, success: (res) { fileToBase64(res.tempFilePath).then((base64) { // 存入菜譜對象 recipe.image base64; wx.setStorageSync(my_recipes, recipes); }); } });接下來是字段映射的驗(yàn)證動作。你要確認(rèn)三件事第一從緩存取出的菜譜對象字段名和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: 我點(diǎn)了一道拿手菜${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: 你是一個(gè)家常菜推薦助手。 }, { role: user, content: userContent } ], max_tokens: 800, temperature: 0.7 }; } module.exports { buildRecommendPayload };驗(yàn)證動作可以這樣設(shè)計(jì)在開發(fā)者工具里手動構(gòu)造一個(gè)菜譜對象調(diào)用buildRecommendPayload打印出請求體檢查name、ingredients、steps、image四個(gè)字段是否都出現(xiàn)在正確位置。如果圖片字段是空字符串確認(rèn)請求體里沒有多余的image_url項(xiàng)。這一步做完字段映射就算驗(yàn)證通過。5. 驗(yàn)證請求與成功結(jié)果請求發(fā)送用wx.request注意 TaoToken 的 chat 路徑是/v1/chat/completions和settings.json里的chatPath對應(yīng)。下面是小程序端的完整請求函數(shù)。// services/recommend.js 續(xù) 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 不要寫死在小程序代碼里。本地調(diào)試可以放在globalData上線前改成請求你自己的后端。如果你只是驗(yàn)證鏈路可以臨時(shí)用這個(gè)方式但記得驗(yàn)證完就改。成功結(jié)果長這樣用戶在列表里點(diǎn)選「紅燒肉」小程序取出該菜譜對象拼出請求體TaoToken 返回一段推薦文本比如「搭配一道清炒時(shí)蔬解膩又下飯。推薦語紅燒肉配青菜日子有滋有味。」前端把這段文本展示在詳情彈窗或推薦卡片里整條鏈路就算跑通了。驗(yàn)證時(shí)建議先關(guān)掉圖片只傳文本確認(rèn)模型能返回。然后再打開圖片確認(rèn) Base64 沒有把請求體撐爆。如果返回 400先看請求體字段名如果返回 401先看 Key 和 Authorization 頭如果返回超時(shí)先看timeout_seconds和網(wǎng)絡(luò)。6. 本篇常見錯排查第一個(gè)高頻錯誤是字段名對不上。PRD 里寫的是ingredients代碼里寫成material模型收到的就是空材料推薦結(jié)果會跑偏。排查方法在buildRecommendPayload里console.log出請求體逐字段核對settings.json的prdMapping。第二個(gè)錯誤是 Base64 前綴缺失。只傳了純 Base64 字符串沒有data:image/jpeg;base64,前綴模型無法識別圖片類型。排查方法檢查fileToBase64返回的字符串是否以data:image開頭。第三個(gè)錯誤是圖片過大導(dǎo)致請求失敗。微信小程序wx.request對請求體有大小限制Base64 又會膨脹約 33%。排查方法壓縮到 750px 寬、quality 70再轉(zhuǎn) Base64觀察請求體大小。第四個(gè)錯誤是 Key 放錯位置。把 TaoToken Key 寫在小程序前端或者寫在后端但沒帶Bearer前綴。排查方法確認(rèn)Authorization頭格式是Bearer sk-xxx且 Key 來自 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。第五個(gè)錯誤是模型名寫錯。config.toml里寫了gpt-4o-mini但請求體里寫成了別的名字TaoToken 會返回模型不存在。排查方法請求體里的model字段和config.toml的default保持一致或者先在模型對話頁確認(rèn)可用模型。第六個(gè)錯誤是緩存字段被覆蓋。用戶修改菜譜后image字段可能變成臨時(shí)路徑而不是 Base64導(dǎo)致推薦時(shí)圖片傳不出去。排查方法在保存邏輯里統(tǒng)一走fileToBase64確保存入my_recipes的image始終是 data URL。7. 下一步把推薦鏈路接進(jìn)真實(shí)點(diǎn)菜流程鏈路跑通之后你可以把它接進(jìn)真實(shí)的點(diǎn)菜交互。用戶點(diǎn)選拿手菜觸發(fā)requestRecommend返回的推薦文本展示在詳情彈窗底部或者單獨(dú)做一個(gè)推薦卡片。如果要做長期編碼和 Agent 調(diào)試可以用 Coding Plan 固定模型和參數(shù)入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。模型對話調(diào)試在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 接入文檔在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。我自己的做法是先把文本推薦跑穩(wěn)再加圖片最后再考慮多輪對話。因?yàn)閳D片一進(jìn)來請求體和緩存都會變復(fù)雜先跑通文本能幫你快速定位是字段問題還是圖片問題。另外PRD 里的createTime字段雖然不參與推薦但排序和調(diào)試時(shí)很有用建議保留。推薦語不要追求長一句到兩句就夠太長反而影響點(diǎn)菜體驗(yàn)。