1. 商城小程序搭建前先把「零代码 / 低代码 / 源码交付」三条路选清楚商城小程序搭建这件事2026 年最大的变化不是工具变多了而是选型分叉变得非常明显。同样一句「我要做个商城小程序」门店老板、品牌市场部、研发团队给出的答案完全不同。我见过太多项目卡在第一步用零代码平台搭到一半发现要接自己的会员系统推倒重来或者一上来就上源码结果两个月还没跑通支付。先把三条路径的边界说清楚后面所有配置才有意义。零代码拖拽生成页面平台托管后端你只负责填商品、配活动。适合 SKU 少于 200、没有自有会员体系、希望一周内上线收单的门店。代价是数据在平台侧深度定制基本没有。低代码可视化搭建 少量代码扩展自定义组件、云函数、API 对接。适合有会员/订单中台、需要把小程序当成一个「前端入口」接进现有系统的团队。它的甜点区是页面用可视化做业务逻辑用代码补。源码交付拿到完整工程目录自己部署、自己迭代。适合要长期运营、要做多端小程序 H5 App、对数据主权有要求的项目。代价是你要有能维护 Node/Java 后端和微信开发者工具链的人。这里有个常被忽略的点不管走哪条路只要涉及 AI 能力智能客服、商品文案生成、订单意图识别、图片理解你都需要一个统一的模型调用入口。零代码平台自带的 AI 功能通常锁死在平台内低代码和源码项目则要自己接。这就是为什么我把 TaoToken 放在前置章节——它解决的是「一个 Key 打通多家模型」的问题而不是替代你的搭建工具。选型时你可以问自己三个问题第一三个月后我要不要改业务流程第二订单和会员数据要不要回流到自己的库第三团队里有没有人能看懂app.json和云函数三个都是「是」直接走源码前两个「是」第三个「否」走低代码全「否」零代码。下面这张对照表是我实际项目里总结的不是理论分类维度零代码低代码源码交付上线周期3–7 天2–4 周6–12 周月成本量级几百到几千几千到几万服务器 人力数据归属平台侧混合自有支付对接平台代配半自动全手动AI 接入平台内置API 对接API 对接迭代自由度低中高选完路径接下来才是环境。很多人跳过选型直接装微信开发者工具结果做到支付那一步发现平台不支持自定义商户号返工成本极高。所以顺序一定是先定交付形态再定技术栈最后才配环境。2. TaoToken 统一 Key 前置一个入口打通商城小程序的 AI 与鉴权链路商城小程序里需要调模型的地方比想象中多商品详情页的智能问答、客服自动回复、订单备注的意图分类、活动文案批量生成、甚至用户上传图片后的商品识别。如果每个能力接一家厂商你会得到一堆 Key、一堆计费口径、一堆 SDK维护成本爆炸。TaoToken 的思路是统一 Key 统一 API 通道你只拿一个 Key通过一个 Base URL 调用不同模型计费和额度在一个控制台里看。对商城项目来说最直接的价值是——支付回调、用户鉴权、AI 能力这三块可以共用一套请求封装不用为每个厂商写一遍重试和超时逻辑。先拿 Key。打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台创建 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 。拿到形如sk-xxxx的字符串后不要写进小程序前端代码这一点后面排障章节会重点讲。API 的基础地址是https://taotoken.net/api注意这个地址不带任何查询参数直接作为 Base URL 使用。模型 ID 在文档里查https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果你用的是 Claude Code 这类编码工具做小程序后端接入方式略有不同参考 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentClaudeCodeAnthropicutm_campaignrewrite 。长期做编码和 Agent 任务的话Coding Plan 更划算https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。为什么强调「前置」因为商城小程序的鉴权模块和 AI 模块可以共用同一套 HTTP 客户端。你封装一个request函数统一带上Authorization: Bearer key支付回调验签走一套逻辑AI 调用走另一套但超时、重试、日志是共享的。这样后面加模型、换模型只改配置不改代码。一个真实的坑很多人在小程序里直接wx.request调模型接口把 Key 放在前端。微信开发者工具的「不校验合法域名」选项让你本地能跑通一上线就 401 或者域名被拦。正确做法是小程序只调你自己的后端后端再调 TaoToken。这个架构决定必须在写第一行代码前就定下来。3. 可复制配置微信开发者工具 后端 settings 片段这一节给可直接粘贴的配置。假设你的商城小程序走「低代码 自建后端」路线后端用 Node.jsExpress 或 Koa 都行前端用微信开发者工具原生开发。先看后端的环境配置。新建.env文件路径放在项目根目录# .env TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_API_KEYsk-你的实际Key TAOTOKEN_MODEL_ID你的模型ID WX_APPIDwx你的小程序AppID WX_SECRET你的小程序Secret MCH_ID你的微信支付商户号 MCH_KEY你的商户API密钥 PORT3000注意TAOTOKEN_BASE_URL结尾不要加斜杠很多 SDK 会拼成//v1/chat/completions导致 404。然后是后端的模型调用封装用axios举例// services/aiClient.js const axios require(axios); const aiClient axios.create({ baseURL: process.env.TAOTOKEN_BASE_URL, timeout: 30000, headers: { Authorization: Bearer ${process.env.TAOTOKEN_API_KEY}, Content-Type: application/json } }); async function chat(messages) { const res await aiClient.post(/v1/chat/completions, { model: process.env.TAOTOKEN_MODEL_ID, messages, temperature: 0.7 }); return res.data.choices[0].message.content; } module.exports { chat };如果你用 TypeScript 或者需要更严格的类型可以换成官方 SDK但 Base URL 一定要显式传https://taotoken.net/api不要依赖默认值。接下来是微信开发者工具侧的配置。打开project.config.json确认appid和你的小程序一致{ appid: wx你的AppID, projectname: mall-miniprogram, setting: { urlCheck: true, es6: true, enhance: true, postcss: true, minified: true }, compileType: miniprogram }本地联调阶段urlCheck可以先设false方便调localhost。但上线前必须改回true并在微信公众平台配置合法域名你的后端域名要加进request合法域名列表。TaoToken 的域名不需要配到小程序里因为小程序只调你自己的后端。前端请求封装// utils/request.js const BASE_URL https://your-backend.com; function request(path, options {}) { return new Promise((resolve, reject) { wx.request({ url: ${BASE_URL}${path}, method: options.method || GET, data: options.data || {}, header: { content-type: application/json, X-Token: wx.getStorageSync(userToken) || }, success: (res) { if (res.statusCode 200) resolve(res.data); else reject(res); }, fail: reject }); }); } module.exports { request };用户鉴权模块建议用微信的wx.login拿code传给后端换openid和自定义登录态。后端拿到code后调微信接口再用openid生成 JWT 返回给小程序。这套流程和 AI 调用完全解耦但共用同一个request封装。支付模块的配置单独说。微信支付需要商户号、API 密钥、证书。后端生成预支付订单时金额单位是分不是元。这个坑每年都有人踩。4. 验证请求从本地联调到真机跑通支付与 AI 问答配置写完必须验证。分三步后端 AI 调用通不通、小程序能不能拿到登录态、支付能不能拉起。第一步后端单独测 AI 调用。写个临时脚本// test-ai.js require(dotenv).config(); const { chat } require(./services/aiClient); (async () { const reply await chat([ { role: user, content: 用一句话介绍一款蓝牙耳机 } ]); console.log(模型返回, reply); })();运行node test-ai.js。成功的话你会看到模型返回的商品文案。如果报 401检查 Key 有没有多余空格如果报 404检查 Base URL 是不是多加了/v1正确是https://taotoken.net/api/v1/chat/completions。第二步小程序登录态验证。在app.js的onLaunch里调wx.login把code发到后端/api/login后端返回 token 后存进storage。你可以在开发者工具的 Console 里打印wx.getStorageSync(userToken)确认有值。第三步真机支付验证。用微信开发者工具的「真机调试」扫码后在手机上走一遍下单流程。重点看三个日志后端有没有收到prepay_id请求、wx.requestPayment的参数是否完整、支付回调有没有正确更新订单状态。一个实测有效的验证顺序先让 AI 问答跑通不涉及钱再让登录跑通不涉及钱最后才碰支付。因为支付一旦出错排查链路最长前面两个通了能排除掉大部分环境问题。如果你在验证模型能力时想快速对比不同模型的表现可以直接用模型对话页面试https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。把同一段商品描述丢给不同模型看哪个更适合你的商城场景再决定写进配置里的 Model ID。真机验证时还有个细节微信开发者工具的「不校验合法域名」只对模拟器生效真机调试走的是真实网络。所以本地localhost后端在真机上调不通你需要么用内网穿透么直接部署到测试服务器。这一步没有捷径。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth这一节按真实报错来。每个错误我都尽量给出「现象 → 原因 → 动作」。401 Unauthorized。现象是后端日志里模型调用返回 401。原因通常有三个Key 写错或过期、Authorization头格式不对必须是Bearer加空格加 Key、Key 被放在前端导致泄露后被禁用。动作先在控制台重新生成一个 Key用 curl 直接测curl https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer sk-你的Key \ -H Content-Type: application/json \ -d {model:你的模型ID,messages:[{role:user,content:hi}]}curl 通了说明 Key 没问题问题在你的代码封装。local proxy failed。这个报错常见于用了某些代理配置或者 SDK 默认读了系统代理。现象是请求根本没发出去。原因环境变量HTTP_PROXY/HTTPS_PROXY被设置或者 SDK 配置里写了代理地址。动作检查.env和系统环境变量把代理相关项清掉Node 项目可以在启动命令前加NO_PROXYtaotoken.net。reading choices 报错Cannot read properties of undefined (reading choices)。现象是代码里res.data.choices[0]报错。原因返回结构和你预期不一致通常是请求失败但没抛异常res.data是个错误对象。动作在取choices前先判断if (!res.data || !res.data.choices) { console.error(异常返回, JSON.stringify(res.data)); throw new Error(模型返回结构异常); }OAuth 相关报错。如果你用 Claude Code 或类似工具接入可能遇到 OAuth 认证失败。这类工具通常要求配置ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY。Base URL 填https://taotoken.net/apiKey 填你的 TaoToken Key。三件套缺一不可Base URL Key Model ID。少任何一个都会报认证或模型不存在。还有一个高频问题小程序端wx.request报「不在以下 request 合法域名列表中」。这不是代码问题是微信公众平台的后台配置问题。去「开发管理 → 开发设置 → 服务器域名」把你的后端域名加进去注意必须是 HTTPS 且已备案。排查时养成一个习惯先看后端日志再看前端 Console最后看网络面板。90% 的问题在后端日志里就有答案前端报错往往只是表象。6. 从选型到上线把统一 Key 接进你的商城交付流程走到这里你应该已经有一套能跑通的最小闭环小程序前端 → 自建后端 → TaoToken 统一通道 → 模型返回 → 展示在商品页或客服窗口。支付和鉴权也各自验证过。接下来是把它变成可交付的东西。源码交付的项目目录结构建议这样组织mall-miniprogram/ ├── miniprogram/ # 小程序前端 │ ├── pages/ │ ├── components/ │ └── utils/ ├── server/ # 后端 │ ├── routes/ │ ├── services/ │ │ └── aiClient.js │ ├── .env │ └── app.js ├── docs/ # 交付文档 │ ├── 部署说明.md │ └── 接口清单.md └── project.config.json交付文档里必须写清楚三件事环境变量清单哪些要填、去哪拿、模型 ID 怎么换、支付证书怎么配。这三样是接手的人最容易卡住的地方。如果你的项目需要长期迭代把模型调用统一收口到services/aiClient.js一个文件里。以后换模型、加模型、调参数只改这一个文件加.env不动业务代码。这是统一 Key 方案最大的工程价值——变更点收敛。最后给一个实用建议上线前用模型对话页面跑一轮真实商品文案把效果好的 prompt 存下来写进代码注释。商城场景里商品描述、客服话术、活动文案这三类 prompt 调好了AI 模块的体验就稳了。模型对话入口https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 遇到接口细节直接查。Key 管理和新建在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。上线不是终点。商城小程序的生命周期里活动页会改、商品会换、模型会升级。把配置和代码分离把 Key 和后端绑定把前端只当展示层——这套结构能让你在半年后改需求时不用重读一遍所有代码。