用Codex开发完整小程序：从零到上线的全流程实战

概述：40分钟全栈开发一个图片工具箱小程序

本文基于B站UP主的实战演示，详细记录了如何利用OpenAI Codex从零开发一个完整的微信小程序——图片编辑工具箱。这个项目涵盖前端、后台、数据库、云函数、支付对接等全栈内容，共包含七大核心功能：图片加水印、九宫格切图、图片拼图、压缩图片、图片转PDF、PDF转图片、图片编辑，以及会员体系和支付功能。

OpenAI Codex 是 OpenAI 推出的一款专为代码生成和软件工程任务设计的 AI 代理系统。与传统的代码补全工具（如 GitHub Copilot 的行内补全）不同，Codex 能够在独立的沙箱环境中自主执行多步骤的开发任务——包括阅读代码库、编写新代码、运行测试、安装依赖，甚至发起网络请求进行真实 API 调试。它基于 GPT-4 系列模型，但针对软件工程场景做了专门优化，支持通过自然语言指令驱动完整的开发流程。开发者可以在 ChatGPT 界面中以对话方式向 Codex 下达任务，Codex 会在云端容器中执行操作并返回结果，包括代码变更的 diff、测试日志等。

整个开发过程展示了一套成熟的AI辅助开发工作流，对于想要利用AI提升开发效率的开发者极具参考价值。

第一步：需求文档与工程管理

从需求文档开始

一个真正的商业项目，在开发之前必须先讨论出初步的需求文档。文档需要包含项目定位、项目结构、核心功能列表、每个功能的按钮和操作流程等。将需求文档发给Codex后，让它阅读并对齐理解。

对齐后，发送提示词让Codex生成项目的agents.md文件，以分阶段（Stage 0/1/2/3）的方式推进项目。agents.md 是一种在 AI 辅助开发中逐渐流行的项目管理文件格式，它本质上是一份写给 AI 代理的"行为指南"。这个文件定义了项目的开发阶段划分、每个阶段的目标和约束条件、代码风格规范、技术栈选择等关键信息。当 AI 代理读取这份文件后，就能理解项目的整体架构和当前进度，避免在开发过程中偏离方向。分阶段推进的方式借鉴了敏捷开发中的迭代思想，每个阶段有明确的交付物和验收标准，确保项目可控推进。Codex会生成完整的阶段文档，明确各阶段该做什么、不该做什么。

工程管理的核心原则

这里有一个非常重要的工程管理思路：不要把所有对话集中在一个窗口里。具体建议如下：

• 维护一个主对话作为项目管理中心
• 每开发一个功能时，派生到新工作树
• 功能完成后通过交接文档合并回主线
• 这样避免上下文窗口过长导致AI产生幻觉

这里需要理解一个关键概念：上下文窗口（Context Window）是大语言模型能够同时处理的文本长度上限。当对话历史过长时，模型可能无法有效关注早期的重要信息，导致"遗忘"或产生与事实不符的输出——这就是所谓的"幻觉"（Hallucination）。在软件开发场景中，幻觉可能表现为 AI 引用不存在的 API、生成与已有代码冲突的逻辑，或者忘记之前约定的技术方案。通过将不同功能的开发分散到独立的对话（工作树）中，每个对话只需关注单一功能的上下文，大幅降低了幻觉风险。交接文档则充当了"接力棒"，将必要的项目状态信息精炼传递给新的对话。

第二步：分阶段功能开发

微信小程序技术背景

在深入功能开发之前，有必要了解微信小程序的技术特性。微信小程序是腾讯推出的轻量级应用平台，运行在微信客户端内，无需安装即可使用。其技术栈包括 WXML（类似 HTML 的模板语言）、WXSS（类似 CSS 的样式语言）、JavaScript/TypeScript 逻辑层，以及微信提供的丰富原生 API（如 Canvas 绑定、文件系统、相册访问等）。微信开发者工具是官方提供的 IDE，支持代码编辑、实时预览、调试和上传发布。小程序有严格的包体积限制（主包 2MB）和运行时沙箱限制，这也是为什么某些功能（如 PDF 处理）需要借助云端 API 来实现。

图片加水印功能

第一个开发的功能是图片加水印。开发完成后需要在微信开发者工具中测试，发现问题（如拖拽时无法实时预览）直接截图发给Codex修改。修改后的功能支持：

• 实时拖拽预览水印位置
• 字号、透明度、旋转角度实时调节
• 颜色选择和位置自定义
• 生成并保存结果

九宫格切图功能

九宫格切图支持多种模板：圆形、爱心、花边等预设模板，以及自定义模板（长方形、正方形、不同数量分割）。开发时需要注意上下文记忆的传递——通过交接文档让新的工作树了解项目进度。

图片拼图功能

图片拼图是功能最丰富的模块之一，最终实现了：

• 纵向/横向自由拼接
• 单击图片可旋转、缩放、拖拽、删除
• 边框颜色和间距调节
• 模板拼图（并列、垂直、主次等多种布局）
• 比例选择和一键保存

图片编辑功能

图片编辑功能包含裁剪、旋转、加字、贴纸四大子功能。文字支持颜色、大小、透明度、加粗调节，贴纸支持拖动和缩放。所有编辑结果可保存到本地相册，并在历史记录中查看。

第三步：PDF相关功能与API调用

图片转PDF（本地实现）

Codex采用了"本地优先、无云端依赖、尽量少引入库"的策略来实现图片转PDF。这一策略的背后是小程序的包体积限制和性能考量——每引入一个第三方库都会增加包体积，而小程序主包上限仅为 2MB。最终功能支持：

• 多图选择与排序（上移、下移、删除、更换）
• A4/A5/B5纸张规格选择
• 纵向/横向方向设置
• 页面边距调节
• 自定义文件名
• 生成后通过微信发送（小程序限制无法直接保存文件到手机）

PDF转图片（需要API）

PDF转图片功能是整个项目中最复杂的部分。开发过程中发现这个功能必须调用外部API，无法在本地或通过云函数直接完成。这是因为 PDF 解析和渲染需要复杂的图形引擎支持（如 Poppler、MuPDF 等），这些库无法在小程序的 JavaScript 运行时或轻量级云函数环境中运行，因此必须依赖专业的文档处理 API 服务。调试过程中遇到大量报错，作者花了一整晚来解决。

关键提示词技巧：告诉Codex"无论消耗多少额度，修复完要做真实测试，真实发请求验证API能否返回结果，反复测试直到成功"。这条指令让Codex运行了36分钟，最终自主完成了调试。这体现了 Codex 的一个核心能力——它不仅能修改代码，还能在沙箱环境中实际执行代码、发起网络请求、分析错误日志，形成"修改-测试-再修改"的自主循环，直到满足预设的成功标准。

第四步：会员体系与微信支付对接

数据库与云函数搭建

第三阶段进入会员体系开发，需要：

1. 创建云数据库（用户权益表），定义OpenID、会员等级、剩余次数等字段
2. 新建云函数处理会员、支付、扣次等业务逻辑
3. 配置UniCloud服务空间

UniCloud 是 DCloud 公司推出的云开发平台，为 uni-app 和微信小程序提供一站式后端服务，包括云数据库（基于 MongoDB）、云函数（Serverless 函数计算）、云存储等。开发者无需自建服务器，只需编写云函数代码即可实现后端逻辑。云数据库支持 JSON 文档存储，适合存储用户信息、订单记录等结构化数据。云函数则运行在 Node.js 环境中，可以处理支付回调、权限验证等敏感业务逻辑，避免将密钥暴露在前端代码中。

支付流程三步走

支付对接分为三个清晰的步骤：

1. 创建订单：用户点击开通后，在数据库中生成订单记录
2. 预下单与拉起微信支付：配置商户号、AppID、AppKey等信息，绑定支付回调域名
3. 支付回调与权益到账：支付成功后自动更新订单状态，给用户增加次数或开通会员

微信支付对接是小程序商业化的核心环节，涉及多个系统的协作。商户号（Mch ID）是微信支付分配给商家的唯一标识，AppID 是小程序的身份标识，AppKey（API 密钥）用于签名验证。支付流程遵循微信支付 V3 接口规范：前端发起支付请求 → 云函数调用微信支付统一下单接口获取 prepay_id → 前端通过 wx.requestPayment 拉起支付界面 → 用户完成支付 → 微信服务器向预设的回调 URL 发送支付结果通知 → 云函数验证通知签名并更新订单状态。整个流程需要 HTTPS 域名、正确的签名算法和幂等性处理，任何一环出错都会导致支付失败。

每一步都需要真实测试验证——检查数据库是否生成订单、微信支付是否能正常拉起、支付后权益是否正确到账。

关键开发技巧总结

提示词策略

• 开发前先问思路："你准备如何开发这个功能？要求稳定和轻量化"
• 避免返工：在开发前把逻辑收口收紧，明确保存、预览等关键行为
• Bug修复用自然语言：直接截图+语音描述问题，简单高效
• 强制真实测试：要求AI不只是修改代码，而是真实调用验证

AI编程工作流最佳实践

• 每个功能完成后生成交接文档，确保上下文连贯
• 新功能开发前先验证AI是否正确读取了记忆
• 阶段完成后进行全量验收，确认稳定后再进入下一阶段
• 像搭积木一样，不断问AI"下一步做什么"，保持开发节奏
• 复杂Bug让AI自主循环调试，设定明确的成功标准

这套工作流的本质是将传统软件工程中的项目管理方法论（需求分析 → 架构设计 → 迭代开发 → 测试验收）与 AI 代理的能力特点相结合。人类开发者扮演"产品经理+架构师+QA"的角色，负责决策和验收；AI 代理则扮演"全栈工程师"的角色，负责具体的代码实现和调试。这种人机协作模式极大地提升了单人开发者的产出能力，使得一个人在数小时内完成过去可能需要一个小团队数周才能完成的工作量成为可能。

总结

这个实战案例证明，借助Codex等AI编程工具，一个人完全可以独立完成一个包含前端、后台、数据库、支付的完整商业级小程序。关键不在于AI有多强，而在于开发者是否能建立起清晰的工程管理流程、合理的上下文管理策略，以及精准的提示词技巧。AI是强大的执行者，但项目的架构设计、需求把控和质量验收，仍然需要人来主导。

核心要点