1. 从零到上架个人开发者做小程序到底卡在哪很多人第一次做微信小程序卡住的地方其实不是“不会写代码”而是三件事同时压过来页面长什么样、代码怎么组织、微信开发者工具里那一堆报错怎么消。你打开编辑器面对空白的app.json脑子里只有一个模糊的想法却不知道第一步该敲什么。这种状态我太熟悉了早期我做一个日历类小程序光是调一个日期网格的布局就耗掉一整个周末。现在链路可以拆得很清楚让 Gemini 负责“想清楚长什么样、说什么话”让 Trae 负责“把想法落成能跑的代码”微信开发者工具负责“预览、真机调试、上传体验版”。而这三者之间需要一个稳定的模型调用入口否则你会在不同工具里反复填 Key、换 Base URL光配置就能劝退。TaoToken 在这里的作用就是统一 Key一个 Key、一个 Base URLGemini 和 Trae 都能指向它省掉到处找 Key 的麻烦。这篇教程面向的是个人开发者尤其是没怎么接触过小程序工程化、但愿意跟着步骤敲命令的人。我会把“Gemini 设计 → Trae 开发 → 微信开发者工具预览上架”这条链路拆成可复制的动作每一步都给出配置片段和验证方法。你不需要先成为前端高手只要能把命令和配置贴对位置就能跑通一个万年历小程序的雏形并把它上传成体验版。核心检索词先明确微信小程序开发、Gemini 设计页面、Trae 写代码、微信开发者工具预览上架、TaoToken 统一 Key 接入。这几个词会贯穿全文你跟着做的时候可以对照自己的进度。先说清楚整体节奏。第一步用 Gemini 生成页面结构和文案输出 HTML 原型第二步把原型丢给 Trae让它生成符合微信小程序规范的 WXML/WXSS/JS第三步在微信开发者工具里预览、修错、上传体验版。中间所有需要调模型的地方都通过 TaoToken 的 API 走Base URL 统一填https://taotoken.net/api。这样你只需要维护一份 Key不用在 Gemini 官方和 Trae 之间来回切换账号。我试过把这三步拆开单独做也试过混在一起让一个工具全包结论是拆开更稳设计归设计代码归代码预览归预览每一段都有明确的输入和输出出错时容易定位。下面按这个顺序展开你可以边看边操作。2. TaoToken 前置统一 Key 怎么拿、Base URL 怎么填在开始写代码之前先把模型调用的入口准备好。TaoToken 的官网是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 地址是https://taotoken.net/api。注意 API 地址后面不加任何 UTM 参数保持干净否则某些客户端会把查询串当成路径的一部分导致 404。拿 Key 的路径很直接进入官网后找到控制台入口在 API Keys 页面创建一个新 Key。创建时给它起个能认出来的名字比如miniprogram-dev方便后面在 Trae 和 Gemini 两边复用。Key 只显示一次复制后先存到本地一个临时文件里别直接贴在聊天窗口或截图里。拿到 Key 之后你要理解“统一 Key”到底统一了什么。Gemini 官方接口和 OpenAI 兼容接口的请求格式不完全一样但 TaoToken 对外暴露的是 OpenAI 兼容的/v1/chat/completions风格端点。也就是说只要某个工具支持自定义 Base URL 和 API Key你就能把它指到https://taotoken.net/api然后用同一个 Key 调不同模型。Trae 支持自定义模型接入Gemini 侧如果你用的是支持自定义端点的客户端也能走同一套。这里给出一份可复制的配置片段格式是 JSON路径按你实际使用的工具放。如果你用的是 Trae 的自定义模型配置通常会在设置里填 Base URL 和 API Key如果你用的是某个支持 OpenAI 兼容接口的客户端配置文件一般长这样{ base_url: https://taotoken.net/api, api_key: sk-你的TaoTokenKey, model: gemini-2.5-pro, timeout: 120 }注意model字段填的是你要调用的模型 ID具体可用 ID 以控制台或接入文档里列出的为准。不要凭记忆写一个不存在的名字否则会返回模型不存在的错误。Base URL 末尾不要加/v1因为 TaoToken 的路径已经包含了版本段你再加一层会变成/v1/v1/chat/completions直接 404。如果你用的是 Claude Code 这类工具配置方式又不一样它读的是环境变量或 settings 文件。但本篇主线是 Gemini Trae 微信开发者工具所以先把 JSON 这份配置准备好后面 Trae 里会用到。Key 的权限建议只给必要的模型调用不要开一堆用不到的范围减少泄露后的影响面。还有一点不要把 Key 硬编码进小程序的源码里。小程序的代码最终会打包上传Key 写进去等于公开。正确的做法是 Key 只存在于你的开发工具配置里小程序运行时如果需要调模型应该走你自己的后端转发而不是前端直连。这篇教程里模型调用只发生在设计和编码阶段不进入小程序运行时所以不存在这个问题但你要有这个意识。配置完成后先别急着往下走做一次连通性测试。用 curl 发一个最小请求确认 Key 和 Base URL 都对curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer sk-你的TaoTokenKey \ -H Content-Type: application/json \ -d { model: gemini-2.5-pro, messages: [{role: user, content: 回复 ok}], max_tokens: 10 }如果返回里能看到choices字段和一段内容说明连通性没问题。如果返回 401检查 Key 是否复制完整、有没有多余空格如果返回 404检查 Base URL 是不是多写了/v1。这一步过了再进下一步。3. 可复制配置Gemini 设计 Trae 开发的完整片段这一节是整篇的核心操作区。我会把 Gemini 侧的设计提示词、Trae 侧的配置和提示词都写成可复制的形式你照着贴就行。先明确分工Gemini 负责产出 HTML 原型和文案Trae 负责把 HTML 原型翻译成微信小程序的 WXML/WXSS/JS 三件套。3.1 Gemini 侧生成万年历页面结构与文案打开你配置好 TaoToken 的 Gemini 客户端新建一个对话。提示词不要写得太虚要给约束。下面这段可以直接复制你是一个微信小程序 UI 设计师。请为一个万年历小程序设计首页要求 1. 顶部显示当前年月左右箭头切换月份 2. 中间是 7 列日期网格今天高亮 3. 点击某一天下方显示该日期的农历、宜忌文案 4. 整体风格简洁主色 #07C160背景白色圆角 12px 5. 输出一份完整的 HTML 文件内联 CSS不要外部依赖 6. 文案用中文农历和宜忌用占位数据即可。把这段发给模型后你会得到一份 HTML。检查几个点网格是不是 7 列、今天有没有高亮、点击事件有没有绑定。如果模型输出的 HTML 里用了onclick但没写对应的 JS 函数先记下来后面在 Trae 里补。这份 HTML 不需要在浏览器里完美运行它的作用是给 Trae 提供结构和样式参考。如果你想让 Gemini 顺便把文案也定了可以在提示词里加一句“宜忌文案给出 10 组示例用 JSON 数组返回”。这样你后面在 Trae 里就有现成的数据可以塞进data里不用自己编。3.2 Trae 侧配置自定义模型并生成小程序代码打开 Trae进入设置里的模型配置。如果你用的是 Trae 的自定义模型功能把上一节的 JSON 配置填进去Base URL 填https://taotoken.net/apiAPI Key 填你的 TaoToken KeyModel ID 填你要用的模型。保存后新建一个项目项目名可以叫calendar-demo。然后把 Gemini 生成的 HTML 复制到 Trae 的对话里附上这段提示词这是一个万年历小程序的 HTML 原型。请把它转换成微信小程序项目要求 1. 生成 app.json、app.wxss、pages/index/index.wxml、index.wxss、index.js、index.json 2. 日期网格用 wx:for 渲染今天用 class 高亮 3. 点击日期切换下方文案数据放在 index.js 的 data 里 4. 农历和宜忌先用占位数据结构清晰即可 5. 不要使用任何小程序不支持的 HTML 标签。Trae 会生成一组文件。你要重点看app.json里的pages字段有没有包含pages/index/index以及index.wxml里有没有用到div这种小程序不认的标签。如果有直接让 Trae 改“把 div 换成 viewspan 换成 text”。这一步来回几次很正常别指望一次完美。3.3 微信开发者工具侧项目配置打开微信开发者工具新建项目目录选 Trae 生成的项目根目录AppID 填你自己的小程序 AppID没有的话先去微信公众平台注册一个个人小程序很快。后端服务选“不使用云服务”模板选“不使用模板”。创建后工具会自动编译如果app.json写对了你就能看到页面。这里给一份最小的app.json参考确保你的项目结构对得上{ pages: [pages/index/index], window: { navigationBarTitleText: 万年历, navigationBarBackgroundColor: #07C160, navigationBarTextStyle: white }, style: v2, sitemapLocation: sitemap.json }sitemap.json如果 Trae 没生成手动建一个内容写{rules:[{action:allow,page:*}]}即可。这一步做完项目就能在工具里跑起来了。4. 验证请求与成功结果三步确认链路通了配置写完不代表链路通了必须做验证。我习惯按三步走接口连通性、预览页渲染、体验版上传。每一步都有明确的成功标志达不到就停下来排查别往下走。4.1 接口连通性测试回到第 2 节那条 curl 命令再跑一次确认返回里有choices。如果你在 Trae 里配置了自定义模型也可以在 Trae 里发一句“回复 ok”看它能不能正常返回。成功标志Trae 的对话窗口出现模型回复且没有报401或local proxy failed。这一步的意义是隔离问题如果 Trae 里模型调不通后面生成的代码质量就没法保证先修好再继续。4.2 预览页渲染检查在微信开发者工具里点“编译”看模拟器里的页面。成功标志顶部显示年月中间有 7 列日期网格今天那一格颜色不同点击某一天下方文案变化。如果页面空白打开调试器的 Console看有没有报错。常见的是app.json里 pages 路径写错或者index.js里data没定义导致渲染失败。如果网格错位检查index.wxss里网格容器的display是不是grid或flex小程序对grid的支持在较新基础库上是没问题的但如果你用了很老的调试基础库可能表现不一致。在工具右上角“详情 → 本地设置”里把调试基础库调到较新版本。4.3 体验版上传确认预览没问题后点工具右上角“上传”填版本号和备注。上传成功后去微信公众平台的“版本管理”里能看到刚上传的开发版本。把它设为体验版用手机微信扫码就能打开。成功标志手机上看得到页面点击日期有反应。这一步如果失败通常是 AppID 没填对或者你的账号没有上传权限。个人小程序默认可以上传体验版但正式发布需要走审核。上传成功不等于上架上架还要在公众平台提交审核审核通过后手动发布。这篇教程的目标是让你走到“体验版可打开”审核那一步按平台提示填类目和截图即可。三步都过了说明 Gemini 设计、Trae 开发、微信开发者工具预览这条链路是通的。接下来是排错环节把常见的坑列出来。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth这一节按真实报错来写你遇到哪个就查哪个。每个报错都给出原因和修法不要跳过。5.1 401 Unauthorized报错原文通常是{error:{message:Invalid API key,type:invalid_request_error}}。原因Key 复制不完整、有多余空格、或者 Key 已被删除。修法重新在控制台创建一个 Key复制时注意不要带上换行。如果你用的是环境变量检查有没有引号包裹导致把引号也读进去了。5.2 local proxy failed这个报错一般出现在 Trae 或某些客户端里意思是本地代理层没能把请求发出去。原因可能是 Base URL 写成了https://taotoken.net/api/v1多了一层路径也可能是客户端本身要求走系统代理而你的网络环境不允许。修法把 Base URL 改回https://taotoken.net/api去掉末尾的/v1。如果还不行检查客户端的网络设置里有没有开启“使用系统代理”关掉再试。5.3 reading choices 相关报错报错原文类似Cannot read properties of undefined (reading choices)。原因客户端期望返回体里有choices字段但实际返回的是错误结构比如{error:...}。修法先看完整返回体确认是 401 还是 404。如果是 404检查路径如果是 401检查 Key。还有一种情况是模型 ID 写错返回里没有choices换成控制台列出的可用模型 ID 即可。5.4 OAuth 相关报错如果你在某个工具里看到 OAuth 报错通常是因为该工具默认走官方 OAuth 登录而不是 API Key 模式。修法在工具的设置里找到“使用 API Key”或“自定义模型”选项切换到 API Key 模式填入 TaoToken 的 Key 和 Base URL。不要同时开着 OAuth 和 API Key容易冲突。5.5 微信开发者工具侧报错常见的是app.json 未找到或pages/index/index 未找到。原因项目目录选错了选到了父目录而不是项目根目录。修法重新打开项目目录选到包含app.json的那一层。另一个常见的是wx:for 渲染空白检查index.js里data的字段名和wxml里绑定的名字是否一致大小写敏感。把这几类报错对照一遍基本能覆盖你在这条链路上会遇到的问题。修完之后重新走一遍第 4 节的三步验证确认都过了再继续。6. 语义一致 CTA下一步该点哪里链路跑通之后你可能会想继续深入比如让 Trae 帮你加一个“节日提醒”功能或者把模型调用接到小程序后端做动态文案。这时候你需要的是稳定的模型入口和文档。如果你主要是在排障和接入阶段建议先去 API Keys 页面再确认一下 Key 的状态然后翻一遍接入文档把 Base URL 和模型 ID 的对应关系记清楚。这两个入口分别是API Keys 在控制台里接入文档在官网的文档区。地址统一从https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content进找到对应页面即可。如果你只是想验证某个模型能不能用、回复质量怎么样可以直接用模型对话页面发几条测试消息不用写代码。这个入口适合快速试模型确认没问题再往 Trae 里配。如果你打算长期做编码和 Agent 类任务比如让 Trae 持续帮你迭代小程序、或者跑一些自动化的代码生成流程那 Coding Plan 更合适。它的定位是长期编码场景比单次调用更省心。入口同样从官网进找到 Coding Plan 页面。最后提醒一句小程序上架前记得在微信公众平台把类目、截图、隐私协议都填好这些和模型调用无关但缺了审核过不了。模型这条链路只负责帮你把代码写出来上架合规的部分还是要按平台要求走。