最近在尝试将大模型能力集成到微信小程序中发现从环境搭建到接口调试再到前端交互每一步都可能遇到意想不到的坑。特别是如何高效地调用像 GPT-5.6 这样的模型并确保在小程序端有流畅的用户体验是很多开发者关心的问题。本文将围绕 Codex 平台与 GPT-5.6 模型结合一个完整的微信小程序开发实例手把手带你走通从零到一的全过程。无论你是想为小程序增加智能对话功能还是探索 AI 在移动端的应用这篇文章都能提供一套可直接复用的闭环方案。1. 背景与核心概念为什么选择 Codex 与 GPT-5.6在开始实战之前我们需要先理清几个关键概念明白我们为什么要选择这样的技术组合。1.1 GPT-5.6 是什么GPT-5.6 是 OpenAI 推出的 GPT 系列大型语言模型的一个版本注本文以 GPT-5.6 作为示例模型实际开发中请根据可用模型调整。它拥有强大的自然语言理解和生成能力能够完成对话、内容创作、代码生成、逻辑推理等多种任务。对于微信小程序而言接入这样的模型可以瞬间提升应用的“智能”水平例如实现智能客服、内容摘要、个性化推荐、创意辅助等高级功能。1.2 Codex 平台的角色Codex 在这里指的是一个提供大模型 API 服务的平台或中间件。它可能扮演以下几种角色模型托管与接口封装提供统一的 API 来调用 GPT-5.6 等模型简化了开发者直接与复杂模型基础设施交互的难度。流量管理与计费帮助开发者管理 API 调用次数、费用和配额。安全性增强作为中间层可以对请求和响应进行过滤、审核增加一层安全屏障这对于直接面向用户的小程序尤为重要。缓解网络问题某些平台可能提供优化后的网络链路改善国内访问国外模型服务的稳定性和速度。简单来说Codex 是我们小程序与 GPT-5.6大模型之间的“桥梁”和“调度中心”。本文的实战将基于“小程序 - Codex平台 - 大模型”这个架构进行。1.3 微信小程序的特殊考量微信小程序运行在微信客户端内其网络请求、安全策略、包大小限制都与 Web 应用不同域名白名单所有网络请求的域名必须在小程序管理后台配置合法域名。HTTPS 强制请求必须是 HTTPS 协议。无 Cookie会话管理通常依赖微信的登录凭证或自定义 Token。性能与体验需要关注请求响应时间避免长时间等待做好加载状态管理。因此我们的实战不仅要关注如何调用 API更要关注如何在小程序的约束下优雅、安全、高效地完成集成。2. 环境准备与项目初始化工欲善其事必先利其器。在开始编码前我们需要准备好开发环境并创建小程序项目。2.1 开发环境准备操作系统Windows 10/11, macOS 或 Linux 均可。微信开发者工具前往微信公众平台下载并安装最新稳定版。这是小程序开发的官方 IDE提供模拟器、调试、真机预览等功能。Node.js建议安装 LTS 版本如 v18.x用于后续可能需要的本地调试或脚本运行。Codex 平台账号你需要拥有一个可用的 Codex 平台或类似的大模型 API 服务平台账号并获取其 API 密钥API Key和接口地址Endpoint。本文将以一个假设的 Codex 平台为例其 API 基础地址为https://api.codexplatform.com/v1。2.2 创建微信小程序项目打开微信开发者工具。点击“”号新建项目。填写项目信息项目名称例如CodexGPTDemo。目录选择本地存放代码的文件夹。AppID如果你有已注册的小程序填写其 AppID如果只是学习可以选择“测试号”或使用提供的测试 ID。开发模式选择“小程序”。后端服务选择“不使用云服务”本文聚焦前端集成后端逻辑由 Codex API 处理。点击“新建”工具会自动生成一个包含基础文件的小程序项目。2.3 项目结构概览生成的项目主要包含以下文件了解它们对后续开发很重要CodexGPTDemo/ ├── pages/ // 页面文件目录 │ ├── index/ // 首页 │ │ ├── index.js // 页面逻辑 │ │ ├── index.json // 页面配置 │ │ ├── index.wxml // 页面结构类似HTML │ │ └── index.wxss // 页面样式类似CSS │ └── logs/ // 日志页示例页面可忽略或删除 ├── utils/ // 工具类文件目录 ├── app.js // 小程序逻辑入口 ├── app.json // 小程序全局配置页面路径、窗口样式等 ├── app.wxss // 小程序全局样式 └── project.config.json // 项目配置文件2.4 配置服务器域名这是关键一步小程序无法向未配置的域名发起请求。登录 微信公众平台 进入你的小程序管理后台。侧边栏找到开发 - 开发管理 - 开发设置。找到服务器域名配置项。在request合法域名列表中添加你的 Codex 平台 API 地址例如https://api.codexplatform.com。注意不能带路径如/v1只能配置到域名和端口。如果 Codex 平台提供的是 IP 地址可能需要额外的配置或使用企业主体小程序。3. 核心代码实现构建智能对话页面接下来我们将改造默认的首页实现一个简单的与 GPT-5.6 对话的界面。3.1 页面结构 (index.wxml)我们将构建一个包含对话列表、输入框和发送按钮的界面。!-- pages/index/index.wxml -- view classcontainer !-- 对话历史区域 -- scroll-view classchat-list scroll-y scroll-into-view{{toView}} scroll-with-animation block wx:for{{messages}} wx:keyindex view classmessage-item {{item.role}} view classavatar{{item.role user ? 我 : AI}}/view view classbubble{{item.content}}/view /view /block /scroll-view !-- 输入区域 -- view classinput-area textarea classinput-box value{{inputValue}} placeholder请输入您的问题... bindinputonInput bindconfirmsendMessage auto-height maxlength500 cursor-spacing20 / button classsend-btn bindtapsendMessage disabled{{isLoading}} {{isLoading ? 思考中... : 发送}} /button /view !-- 加载提示 -- view wx:if{{isLoading}} classloadingAI正在思考请稍候.../view /view3.2 页面样式 (index.wxss)为上述结构添加基本的样式使其看起来像一个聊天应用。/* pages/index/index.wxss */ .container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .chat-list { flex: 1; padding: 20rpx; box-sizing: border-box; } .message-item { display: flex; margin-bottom: 30rpx; align-items: flex-start; } .message-item.user { flex-direction: row-reverse; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #07c160; color: white; display: flex; align-items: center; justify-content: center; font-size: 28rpx; flex-shrink: 0; margin: 0 20rpx; } .message-item.user .avatar { background-color: #1989fa; } .bubble { max-width: 500rpx; padding: 20rpx; border-radius: 10rpx; background-color: white; font-size: 32rpx; line-height: 1.5; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); word-break: break-word; } .message-item.user .bubble { background-color: #95ec69; } .input-area { display: flex; padding: 20rpx; background-color: white; border-top: 1rpx solid #eee; align-items: flex-end; } .input-box { flex: 1; min-height: 80rpx; max-height: 200rpx; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 10rpx; font-size: 32rpx; background-color: #fafafa; margin-right: 20rpx; } .send-btn { width: 140rpx; height: 80rpx; line-height: 80rpx; border-radius: 10rpx; background-color: #07c160; color: white; font-size: 32rpx; padding: 0; } .send-btn[disabled] { background-color: #ccc; } .loading { text-align: center; padding: 20rpx; color: #999; font-size: 28rpx; }3.3 页面逻辑 (index.js)这是核心部分负责管理对话数据、处理用户输入以及调用 Codex API。// pages/index/index.js // 引入工具函数我们稍后会创建它 const { callCodexAPI } require(../../utils/api.js); Page({ /** * 页面的初始数据 */ data: { messages: [], // 对话消息列表格式: [{role: user|assistant, content: ...}] inputValue: , // 输入框内容 isLoading: false, // 是否正在加载等待AI回复 toView: , // 用于滚动到底部的视图ID }, /** * 监听输入框内容变化 */ onInput(e) { this.setData({ inputValue: e.detail.value }); }, /** * 发送消息 */ async sendMessage() { const inputText this.data.inputValue.trim(); if (!inputText || this.data.isLoading) { return; } // 1. 清空输入框将用户消息加入列表 this.setData({ inputValue: , isLoading: true }); const userMessage { role: user, content: inputText }; this.data.messages.push(userMessage); this.setData({ messages: this.data.messages }); this.scrollToBottom(); try { // 2. 调用工具函数向Codex平台发送请求 const aiResponse await callCodexAPI(this.data.messages); // 3. 将AI回复加入列表 const aiMessage { role: assistant, content: aiResponse }; this.data.messages.push(aiMessage); this.setData({ messages: this.data.messages, isLoading: false }); this.scrollToBottom(); } catch (error) { // 4. 错误处理 console.error(API调用失败:, error); const errorMessage { role: assistant, content: 抱歉我遇到了点问题${error.message}。请稍后再试。 }; this.data.messages.push(errorMessage); this.setData({ messages: this.data.messages, isLoading: false }); this.scrollToBottom(); wx.showToast({ title: 请求失败, icon: none }); } }, /** * 滚动到底部确保最新消息可见 */ scrollToBottom() { // 利用scroll-view的scroll-into-view属性 const lastIndex this.data.messages.length - 1; if (lastIndex 0) { // 给最后一条消息的容器设置一个id这里简单用索引 // 注意实际项目中可能需要更稳定的id this.setData({ toView: msg${lastIndex} }); } }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 可以初始化一些欢迎语 const welcomeMsg { role: assistant, content: 你好我是基于GPT-5.6的AI助手有什么可以帮你的吗 }; this.setData({ messages: [welcomeMsg] }); }, })3.4 创建 API 工具函数 (utils/api.js)为了保持页面逻辑清晰我们将网络请求封装成一个独立的工具模块。// utils/api.js // 注意以下配置需要替换为你自己的Codex平台信息 const CODEX_API_BASE https://api.codexplatform.com/v1; // Codex平台API地址 const CODEX_API_KEY your_codex_api_key_here; // 你的Codex API密钥 const MODEL_NAME gpt-5.6; // 或你实际使用的模型名称如 ‘gpt-3.5-turbo’ /** * 调用Codex平台的聊天补全接口 * param {Array} messages - 消息历史格式同OpenAI API * returns {Promisestring} - AI回复的文本内容 */ const callCodexAPI async (messages) { // 构建请求数据遵循类似OpenAI的格式 const requestData { model: MODEL_NAME, messages: messages, // 直接传递整个对话历史让模型有上下文 max_tokens: 500, // 控制回复的最大长度 temperature: 0.7, // 控制回复的随机性 (0.0~1.0) // 可以根据需要添加其他参数如 stream, top_p 等 }; try { const response await wx.request({ url: ${CODEX_API_BASE}/chat/completions, // 假设Codex平台也使用此端点 method: POST, header: { Content-Type: application/json, Authorization: Bearer ${CODEX_API_KEY} // 常见的认证方式 }, data: requestData, timeout: 30000, // 设置超时时间30秒 }); // 处理响应 const res response.data; if (response.statusCode 200 res.choices res.choices[0]) { return res.choices[0].message.content.trim(); } else { // 处理API返回的业务错误 const errorMsg res.error?.message || API返回异常状态码: ${response.statusCode}; throw new Error(errorMsg); } } catch (error) { // 处理网络错误或请求失败 console.error(网络请求错误:, error); // 可以根据error.errCode进行更精细的错误处理如网络断开 throw new Error(网络请求失败: ${error.errMsg || error.message}); } }; // 导出函数 module.exports { callCodexAPI };重要提醒请务必将CODEX_API_BASE和CODEX_API_KEY替换为你从 Codex 平台获取的真实值。切勿将真实的 API Key 提交到公开的代码仓库。在小程序项目中可以考虑将敏感配置放在非版本控制的文件中或通过自己的后端服务器中转请求以隐藏 Key。4. 运行、测试与调试代码编写完成后我们需要在微信开发者工具中运行和测试。4.1 编译与预览在微信开发者工具中确保项目已打开。点击工具栏上的“编译”按钮或使用快捷键 Ctrl/Cmd B。工具会自动编译项目并在模拟器中显示。在左侧模拟器中你应该能看到聊天界面。尝试在输入框中打字并点击“发送”按钮。4.2 真机预览为了获得最真实的体验务必在真机上测试。点击工具栏上的“预览”按钮。使用微信扫描弹出的二维码。在手机上的小程序中测试对话功能。注意手机必须与开发电脑在同一个局域网且小程序后台配置的域名已生效。4.3 调试技巧Console 面板在开发者工具的“调试器”中查看console.log和错误信息。这对于排查callCodexAPI函数中的问题至关重要。Network 面板在“调试器”的“Network”标签页中可以查看小程序发出的所有网络请求。检查请求的 URL、Header、Payload 以及响应内容确保它们符合 Codex API 的要求。Storage 面板如果你的应用需要本地缓存对话历史可以在这里查看和管理本地存储的数据。AppData 面板实时查看和修改页面的data对象方便调试数据绑定问题。5. 常见问题与排查思路在实际集成过程中你可能会遇到以下问题。这里提供一个排查指南。问题现象可能原因排查步骤与解决方案请求失败报错request:fail url not in domain list服务器域名未配置或配置错误。1. 登录小程序后台检查request合法域名是否已添加 Codex API 的根域名如https://api.codexplatform.com。2. 确保没有协议头错误或多余路径。3. 如果是新配置的域名等待几分钟生效或关闭开发者工具重新打开。请求失败报错request:fail ssl hand shake error或证书错误目标服务器的 SSL 证书有问题或微信不信任该证书。1. 确认 Codex 平台提供的 API 地址是有效的 HTTPS。2. 如果是自签名证书或测试环境在小程序开发设置中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”仅限开发阶段。3. 生产环境必须使用受信任的 CA 颁发的证书。API 返回 401/403 错误API 密钥错误、过期或权限不足。1. 检查utils/api.js中的CODEX_API_KEY是否正确。2. 检查请求头中的Authorization格式是否正确通常是Bearer your_key。3. 登录 Codex 平台控制台确认密钥有效且有足够的额度或权限。API 返回 404 错误接口路径错误。1. 检查utils/api.js中的CODEX_API_BASE和请求路径如/chat/completions是否拼接正确。2. 查阅 Codex 平台的官方 API 文档确认正确的端点地址。API 返回 429 错误请求频率超限或额度用完。1. Codex 平台通常有速率限制RPM/TPM。检查控制台的用量统计。2. 在小程序端可以考虑加入请求队列或延迟重试机制。小程序输入框卡顿、滚动不流畅消息列表数据量大渲染性能问题。1. 使用wx:for时确保指定了唯一的wx:key。2. 考虑对长对话历史进行分页或本地存储只渲染最近 N 条消息。3. 检查scroll-view的高度计算是否正确。AI 回复内容被截断或混乱API 参数设置不当或响应解析错误。1. 检查callCodexAPI函数中的max_tokens参数是否足够大。2. 检查响应解析逻辑res.choices[0].message.content是否与 Codex API 的实际返回结构匹配。3. 在 Network 面板中查看原始的 API 响应确认数据结构。真机上无法请求但模拟器可以真机网络环境问题如公司代理、域名配置未对所有用户生效。1. 检查手机网络尝试切换 Wi-Fi 和 4G/5G。2. 小程序后台的域名配置在“提交代码审核并发布”后才对所有用户生效。开发阶段预览和体验版依赖开发者的配置。6. 最佳实践与进阶优化完成基础功能后我们可以从工程化和体验角度进行优化让小程序更健壮、更好用。6.1 安全与密钥管理绝对不要在前端硬编码密钥本文示例为了清晰直接写在api.js中这在生产环境是高危行为。任何用户都可以从小程序包中提取出你的 API Key 并盗用。推荐方案使用云函数或自有后端中转在小程序端请求你自己的服务器接口如https://yourdomain.com/api/chat。在你的服务器上可以使用云开发、自己的后端服务用安全的方式存储 Codex API Key。服务器收到小程序请求后再向 Codex 平台发起请求并将结果返回给小程序。这样既隐藏了密钥又可以在服务器端进行请求过滤、频率限制、日志记录等安全操作。6.2 用户体验优化流式输出 (Streaming)如果 Codex API 支持流式响应类似 OpenAI 的stream: true可以实现打字机效果让回复一个字一个字显示出来体验更佳。这需要处理 SSE (Server-Sent Events) 或 WebSocket。本地历史存储使用wx.setStorageSync将对话历史保存在本地用户下次打开小程序还能看到。注意清理策略避免存储过大。网络状态管理监听网络状态变化wx.onNetworkStatusChange在网络断开时提示用户并禁用发送按钮。请求超时与重试为wx.request设置合理的timeout并实现简单的重试逻辑例如最多重试2次提升弱网下的可用性。6.3 性能优化图片与资源优化如果对话涉及图片使用 CDN 并确保图片尺寸合适。列表渲染优化对于超长对话列表考虑使用“虚拟列表”技术只渲染可视区域内的消息项。可以使用小程序官方或社区的虚拟列表组件。防抖与节流对频繁触发的事件如输入框实时搜索建议进行防抖处理避免不必要的 API 调用。6.4 错误处理与监控友好的错误提示不要将后端 API 的原始错误信息直接暴露给用户。像示例中那样将其转换为用户能理解的语言如“网络开小差了请检查网络”。异常上报将客户端捕获的 JS 错误和 API 错误上报到自己的监控平台如使用 Sentry 的小程序 SDK 或微信的实时日志便于排查线上问题。请求日志在服务器中转层记录请求和响应日志注意脱敏用于分析使用情况和排查问题。通过以上步骤你已经成功将一个强大的 GPT-5.6 模型通过 Codex 平台集成到了微信小程序中并构建了一个可交互的智能对话应用。这个实例涵盖了从环境搭建、前端界面开发、网络请求封装到调试优化的完整流程。关键在于理解小程序的安全限制并妥善管理 API 密钥。下一步你可以尝试在此基础上增加更多功能如多轮对话上下文管理、支持语音输入输出、集成特定的知识库RAG以实现更专业的问答或者探索其他大模型的能力。 微信小程序集成GPT-5.6：从Codex平台接入到完整对话实现
最近在尝试将大模型能力集成到微信小程序中发现从环境搭建到接口调试再到前端交互每一步都可能遇到意想不到的坑。特别是如何高效地调用像 GPT-5.6 这样的模型并确保在小程序端有流畅的用户体验是很多开发者关心的问题。本文将围绕 Codex 平台与 GPT-5.6 模型结合一个完整的微信小程序开发实例手把手带你走通从零到一的全过程。无论你是想为小程序增加智能对话功能还是探索 AI 在移动端的应用这篇文章都能提供一套可直接复用的闭环方案。1. 背景与核心概念为什么选择 Codex 与 GPT-5.6在开始实战之前我们需要先理清几个关键概念明白我们为什么要选择这样的技术组合。1.1 GPT-5.6 是什么GPT-5.6 是 OpenAI 推出的 GPT 系列大型语言模型的一个版本注本文以 GPT-5.6 作为示例模型实际开发中请根据可用模型调整。它拥有强大的自然语言理解和生成能力能够完成对话、内容创作、代码生成、逻辑推理等多种任务。对于微信小程序而言接入这样的模型可以瞬间提升应用的“智能”水平例如实现智能客服、内容摘要、个性化推荐、创意辅助等高级功能。1.2 Codex 平台的角色Codex 在这里指的是一个提供大模型 API 服务的平台或中间件。它可能扮演以下几种角色模型托管与接口封装提供统一的 API 来调用 GPT-5.6 等模型简化了开发者直接与复杂模型基础设施交互的难度。流量管理与计费帮助开发者管理 API 调用次数、费用和配额。安全性增强作为中间层可以对请求和响应进行过滤、审核增加一层安全屏障这对于直接面向用户的小程序尤为重要。缓解网络问题某些平台可能提供优化后的网络链路改善国内访问国外模型服务的稳定性和速度。简单来说Codex 是我们小程序与 GPT-5.6大模型之间的“桥梁”和“调度中心”。本文的实战将基于“小程序 - Codex平台 - 大模型”这个架构进行。1.3 微信小程序的特殊考量微信小程序运行在微信客户端内其网络请求、安全策略、包大小限制都与 Web 应用不同域名白名单所有网络请求的域名必须在小程序管理后台配置合法域名。HTTPS 强制请求必须是 HTTPS 协议。无 Cookie会话管理通常依赖微信的登录凭证或自定义 Token。性能与体验需要关注请求响应时间避免长时间等待做好加载状态管理。因此我们的实战不仅要关注如何调用 API更要关注如何在小程序的约束下优雅、安全、高效地完成集成。2. 环境准备与项目初始化工欲善其事必先利其器。在开始编码前我们需要准备好开发环境并创建小程序项目。2.1 开发环境准备操作系统Windows 10/11, macOS 或 Linux 均可。微信开发者工具前往微信公众平台下载并安装最新稳定版。这是小程序开发的官方 IDE提供模拟器、调试、真机预览等功能。Node.js建议安装 LTS 版本如 v18.x用于后续可能需要的本地调试或脚本运行。Codex 平台账号你需要拥有一个可用的 Codex 平台或类似的大模型 API 服务平台账号并获取其 API 密钥API Key和接口地址Endpoint。本文将以一个假设的 Codex 平台为例其 API 基础地址为https://api.codexplatform.com/v1。2.2 创建微信小程序项目打开微信开发者工具。点击“”号新建项目。填写项目信息项目名称例如CodexGPTDemo。目录选择本地存放代码的文件夹。AppID如果你有已注册的小程序填写其 AppID如果只是学习可以选择“测试号”或使用提供的测试 ID。开发模式选择“小程序”。后端服务选择“不使用云服务”本文聚焦前端集成后端逻辑由 Codex API 处理。点击“新建”工具会自动生成一个包含基础文件的小程序项目。2.3 项目结构概览生成的项目主要包含以下文件了解它们对后续开发很重要CodexGPTDemo/ ├── pages/ // 页面文件目录 │ ├── index/ // 首页 │ │ ├── index.js // 页面逻辑 │ │ ├── index.json // 页面配置 │ │ ├── index.wxml // 页面结构类似HTML │ │ └── index.wxss // 页面样式类似CSS │ └── logs/ // 日志页示例页面可忽略或删除 ├── utils/ // 工具类文件目录 ├── app.js // 小程序逻辑入口 ├── app.json // 小程序全局配置页面路径、窗口样式等 ├── app.wxss // 小程序全局样式 └── project.config.json // 项目配置文件2.4 配置服务器域名这是关键一步小程序无法向未配置的域名发起请求。登录 微信公众平台 进入你的小程序管理后台。侧边栏找到开发 - 开发管理 - 开发设置。找到服务器域名配置项。在request合法域名列表中添加你的 Codex 平台 API 地址例如https://api.codexplatform.com。注意不能带路径如/v1只能配置到域名和端口。如果 Codex 平台提供的是 IP 地址可能需要额外的配置或使用企业主体小程序。3. 核心代码实现构建智能对话页面接下来我们将改造默认的首页实现一个简单的与 GPT-5.6 对话的界面。3.1 页面结构 (index.wxml)我们将构建一个包含对话列表、输入框和发送按钮的界面。!-- pages/index/index.wxml -- view classcontainer !-- 对话历史区域 -- scroll-view classchat-list scroll-y scroll-into-view{{toView}} scroll-with-animation block wx:for{{messages}} wx:keyindex view classmessage-item {{item.role}} view classavatar{{item.role user ? 我 : AI}}/view view classbubble{{item.content}}/view /view /block /scroll-view !-- 输入区域 -- view classinput-area textarea classinput-box value{{inputValue}} placeholder请输入您的问题... bindinputonInput bindconfirmsendMessage auto-height maxlength500 cursor-spacing20 / button classsend-btn bindtapsendMessage disabled{{isLoading}} {{isLoading ? 思考中... : 发送}} /button /view !-- 加载提示 -- view wx:if{{isLoading}} classloadingAI正在思考请稍候.../view /view3.2 页面样式 (index.wxss)为上述结构添加基本的样式使其看起来像一个聊天应用。/* pages/index/index.wxss */ .container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .chat-list { flex: 1; padding: 20rpx; box-sizing: border-box; } .message-item { display: flex; margin-bottom: 30rpx; align-items: flex-start; } .message-item.user { flex-direction: row-reverse; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #07c160; color: white; display: flex; align-items: center; justify-content: center; font-size: 28rpx; flex-shrink: 0; margin: 0 20rpx; } .message-item.user .avatar { background-color: #1989fa; } .bubble { max-width: 500rpx; padding: 20rpx; border-radius: 10rpx; background-color: white; font-size: 32rpx; line-height: 1.5; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); word-break: break-word; } .message-item.user .bubble { background-color: #95ec69; } .input-area { display: flex; padding: 20rpx; background-color: white; border-top: 1rpx solid #eee; align-items: flex-end; } .input-box { flex: 1; min-height: 80rpx; max-height: 200rpx; padding: 20rpx; border: 1rpx solid #ddd; border-radius: 10rpx; font-size: 32rpx; background-color: #fafafa; margin-right: 20rpx; } .send-btn { width: 140rpx; height: 80rpx; line-height: 80rpx; border-radius: 10rpx; background-color: #07c160; color: white; font-size: 32rpx; padding: 0; } .send-btn[disabled] { background-color: #ccc; } .loading { text-align: center; padding: 20rpx; color: #999; font-size: 28rpx; }3.3 页面逻辑 (index.js)这是核心部分负责管理对话数据、处理用户输入以及调用 Codex API。// pages/index/index.js // 引入工具函数我们稍后会创建它 const { callCodexAPI } require(../../utils/api.js); Page({ /** * 页面的初始数据 */ data: { messages: [], // 对话消息列表格式: [{role: user|assistant, content: ...}] inputValue: , // 输入框内容 isLoading: false, // 是否正在加载等待AI回复 toView: , // 用于滚动到底部的视图ID }, /** * 监听输入框内容变化 */ onInput(e) { this.setData({ inputValue: e.detail.value }); }, /** * 发送消息 */ async sendMessage() { const inputText this.data.inputValue.trim(); if (!inputText || this.data.isLoading) { return; } // 1. 清空输入框将用户消息加入列表 this.setData({ inputValue: , isLoading: true }); const userMessage { role: user, content: inputText }; this.data.messages.push(userMessage); this.setData({ messages: this.data.messages }); this.scrollToBottom(); try { // 2. 调用工具函数向Codex平台发送请求 const aiResponse await callCodexAPI(this.data.messages); // 3. 将AI回复加入列表 const aiMessage { role: assistant, content: aiResponse }; this.data.messages.push(aiMessage); this.setData({ messages: this.data.messages, isLoading: false }); this.scrollToBottom(); } catch (error) { // 4. 错误处理 console.error(API调用失败:, error); const errorMessage { role: assistant, content: 抱歉我遇到了点问题${error.message}。请稍后再试。 }; this.data.messages.push(errorMessage); this.setData({ messages: this.data.messages, isLoading: false }); this.scrollToBottom(); wx.showToast({ title: 请求失败, icon: none }); } }, /** * 滚动到底部确保最新消息可见 */ scrollToBottom() { // 利用scroll-view的scroll-into-view属性 const lastIndex this.data.messages.length - 1; if (lastIndex 0) { // 给最后一条消息的容器设置一个id这里简单用索引 // 注意实际项目中可能需要更稳定的id this.setData({ toView: msg${lastIndex} }); } }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 可以初始化一些欢迎语 const welcomeMsg { role: assistant, content: 你好我是基于GPT-5.6的AI助手有什么可以帮你的吗 }; this.setData({ messages: [welcomeMsg] }); }, })3.4 创建 API 工具函数 (utils/api.js)为了保持页面逻辑清晰我们将网络请求封装成一个独立的工具模块。// utils/api.js // 注意以下配置需要替换为你自己的Codex平台信息 const CODEX_API_BASE https://api.codexplatform.com/v1; // Codex平台API地址 const CODEX_API_KEY your_codex_api_key_here; // 你的Codex API密钥 const MODEL_NAME gpt-5.6; // 或你实际使用的模型名称如 ‘gpt-3.5-turbo’ /** * 调用Codex平台的聊天补全接口 * param {Array} messages - 消息历史格式同OpenAI API * returns {Promisestring} - AI回复的文本内容 */ const callCodexAPI async (messages) { // 构建请求数据遵循类似OpenAI的格式 const requestData { model: MODEL_NAME, messages: messages, // 直接传递整个对话历史让模型有上下文 max_tokens: 500, // 控制回复的最大长度 temperature: 0.7, // 控制回复的随机性 (0.0~1.0) // 可以根据需要添加其他参数如 stream, top_p 等 }; try { const response await wx.request({ url: ${CODEX_API_BASE}/chat/completions, // 假设Codex平台也使用此端点 method: POST, header: { Content-Type: application/json, Authorization: Bearer ${CODEX_API_KEY} // 常见的认证方式 }, data: requestData, timeout: 30000, // 设置超时时间30秒 }); // 处理响应 const res response.data; if (response.statusCode 200 res.choices res.choices[0]) { return res.choices[0].message.content.trim(); } else { // 处理API返回的业务错误 const errorMsg res.error?.message || API返回异常状态码: ${response.statusCode}; throw new Error(errorMsg); } } catch (error) { // 处理网络错误或请求失败 console.error(网络请求错误:, error); // 可以根据error.errCode进行更精细的错误处理如网络断开 throw new Error(网络请求失败: ${error.errMsg || error.message}); } }; // 导出函数 module.exports { callCodexAPI };重要提醒请务必将CODEX_API_BASE和CODEX_API_KEY替换为你从 Codex 平台获取的真实值。切勿将真实的 API Key 提交到公开的代码仓库。在小程序项目中可以考虑将敏感配置放在非版本控制的文件中或通过自己的后端服务器中转请求以隐藏 Key。4. 运行、测试与调试代码编写完成后我们需要在微信开发者工具中运行和测试。4.1 编译与预览在微信开发者工具中确保项目已打开。点击工具栏上的“编译”按钮或使用快捷键 Ctrl/Cmd B。工具会自动编译项目并在模拟器中显示。在左侧模拟器中你应该能看到聊天界面。尝试在输入框中打字并点击“发送”按钮。4.2 真机预览为了获得最真实的体验务必在真机上测试。点击工具栏上的“预览”按钮。使用微信扫描弹出的二维码。在手机上的小程序中测试对话功能。注意手机必须与开发电脑在同一个局域网且小程序后台配置的域名已生效。4.3 调试技巧Console 面板在开发者工具的“调试器”中查看console.log和错误信息。这对于排查callCodexAPI函数中的问题至关重要。Network 面板在“调试器”的“Network”标签页中可以查看小程序发出的所有网络请求。检查请求的 URL、Header、Payload 以及响应内容确保它们符合 Codex API 的要求。Storage 面板如果你的应用需要本地缓存对话历史可以在这里查看和管理本地存储的数据。AppData 面板实时查看和修改页面的data对象方便调试数据绑定问题。5. 常见问题与排查思路在实际集成过程中你可能会遇到以下问题。这里提供一个排查指南。问题现象可能原因排查步骤与解决方案请求失败报错request:fail url not in domain list服务器域名未配置或配置错误。1. 登录小程序后台检查request合法域名是否已添加 Codex API 的根域名如https://api.codexplatform.com。2. 确保没有协议头错误或多余路径。3. 如果是新配置的域名等待几分钟生效或关闭开发者工具重新打开。请求失败报错request:fail ssl hand shake error或证书错误目标服务器的 SSL 证书有问题或微信不信任该证书。1. 确认 Codex 平台提供的 API 地址是有效的 HTTPS。2. 如果是自签名证书或测试环境在小程序开发设置中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”仅限开发阶段。3. 生产环境必须使用受信任的 CA 颁发的证书。API 返回 401/403 错误API 密钥错误、过期或权限不足。1. 检查utils/api.js中的CODEX_API_KEY是否正确。2. 检查请求头中的Authorization格式是否正确通常是Bearer your_key。3. 登录 Codex 平台控制台确认密钥有效且有足够的额度或权限。API 返回 404 错误接口路径错误。1. 检查utils/api.js中的CODEX_API_BASE和请求路径如/chat/completions是否拼接正确。2. 查阅 Codex 平台的官方 API 文档确认正确的端点地址。API 返回 429 错误请求频率超限或额度用完。1. Codex 平台通常有速率限制RPM/TPM。检查控制台的用量统计。2. 在小程序端可以考虑加入请求队列或延迟重试机制。小程序输入框卡顿、滚动不流畅消息列表数据量大渲染性能问题。1. 使用wx:for时确保指定了唯一的wx:key。2. 考虑对长对话历史进行分页或本地存储只渲染最近 N 条消息。3. 检查scroll-view的高度计算是否正确。AI 回复内容被截断或混乱API 参数设置不当或响应解析错误。1. 检查callCodexAPI函数中的max_tokens参数是否足够大。2. 检查响应解析逻辑res.choices[0].message.content是否与 Codex API 的实际返回结构匹配。3. 在 Network 面板中查看原始的 API 响应确认数据结构。真机上无法请求但模拟器可以真机网络环境问题如公司代理、域名配置未对所有用户生效。1. 检查手机网络尝试切换 Wi-Fi 和 4G/5G。2. 小程序后台的域名配置在“提交代码审核并发布”后才对所有用户生效。开发阶段预览和体验版依赖开发者的配置。6. 最佳实践与进阶优化完成基础功能后我们可以从工程化和体验角度进行优化让小程序更健壮、更好用。6.1 安全与密钥管理绝对不要在前端硬编码密钥本文示例为了清晰直接写在api.js中这在生产环境是高危行为。任何用户都可以从小程序包中提取出你的 API Key 并盗用。推荐方案使用云函数或自有后端中转在小程序端请求你自己的服务器接口如https://yourdomain.com/api/chat。在你的服务器上可以使用云开发、自己的后端服务用安全的方式存储 Codex API Key。服务器收到小程序请求后再向 Codex 平台发起请求并将结果返回给小程序。这样既隐藏了密钥又可以在服务器端进行请求过滤、频率限制、日志记录等安全操作。6.2 用户体验优化流式输出 (Streaming)如果 Codex API 支持流式响应类似 OpenAI 的stream: true可以实现打字机效果让回复一个字一个字显示出来体验更佳。这需要处理 SSE (Server-Sent Events) 或 WebSocket。本地历史存储使用wx.setStorageSync将对话历史保存在本地用户下次打开小程序还能看到。注意清理策略避免存储过大。网络状态管理监听网络状态变化wx.onNetworkStatusChange在网络断开时提示用户并禁用发送按钮。请求超时与重试为wx.request设置合理的timeout并实现简单的重试逻辑例如最多重试2次提升弱网下的可用性。6.3 性能优化图片与资源优化如果对话涉及图片使用 CDN 并确保图片尺寸合适。列表渲染优化对于超长对话列表考虑使用“虚拟列表”技术只渲染可视区域内的消息项。可以使用小程序官方或社区的虚拟列表组件。防抖与节流对频繁触发的事件如输入框实时搜索建议进行防抖处理避免不必要的 API 调用。6.4 错误处理与监控友好的错误提示不要将后端 API 的原始错误信息直接暴露给用户。像示例中那样将其转换为用户能理解的语言如“网络开小差了请检查网络”。异常上报将客户端捕获的 JS 错误和 API 错误上报到自己的监控平台如使用 Sentry 的小程序 SDK 或微信的实时日志便于排查线上问题。请求日志在服务器中转层记录请求和响应日志注意脱敏用于分析使用情况和排查问题。通过以上步骤你已经成功将一个强大的 GPT-5.6 模型通过 Codex 平台集成到了微信小程序中并构建了一个可交互的智能对话应用。这个实例涵盖了从环境搭建、前端界面开发、网络请求封装到调试优化的完整流程。关键在于理解小程序的安全限制并妥善管理 API 密钥。下一步你可以尝试在此基础上增加更多功能如多轮对话上下文管理、支持语音输入输出、集成特定的知识库RAG以实现更专业的问答或者探索其他大模型的能力。