尧图网站建设 
1. 从「老乡鸡开源」到能跑的小程序中间差了什么「像老乡鸡那样做饭」这个项目在 GitHub 上火了之后很多人第一反应是菜谱数据有了那我能不能把它做成一个随手能打开的小程序答案是可以但真正动手你会发现卡住你的往往不是菜谱本身而是三件事小程序骨架怎么快速搭、菜品和订单数据往哪存、AI 调用通道怎么统一管理。这篇就围绕这三个问题把 Trae SOLO 生成 uni-app 骨架、Supabase 建菜品与订单表、TaoToken 统一 Key/API 通道这条链路完整走一遍。适合谁看有前端基础、想用 AI 快速把一份开源数据变成可用小程序的开发者正在用 Trae SOLO 或类似 AI 编程工具、但被后端和配置管理拖慢节奏的人以及想把 AI 调用从「到处散落 Key」收敛成一套配置的团队。核心检索词先摆出来Trae SOLO 生成 uni-app 小程序骨架、Supabase 做菜品与订单数据、TaoToken 统一 Key/API 通道管理 AI 调用配置。下面所有命令、SQL、配置骨架都可以直接复制改掉你自己的项目名和 Key 就能跑。我试过把菜谱数据直接塞进前端 JSON结果包体积和更新都难受最后还是回到 Supabase 这条路。所以这篇的重点不是「复刻老乡鸡」而是给你一套可复用的AI 生成骨架 云端数据 统一 AI 通道的组合拳。2. 前置准备TaoToken 通道与项目初始化2.1 为什么要在小程序项目里先接 TaoToken小程序里一旦涉及 AI 能力比如「今天吃什么」推荐、菜谱步骤问答、订单备注智能解析你就会面临一个很现实的问题Key 写在哪、换模型要不要改代码、多个环境怎么隔离。如果每个功能各自读一个环境变量后面维护会非常痛苦。TaoToken 在这里的角色是统一 Key/API 通道你只需要在配置里维护一份通道信息模型对话、编码辅助、Agent 调用都走同一套入口换模型或加通道时改一处即可。官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址https://taotoken.net/api这个不加 UTM直接作为 base_url 用2.2 用 wot-starter 初始化 uni-app 骨架wot-starter 是 wot-ui 生态里的 uni-app 起步模板自带 UnoCSS、请求封装、暗黑模式等配置。我们这次不需要暗黑模式初始化后可以先把相关配置移除减少 AI 理解项目时的干扰上下文。# 使用 degit 拉取 wot-starter 模板推荐比 git clone 干净 npx degit moonofweisheng/wot-starter my-cook-app cd my-cook-app # 安装依赖建议用 pnpm pnpm install # 启动到微信小程序 pnpm dev:mp-weixin启动后你会得到dist/dev/mp-weixin目录用微信开发者工具导入即可。这一步先确认模板本身能跑起来再让 Trae SOLO 介入否则报错来源分不清是模板问题还是 AI 生成代码的问题。2.3 在 settings.json 里放 TaoToken 配置骨架Trae SOLO 的配置建议放在项目根目录的.trae/settings.json或你所用版本的对应配置路径把通道信息集中管理。下面是一个可复制的骨架base_url指向 TaoToken APIapi_key用环境变量占位避免明文进仓库。{ ai: { provider: taotoken, base_url: https://taotoken.net/api, api_key: ${TAOTOKEN_API_KEY}, default_model: claude-sonnet, channels: { chat: { model: claude-sonnet, endpoint: /v1/chat/completions }, coding: { model: claude-sonnet, endpoint: /v1/chat/completions } } } }注意api_key不要写死在 settings.json 里提交到 Git。本地用.env.localCI 用平台密钥管理仓库里只保留${TAOTOKEN_API_KEY}这种占位符。拿到 Key 的路径进入控制台创建 API Key然后按接入文档把 base_url 和 Key 填进上面的骨架。控制台和文档入口放在文末 CTA 区这里先记住「配置集中在一处」这个原则。3. 可复制配置Supabase 建表与 Trae SOLO 生成骨架3.1 Supabase 建菜品表与订单表Supabase 基于 PostgreSQL建表直接用 SQL Editor 执行。菜品表存菜谱基础信息订单表存用户下单记录两张表通过dish_id关联。-- 菜品表 create table if not exists dishes ( id bigint generated by default as identity primary key, name text not null, category text not null, ingredients jsonb default []::jsonb, steps jsonb default []::jsonb, cover_url text, flow_chart_url text, is_recommended boolean default false, created_at timestamptz default now() ); -- 订单表 create table if not exists orders ( id bigint generated by default as identity primary key, dish_id bigint references dishes(id) on delete cascade, user_openid text not null, quantity int default 1, remark text, status text default pending, created_at timestamptz default now() ); -- 常用索引 create index if not exists idx_dishes_category on dishes(category); create index if not exists idx_orders_openid on orders(user_openid);字段说明用表格对照一下更清楚字段类型用途dishes.ingredientsjsonb配料数组方便前端直接渲染dishes.stepsjsonb步骤数组支持后续加手绘流程图dishes.is_recommendedboolean首页推荐位筛选orders.statustextpending/paid/done 状态流转orders.user_openidtext小程序用户标识做订单归属提示jsonb 字段在 Supabase 里可以直接用-查询比如ingredients-0取第一个配料前端拿到的就是结构化数据不用再解析字符串。3.2 让 Trae SOLO 生成小程序页面骨架数据表建好后把下面这段需求丢给 Trae SOLO让它基于现有表结构生成页面。关键是「保持表结构不变」和「用 UnoCSS rpx」避免它自作主张改字段或引入额外依赖。基于现有 Supabase 表结构开发一个做饭小程序实现 1. 分类浏览按 dishes.category 分组展示菜谱列表 2. 首页推荐筛选 is_recommended true 的 3-5 个菜谱 3. 菜谱详情展示 ingredients、steps、flow_chart_url 4. 下单流程选择菜品后写入 orders 表status 默认 pending 要求 - 保持现有表结构不变 - 使用 UnoCSS 编写样式单位用 rpx - 请求统一走封装的 request 方法 - 适配移动端显示生成后项目结构大致是pages/index、pages/category、pages/detail、pages/order加上api/dish.ts、api/order.ts两个请求模块。如果控制台报错直接把报错原文贴回给 Trae SOLO让它基于当前代码状态修不要一次性把新需求也塞进去。3.3 小程序端请求封装接 TaoToken如果小程序里要做 AI 推荐请求封装里把 TaoToken 的 base_url 和 Key 读进来即可。下面是一个简化的请求封装示例实际项目里建议把 AI 调用单独放一个模块。// utils/ai.ts const AI_BASE_URL https://taotoken.net/api const AI_KEY import.meta.env.VITE_TAOTOKEN_API_KEY export async function askAI(prompt: string) { const res await uni.request({ url: ${AI_BASE_URL}/v1/chat/completions, method: POST, header: { Content-Type: application/json, Authorization: Bearer ${AI_KEY} }, data: { model: claude-sonnet, messages: [{ role: user, content: prompt }] } }) return res.data }注意小程序正式环境里不要把 Key 放在前端明文调用建议通过自己的云函数或 Supabase Edge Function 中转前端只调自己的接口。这里展示的是本地联调写法。4. 验证请求菜品列表与下单流程跑通4.1 验证菜品列表能拉到数据先在 Supabase 里插一条测试数据确认表结构没问题insert into dishes (name, category, ingredients, steps, is_recommended) values ( 老乡鸡同款鸡汤, 汤类, [土鸡半只,姜片3片,枸杞10粒]::jsonb, [鸡肉焯水,加姜片炖40分钟,出锅前加枸杞]::jsonb, true );然后在小程序里打开分类页看列表是否渲染出这条数据。如果列表为空先检查 Supabase 的 RLS行级安全策略是否允许匿名读取开发阶段可以临时加一条select策略。4.2 验证下单流程写入成功在详情页点「下单」触发orders表插入。验证 SQLselect o.id, d.name, o.quantity, o.status, o.created_at from orders o join dishes d on d.id o.dish_id order by o.created_at desc limit 10;能查到刚插入的记录说明前端到 Supabase 的链路通了。如果插入失败优先看dish_id是否存在、user_openid是否为空这两个是 not null 约束。4.3 验证 TaoToken 通道可用用 curl 直接打一次 TaoToken API确认 Key 和 base_url 没问题curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: claude-sonnet, messages: [{role: user, content: 用一句话推荐一道家常菜}] }返回正常内容说明通道配置正确。这一步跑通后再把同样的配置填回 settings.json小程序里的 AI 调用就能复用同一套通道。5. 本篇常见错排查5.1 wot-starter 启动报错找不到依赖多半是包管理器混用。删掉node_modules和 lock 文件统一用 pnpm 重装。如果还报 UnoCSS 相关错误检查vite.config.ts里 UnoCSS 插件是否在 uni-app 插件之前注册。5.2 Supabase 查询返回空数组先确认 RLS 策略。Supabase 默认开启 RLS新表如果没有策略匿名请求会返回空而不是报错很容易误判成「数据没插进去」。开发阶段加一条允许 select 的策略上线前再收紧。5.3 Trae SOLO 生成的代码跑不起来把控制台报错原文完整贴回去不要只描述「报错了」。同时确认你给它的上下文是当前最新代码而不是它上一轮的产物。增量沟通的意思是先让核心功能跑通再提新需求每次只改一个点。5.4 TaoToken 调用返回 401检查三处Key 是否过期、Authorization头是否带Bearer前缀、base_url 是否误加了多余路径。base_url 用https://taotoken.net/apiendpoint 再拼/v1/chat/completions不要重复拼。5.5 小程序真机预览请求失败开发工具里能跑、真机不行通常是域名白名单问题。小程序后台把 Supabase 域名和 TaoToken 域名加进 request 合法域名。本地联调可以临时勾选「不校验合法域名」但上线前必须配好。6. 把通道和骨架固定下来后面加功能才不累这套流程跑下来你会发现真正省时间的不是某一次 AI 生成而是把「骨架 数据 通道」三件事固定成可复制的模板。下次再做一个类似的小程序wot-starter 初始化、Supabase 建表 SQL、TaoToken 的 settings.json 骨架直接复用Trae SOLO 只需要专注业务页面。如果你现在卡在接入或排障阶段先去 API Keys 页面创建 Key再对照接入文档把 base_url 和 Key 填进配置想先验证模型通道是否通用模型对话页面发一条测试消息最快如果是长期做编码和 Agent 类任务建议直接看 Coding Plan把通道和额度一次性规划好省得后面反复换配置。参考入口API Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentCoding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 老乡鸡也开源？我用 Trae SOLO + TaoToken 做了个像老乡鸡那样做饭小程序！
1. 从「老乡鸡开源」到能跑的小程序中间差了什么「像老乡鸡那样做饭」这个项目在 GitHub 上火了之后很多人第一反应是菜谱数据有了那我能不能把它做成一个随手能打开的小程序答案是可以但真正动手你会发现卡住你的往往不是菜谱本身而是三件事小程序骨架怎么快速搭、菜品和订单数据往哪存、AI 调用通道怎么统一管理。这篇就围绕这三个问题把 Trae SOLO 生成 uni-app 骨架、Supabase 建菜品与订单表、TaoToken 统一 Key/API 通道这条链路完整走一遍。适合谁看有前端基础、想用 AI 快速把一份开源数据变成可用小程序的开发者正在用 Trae SOLO 或类似 AI 编程工具、但被后端和配置管理拖慢节奏的人以及想把 AI 调用从「到处散落 Key」收敛成一套配置的团队。核心检索词先摆出来Trae SOLO 生成 uni-app 小程序骨架、Supabase 做菜品与订单数据、TaoToken 统一 Key/API 通道管理 AI 调用配置。下面所有命令、SQL、配置骨架都可以直接复制改掉你自己的项目名和 Key 就能跑。我试过把菜谱数据直接塞进前端 JSON结果包体积和更新都难受最后还是回到 Supabase 这条路。所以这篇的重点不是「复刻老乡鸡」而是给你一套可复用的AI 生成骨架 云端数据 统一 AI 通道的组合拳。2. 前置准备TaoToken 通道与项目初始化2.1 为什么要在小程序项目里先接 TaoToken小程序里一旦涉及 AI 能力比如「今天吃什么」推荐、菜谱步骤问答、订单备注智能解析你就会面临一个很现实的问题Key 写在哪、换模型要不要改代码、多个环境怎么隔离。如果每个功能各自读一个环境变量后面维护会非常痛苦。TaoToken 在这里的角色是统一 Key/API 通道你只需要在配置里维护一份通道信息模型对话、编码辅助、Agent 调用都走同一套入口换模型或加通道时改一处即可。官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址https://taotoken.net/api这个不加 UTM直接作为 base_url 用2.2 用 wot-starter 初始化 uni-app 骨架wot-starter 是 wot-ui 生态里的 uni-app 起步模板自带 UnoCSS、请求封装、暗黑模式等配置。我们这次不需要暗黑模式初始化后可以先把相关配置移除减少 AI 理解项目时的干扰上下文。# 使用 degit 拉取 wot-starter 模板推荐比 git clone 干净 npx degit moonofweisheng/wot-starter my-cook-app cd my-cook-app # 安装依赖建议用 pnpm pnpm install # 启动到微信小程序 pnpm dev:mp-weixin启动后你会得到dist/dev/mp-weixin目录用微信开发者工具导入即可。这一步先确认模板本身能跑起来再让 Trae SOLO 介入否则报错来源分不清是模板问题还是 AI 生成代码的问题。2.3 在 settings.json 里放 TaoToken 配置骨架Trae SOLO 的配置建议放在项目根目录的.trae/settings.json或你所用版本的对应配置路径把通道信息集中管理。下面是一个可复制的骨架base_url指向 TaoToken APIapi_key用环境变量占位避免明文进仓库。{ ai: { provider: taotoken, base_url: https://taotoken.net/api, api_key: ${TAOTOKEN_API_KEY}, default_model: claude-sonnet, channels: { chat: { model: claude-sonnet, endpoint: /v1/chat/completions }, coding: { model: claude-sonnet, endpoint: /v1/chat/completions } } } }注意api_key不要写死在 settings.json 里提交到 Git。本地用.env.localCI 用平台密钥管理仓库里只保留${TAOTOKEN_API_KEY}这种占位符。拿到 Key 的路径进入控制台创建 API Key然后按接入文档把 base_url 和 Key 填进上面的骨架。控制台和文档入口放在文末 CTA 区这里先记住「配置集中在一处」这个原则。3. 可复制配置Supabase 建表与 Trae SOLO 生成骨架3.1 Supabase 建菜品表与订单表Supabase 基于 PostgreSQL建表直接用 SQL Editor 执行。菜品表存菜谱基础信息订单表存用户下单记录两张表通过dish_id关联。-- 菜品表 create table if not exists dishes ( id bigint generated by default as identity primary key, name text not null, category text not null, ingredients jsonb default []::jsonb, steps jsonb default []::jsonb, cover_url text, flow_chart_url text, is_recommended boolean default false, created_at timestamptz default now() ); -- 订单表 create table if not exists orders ( id bigint generated by default as identity primary key, dish_id bigint references dishes(id) on delete cascade, user_openid text not null, quantity int default 1, remark text, status text default pending, created_at timestamptz default now() ); -- 常用索引 create index if not exists idx_dishes_category on dishes(category); create index if not exists idx_orders_openid on orders(user_openid);字段说明用表格对照一下更清楚字段类型用途dishes.ingredientsjsonb配料数组方便前端直接渲染dishes.stepsjsonb步骤数组支持后续加手绘流程图dishes.is_recommendedboolean首页推荐位筛选orders.statustextpending/paid/done 状态流转orders.user_openidtext小程序用户标识做订单归属提示jsonb 字段在 Supabase 里可以直接用-查询比如ingredients-0取第一个配料前端拿到的就是结构化数据不用再解析字符串。3.2 让 Trae SOLO 生成小程序页面骨架数据表建好后把下面这段需求丢给 Trae SOLO让它基于现有表结构生成页面。关键是「保持表结构不变」和「用 UnoCSS rpx」避免它自作主张改字段或引入额外依赖。基于现有 Supabase 表结构开发一个做饭小程序实现 1. 分类浏览按 dishes.category 分组展示菜谱列表 2. 首页推荐筛选 is_recommended true 的 3-5 个菜谱 3. 菜谱详情展示 ingredients、steps、flow_chart_url 4. 下单流程选择菜品后写入 orders 表status 默认 pending 要求 - 保持现有表结构不变 - 使用 UnoCSS 编写样式单位用 rpx - 请求统一走封装的 request 方法 - 适配移动端显示生成后项目结构大致是pages/index、pages/category、pages/detail、pages/order加上api/dish.ts、api/order.ts两个请求模块。如果控制台报错直接把报错原文贴回给 Trae SOLO让它基于当前代码状态修不要一次性把新需求也塞进去。3.3 小程序端请求封装接 TaoToken如果小程序里要做 AI 推荐请求封装里把 TaoToken 的 base_url 和 Key 读进来即可。下面是一个简化的请求封装示例实际项目里建议把 AI 调用单独放一个模块。// utils/ai.ts const AI_BASE_URL https://taotoken.net/api const AI_KEY import.meta.env.VITE_TAOTOKEN_API_KEY export async function askAI(prompt: string) { const res await uni.request({ url: ${AI_BASE_URL}/v1/chat/completions, method: POST, header: { Content-Type: application/json, Authorization: Bearer ${AI_KEY} }, data: { model: claude-sonnet, messages: [{ role: user, content: prompt }] } }) return res.data }注意小程序正式环境里不要把 Key 放在前端明文调用建议通过自己的云函数或 Supabase Edge Function 中转前端只调自己的接口。这里展示的是本地联调写法。4. 验证请求菜品列表与下单流程跑通4.1 验证菜品列表能拉到数据先在 Supabase 里插一条测试数据确认表结构没问题insert into dishes (name, category, ingredients, steps, is_recommended) values ( 老乡鸡同款鸡汤, 汤类, [土鸡半只,姜片3片,枸杞10粒]::jsonb, [鸡肉焯水,加姜片炖40分钟,出锅前加枸杞]::jsonb, true );然后在小程序里打开分类页看列表是否渲染出这条数据。如果列表为空先检查 Supabase 的 RLS行级安全策略是否允许匿名读取开发阶段可以临时加一条select策略。4.2 验证下单流程写入成功在详情页点「下单」触发orders表插入。验证 SQLselect o.id, d.name, o.quantity, o.status, o.created_at from orders o join dishes d on d.id o.dish_id order by o.created_at desc limit 10;能查到刚插入的记录说明前端到 Supabase 的链路通了。如果插入失败优先看dish_id是否存在、user_openid是否为空这两个是 not null 约束。4.3 验证 TaoToken 通道可用用 curl 直接打一次 TaoToken API确认 Key 和 base_url 没问题curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: claude-sonnet, messages: [{role: user, content: 用一句话推荐一道家常菜}] }返回正常内容说明通道配置正确。这一步跑通后再把同样的配置填回 settings.json小程序里的 AI 调用就能复用同一套通道。5. 本篇常见错排查5.1 wot-starter 启动报错找不到依赖多半是包管理器混用。删掉node_modules和 lock 文件统一用 pnpm 重装。如果还报 UnoCSS 相关错误检查vite.config.ts里 UnoCSS 插件是否在 uni-app 插件之前注册。5.2 Supabase 查询返回空数组先确认 RLS 策略。Supabase 默认开启 RLS新表如果没有策略匿名请求会返回空而不是报错很容易误判成「数据没插进去」。开发阶段加一条允许 select 的策略上线前再收紧。5.3 Trae SOLO 生成的代码跑不起来把控制台报错原文完整贴回去不要只描述「报错了」。同时确认你给它的上下文是当前最新代码而不是它上一轮的产物。增量沟通的意思是先让核心功能跑通再提新需求每次只改一个点。5.4 TaoToken 调用返回 401检查三处Key 是否过期、Authorization头是否带Bearer前缀、base_url 是否误加了多余路径。base_url 用https://taotoken.net/apiendpoint 再拼/v1/chat/completions不要重复拼。5.5 小程序真机预览请求失败开发工具里能跑、真机不行通常是域名白名单问题。小程序后台把 Supabase 域名和 TaoToken 域名加进 request 合法域名。本地联调可以临时勾选「不校验合法域名」但上线前必须配好。6. 把通道和骨架固定下来后面加功能才不累这套流程跑下来你会发现真正省时间的不是某一次 AI 生成而是把「骨架 数据 通道」三件事固定成可复制的模板。下次再做一个类似的小程序wot-starter 初始化、Supabase 建表 SQL、TaoToken 的 settings.json 骨架直接复用Trae SOLO 只需要专注业务页面。如果你现在卡在接入或排障阶段先去 API Keys 页面创建 Key再对照接入文档把 base_url 和 Key 填进配置想先验证模型通道是否通用模型对话页面发一条测试消息最快如果是长期做编码和 Agent 类任务建议直接看 Coding Plan把通道和额度一次性规划好省得后面反复换配置。参考入口API Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content模型对话https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentCoding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content