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