企业官网建设流程全解析

1. 微信小游戏 AI 开发全流程：从 Cocos Creator 工程到真机跑通

微信小游戏这两年的变化挺明显，尤其是 AI 能力接入这块。以前做一个带 NPC 对话或者动态关卡的小游戏，要么自己搭后端，要么找云函数硬扛，调试链路长得让人头大。现在用 Cocos Creator 3.x + TypeScript 搭工程，再通过 TaoToken 统一 Key 把 AI 能力接进来，整个流程能压缩到半天内跑通首个 Demo。这篇文章就是把我实际走通的这条链路完整拆开：环境怎么配、请求怎么封装、真机怎么验证、报错怎么排。

先说清楚这篇适合谁。如果你已经会用 Cocos Creator 建项目，TypeScript 能看懂，但对“怎么在小游戏里安全地调 AI 接口”没头绪，那这篇就是给你写的。核心检索词就三个：微信小游戏 AI 开发、Cocos Creator TypeScript 接入、TaoToken 统一 Key。这三个词贯穿全文，你照着做就能跑通。

整个链路分四段：工程搭建、TaoToken 前置准备、请求封装与配置、真机验证与排障。每段都有可复制的代码和配置，不玩虚的。我试过把 AI 对话直接塞进小游戏主包，结果首包体积直接爆了，后来改成请求封装 + 按需加载才稳住。这个坑后面会细说。

先明确一个原则：小游戏里调 AI，绝对不要把 Key 写死在客户端。微信小游戏的代码包是可以被反编译的，Key 暴露就是分分钟的事。正确做法是走统一网关，客户端只拿一个临时凭证或者干脆只调自己的云函数，由云函数去转发。TaoToken 在这里的角色就是统一 API 通道，帮你把模型调用、Key 管理、额度控制收口到一处，客户端侧只关心请求格式。

工程侧的技术选型我建议 Cocos Creator 3.8+，TypeScript 严格模式打开。构建平台选 WeChat Game，这样 Creator 会自动生成微信开发者工具能识别的工程结构。如果你用 LayaAir 或者 Unity 也行，但 Cocos 对微信小游戏的适配确实最省心，官方文档和社区案例都多。Unity 打包体积大，小游戏首包限制 4MB 主包 + 20MB 总包，优化起来很痛苦，除非你做 3D 重度游戏，否则没必要。

环境搭建的具体步骤：先装微信开发者工具稳定版，再装 Cocos Creator 3.8.x。Creator 里新建项目选 Empty 模板，语言选 TypeScript。建完后在项目设置里把构建平台切到 WeChat Game，填上你的小游戏 AppID。这一步如果 AppID 没填对，后面真机预览会直接报“invalid appid”。AppID 在微信公众平台的小游戏后台拿，个人开发者也能注册，资质这块按平台指引走就行。

工程结构上，我习惯在 assets 下建几个固定目录：scripts 放 TypeScript 逻辑，prefabs 放预制体，resources 放动态加载资源，config 放环境配置。AI 相关的请求封装统一放 scripts/ai/ 下面，方便后续替换或扩展。这个结构不是强制的，但后面你要加关卡生成、NPC 对话、成就文案这些 AI 能力时，目录清晰能省很多事。

首包体积控制从第一天就要注意。AI 请求封装本身代码量很小，但如果你把模型返回的长文本、生成的关卡数据全塞进包内，体积会失控。正确做法是：静态资源走 CDN 或者远程加载，AI 生成的内容运行时拉取，不落包。微信小游戏支持远程资源加载，但域名要在后台配白名单。TaoToken 的 API 域名记得加进 request 合法域名，否则真机上请求直接被拦。

还有一个容易忽略的点：微信小游戏的网络请求默认走 wx.request，但 Cocos Creator 里如果你直接用 fetch 或者 XMLHttpRequest，在真机上可能行为不一致。稳妥做法是封装一层适配，判断运行环境，小游戏环境走 wx.request，编辑器环境走标准 fetch。这样你在 Creator 里预览和真机调试都能跑，不用改两套代码。

2. TaoToken 统一 Key 前置准备：API 通道与模型选型

在写请求封装之前，先把 TaoToken 这边的准备工作做完。核心就三件事：拿 Key、选模型、确认 Base URL。这三样东西后面配置里会反复用到，先备好。

拿 Key 的入口在控制台。访问 https://taotoken.net/api-keys 登录后创建 API Key，复制出来存好。注意这个 Key 只在创建时完整显示一次，关掉页面就看不到了，所以一定要先存到安全的地方。如果你团队多人协作，建议每人一个 Key，方便按人排查用量和问题，别共用一把。

模型选型这块，微信小游戏里常见的 AI 能力分两类：一类是文本生成，比如 NPC 对话、关卡描述、成就名称；另一类是结构化生成，比如按 JSON 格式输出关卡配置。文本生成用通用对话模型就行，结构化生成要注意让模型输出严格 JSON，否则解析会炸。TaoToken 的模型对话入口在 https://taotoken.net/models ，你可以先在网页上试几轮，确认模型输出风格符合预期再写进代码。

Base URL 统一用 https://taotoken.net/api ，不要加任何多余路径。请求格式兼容 OpenAI 风格的 /v1/chat/completions，所以如果你之前用过 OpenAI SDK，迁移成本很低。注意小游戏环境没有 Node.js 的 https 模块，不能用官方 SDK，得自己封装请求。这也是为什么前面说要适配 wx.request。

关于 Key 的安全存放，再强调一次：不要写进客户端代码。正确链路是客户端 → 你的云函数/后端 → TaoToken。云函数里存 Key，客户端只传业务参数。如果你暂时没有后端，可以用微信云开发写一个简单云函数做转发，代码量不大。下面给一个云函数转发的核心逻辑示意，TypeScript 写：

// cloudfunctions/aiProxy/index.ts import cloud from 'wx-server-sdk' cloud.init() const TAOTOKEN_API = 'https://taotoken.net/api/v1/chat/completions' const TAOTOKEN_KEY = process.env.TAOTOKEN_KEY // 在云函数环境变量里配 export async function main(event: any) { const { messages, model = 'gpt-4o-mini' } = event const res = await cloud.callFunction({ // 实际请求用 Node 的 https 或 axios，这里示意 }) return res }

云函数环境变量里配 TAOTOKEN_KEY，这样 Key 不会出现在代码仓库里。微信云开发的环境变量在控制台配置，改完要重新部署才生效。这个坑我踩过，改完变量没重新部署，请求一直 401，排查了半天。

模型 ID 这块，TaoToken 支持的模型列表在文档里能查到。小游戏场景我建议先用轻量模型跑通链路，确认没问题再换更强的模型。轻量模型响应快、成本低，适合高频调用的 NPC 对话。关卡生成这种低频但要求高的场景，再用强模型。模型 ID 要写准确，写错了会报 model not found。

额度管理也要提前想。小游戏上线后如果 AI 调用量大，额度消耗会很快。TaoToken 控制台可以看用量，建议设个告警阈值。另外客户端侧要做限流，比如同一个用户短时间内不能疯狂点 NPC 对话，否则既烧额度又影响体验。限流逻辑可以放在云函数里，按 openid 做频率控制。

最后确认一下网络环境。微信小游戏请求外部域名必须在后台配 request 合法域名，TaoToken 的域名要加进去。开发阶段可以在开发者工具里勾选“不校验合法域名”，但上线前必须配好，否则真机上请求全挂。这个配置在微信公众平台 → 开发 → 开发设置 → 服务器域名里改。

3. 可复制配置：请求封装与 settings 片段

这一节是核心，直接给可复制的代码和配置。先给 Cocos Creator 项目里的环境配置文件，再给请求封装，最后给云函数的完整转发逻辑。

先建一个 config 文件，放环境相关配置。路径建议 assets/scripts/config/env.ts：

// assets/scripts/config/env.ts export const ENV = { // 云函数转发地址，客户端不直接调 TaoToken aiProxyUrl: 'https://your-cloud-func-url/aiProxy', // 模型 ID，按需替换 defaultModel: 'gpt-4o-mini', // 请求超时（毫秒） timeout: 15000, // 是否开启调试日志 debug: true, }

注意这里 aiProxyUrl 指向你的云函数，不是 TaoToken 的地址。客户端永远不直接碰 TaoToken 的 Key。如果你用微信云开发，云函数调用可以用 cloud.callFunction，那 aiProxyUrl 就不需要了，直接调云函数名。两种方式都行，看你的后端架构。

接下来是请求封装。路径 assets/scripts/ai/aiClient.ts：

// assets/scripts/ai/aiClient.ts import { ENV } from '../config/env' export interface ChatMessage { role: 'system' | 'user' | 'assistant' content: string } export interface ChatOptions { model?: string temperature?: number maxTokens?: number } export class AIClient { private static instance: AIClient static getInstance(): AIClient { if (!AIClient.instance) { AIClient.instance = new AIClient() } return AIClient.instance } async chat(messages: ChatMessage[], options: ChatOptions = {}): Promise<string> { const payload = { model: options.model || ENV.defaultModel, messages, temperature: options.temperature ?? 0.7, max_tokens: options.maxTokens ?? 512, } try { const res = await this.request(payload) return res } catch (err) { if (ENV.debug) { console.error('[AIClient] chat failed:', err) } throw err } } private request(payload: any): Promise<string> { return new Promise((resolve, reject) => { // 小游戏环境走 wx.request if (typeof wx !== 'undefined' && wx.request) { wx.request({ url: ENV.aiProxyUrl, method: 'POST', data: payload, timeout: ENV.timeout, header: { 'content-type': 'application/json' }, success: (res: any) => { if (res.statusCode === 200 && res.data?.content) { resolve(res.data.content) } else { reject(new Error(`bad response: ${res.statusCode}`)) } }, fail: (err: any) => reject(err), }) } else { // 编辑器环境走 fetch fetch(ENV.aiProxyUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload), }) .then((r) => r.json()) .then((data) => resolve(data.content)) .catch(reject) } }) } }

这个封装做了两件事：环境适配和统一错误处理。小游戏真机走 wx.request，Creator 编辑器预览走 fetch，一套代码两边跑。注意 wx.request 的 success 回调里 statusCode 判断，非 200 都要 reject，否则后面解析会出奇怪的问题。

然后是云函数的完整转发逻辑。路径 cloudfunctions/aiProxy/index.js：

// cloudfunctions/aiProxy/index.js const cloud = require('wx-server-sdk') const axios = require('axios') cloud.init() const TAOTOKEN_API = 'https://taotoken.net/api/v1/chat/completions' const TAOTOKEN_KEY = process.env.TAOTOKEN_KEY exports.main = async (event) => { const { model, messages, temperature, max_tokens } = event if (!messages || !Array.isArray(messages)) { return { error: 'invalid messages' } } try { const resp = await axios.post( TAOTOKEN_API, { model, messages, temperature, max_tokens }, { headers: { Authorization: `Bearer ${TAOTOKEN_KEY}`, 'Content-Type': 'application/json', }, timeout: 20000, } ) const content = resp.data?.choices?.[0]?.message?.content if (!content) { return { error: 'empty choices' } } return { content } } catch (err) { console.error('[aiProxy] error:', err.response?.data || err.message) return { error: err.message } } }

云函数依赖 axios，记得在 cloudfunctions/aiProxy 目录下 npm install axios，然后上传部署。环境变量 TAOTOKEN_KEY 在云开发控制台配，配完重新部署。这个流程走通后，客户端只调云函数，Key 完全不暴露。

如果你不用微信云开发，用自己的服务器也行，逻辑一样：收客户端请求 → 加 Key 转发到 TaoToken → 返回结果。服务器侧记得做鉴权和限流，别裸奔。

配置片段给完了，说下 settings 相关的注意点。Cocos Creator 构建微信小游戏时，会在 build/wechatgame 下生成 project.config.json。这个文件里的 appid 要和你小游戏后台一致。另外 game.json 里可以配 networkTimeout，建议设成 15000 以上，AI 请求有时候会慢。这些配置改完要重新构建才生效。

4. 验证请求与真机成功结果

配置写完了，接下来验证链路。分三步：编辑器预览验证、开发者工具验证、真机验证。每步都有明确的成功标志，照着看就行。

第一步，Creator 编辑器预览。在场景里挂一个测试脚本，调用 AIClient.chat 发一条消息。测试脚本可以这样写：

// assets/scripts/test/AITest.ts import { _decorator, Component } from 'cc' import { AIClient } from '../ai/aiClient' const { ccclass } = _decorator @ccclass('AITest') export class AITest extends Component { async start() { const client = AIClient.getInstance() try { const reply = await client.chat([ { role: 'system', content: '你是一个游戏 NPC，用一句话回复玩家。' }, { role: 'user', content: '你好，有什么任务可以接？' }, ]) console.log('[AITest] reply:', reply) } catch (err) { console.error('[AITest] failed:', err) } } }

把这个脚本挂到场景节点上，运行预览。如果控制台打出 NPC 回复，说明编辑器环境链路通了。注意编辑器环境走的是 fetch，如果你的云函数地址是 https 且证书正常，应该没问题。如果报 CORS，那是浏览器安全策略，真机上不会有这个问题，但编辑器预览会拦。解决办法是在云函数侧加 CORS 头，或者编辑器预览时用开发者工具的“不校验”模式。

第二步，微信开发者工具验证。在 Creator 里构建 WeChat Game，用微信开发者工具打开 build/wechatgame 目录。在开发者工具里点“编译”，看控制台有没有报错。然后在模拟器里触发 AI 请求，看 Network 面板的请求记录。成功标志：请求状态 200，返回体里有 content 字段。如果状态 401，说明云函数里 Key 没配好或者没重新部署。如果状态 403，检查 request 合法域名有没有配。

开发者工具里有个细节：默认会校验合法域名，开发阶段可以在“详情 → 本地设置”里勾选“不校验合法域名”。但上线前必须把 TaoToken 域名加到后台白名单，否则真机必挂。这个别偷懒。

第三步，真机验证。点开发者工具的“预览”，用手机微信扫码。真机上打开小游戏，触发 AI 请求。成功标志：手机上能看到 NPC 回复内容，且没有卡顿或超时。真机验证是最关键的一步，因为小游戏的网络环境和编辑器差异很大。常见问题：真机上请求超时，多半是域名没配或者网络抖动；真机上返回乱码，检查编码格式；真机上直接闪退，看是不是内存爆了。

真机验证通过后，建议再跑一轮压力测试。连续触发 10 次 AI 请求，看响应时间和成功率。如果失败率超过 10%，要么是云函数并发不够，要么是 TaoToken 侧限流。云函数可以在控制台调并发数，TaoToken 侧看控制台用量和限流策略。小游戏上线后用户量上来，这块要提前压测。

成功结果长什么样？控制台输出类似：

[AITest] reply: 你好冒险者，村口的铁匠需要帮忙，去看看吧。

真机上就是游戏里 NPC 对话框弹出这句话。到这一步，首个 AI 驱动的小游戏 Demo 就算跑通了。后面你要加关卡生成，就把 prompt 改成让模型输出 JSON 关卡配置，解析后动态生成节点。要加成就系统，就让模型批量生成成就名称和描述。链路是通的，剩下的就是业务逻辑。

5. 常见报错排查：401、local proxy failed、reading choices、OAuth

这一节把实际会撞到的报错列出来，对照着排。每个报错给原因和解决路径，不绕弯。

401 Unauthorized。这个最常见，原因就三类：Key 没配、Key 配错、Key 失效。先检查云函数环境变量 TAOTOKEN_KEY 有没有值，再看值有没有多余空格。然后确认云函数重新部署了，环境变量改完不部署不生效。最后去 TaoToken 控制台确认 Key 状态正常、额度没耗尽。如果都正常还 401，检查请求头 Authorization 格式，必须是Bearer <key>，中间一个空格，别多别少。

local proxy failed。这个报错通常出现在开发者工具或真机上，意思是本地代理请求失败。原因可能是网络环境问题，或者请求地址写错了。先确认 aiProxyUrl 是完整的 https 地址，没有拼错。然后确认云函数已部署且能正常调用。如果云函数本身报错，开发者工具的云开发控制台能看到日志。还有一种情况是开发者工具开了代理设置，关掉再试。注意：这里说的代理是开发者工具自带的网络设置，不是让你去搞什么网络工具，别理解偏了。

reading choices 相关报错，典型的是Cannot read property 'choices' of undefined或者reading '0'。这个说明返回体结构不对，模型没按预期返回。原因可能是：模型 ID 写错，TaoToken 返回了错误信息而不是正常响应；或者请求参数格式不对，比如 messages 不是数组。排查方法：在云函数里把完整响应打出来，看实际返回结构。如果是模型 ID 错，换成文档里确认支持的 ID。如果是参数错，对照 OpenAI 格式检查 messages 结构。

OAuth 相关报错，比如OAuth token invalid或者authentication failed。这个一般出现在你用了一些需要 OAuth 的模型或者服务时。TaoToken 的 API Key 走的是 Bearer 认证，不是 OAuth，所以如果你看到 OAuth 报错，先确认是不是请求发到了错误的地址。Base URL 必须是 https://taotoken.net/api ，路径是 /v1/chat/completions。如果地址对了还报 OAuth，检查是不是 Key 类型用错了，API Key 和 OAuth token 是两回事。

除了这四个，还有几个高频问题。超时：把 timeout 调到 20000 以上，云函数侧也调。返回空 content：检查 max_tokens 是不是设太小，或者模型被截断了。真机请求被拦：检查 request 合法域名，TaoToken 域名必须加。云函数冷启动慢：第一次调用会慢，后面就快了，可以在云函数配置里设最小实例数。

排查通用思路：先看客户端日志，再看云函数日志，最后看 TaoToken 控制台用量。三层日志对照，基本能定位到问题在哪一层。客户端日志在开发者工具 Console 看，云函数日志在云开发控制台看，TaoToken 用量在控制台看。别一上来就改代码，先看日志。

还有一个坑：Cocos Creator 构建后，代码是压缩过的，报错行号对不上。调试阶段建议在构建设置里关掉代码压缩，或者保留 sourcemap。这样报错能定位到源码行。上线前再开压缩。

6. 从 Demo 到上线：AI 能力的工程化收口

Demo 跑通只是开始，要上线还得做工程化收口。这块决定了你的小游戏能不能扛住真实用户量。

第一件事是请求缓存。NPC 对话这种场景，很多问题是重复的，比如“你好”“有什么任务”。同样的输入没必要每次都调模型，客户端或云函数侧加一层缓存，命中直接返回。缓存 key 用 messages 的 hash，value 存回复。缓存有效期设短一点，比如 5 分钟，避免内容过时。这一层能省不少额度。

第二件事是降级策略。AI 接口不可能 100% 可用，网络抖动、模型限流都会导致失败。失败时不能让游戏卡死，要有兜底。比如 NPC 对话失败时，返回一句预设的通用回复；关卡生成失败时，用本地预设关卡顶上。降级逻辑要提前写好，别等线上出问题才补。

第三件事是内容安全。AI 生成的内容不可控，NPC 对话可能生成不合适的内容。上线前必须加一层内容过滤，可以用微信自带的内容安全接口，也可以自己维护敏感词库。过滤不通过的直接走降级回复。这块别省，小游戏审核对内容安全查得严。

第四件事是监控告警。云函数调用成功率、平均响应时间、TaoToken 额度消耗，这些指标要能看到。微信云开发控制台有基础监控，TaoToken 控制台有用量统计。建议设个告警，比如成功率低于 95% 或者额度消耗超过阈值时通知。这样出问题能第一时间发现。

第五件事是成本控制。AI 调用是花钱的，小游戏如果用户量大，成本会上去。控制手段：缓存、限流、模型分级。高频低价值场景用轻量模型，低频高价值场景用强模型。另外可以设每日额度上限，超了自动降级。TaoToken 控制台可以看用量明细，按模型、按天拆，方便你优化。

工程化收口做完，你的小游戏就从 Demo 变成能上线的产品了。整个链路的核心就一句话：客户端不碰 Key，统一走网关，AI 能力按需调用，失败有兜底。这套架构不只适用于微信小游戏，其他客户端场景也能复用。

最后给一个实用技巧：把 AI 请求封装成 Promise 队列，控制并发数。小游戏里同时发太多请求会卡，队列能平滑流量。并发数设 3 到 5 就行，别贪多。这个队列逻辑加在 AIClient 里，几十行代码的事，但体验提升明显。

到这里，从 Cocos Creator 工程搭建到真机跑通 AI 能力的完整链路就交付完了。你照着配置和代码走一遍，应该能跑通首个 Demo。后面加什么 AI 能力，都是在这个基础上扩展。