零代码实战:用AI从零开发并上架微信小程序

借助ChatGPT和Codex,零基础也能完成微信小程序从开发到上架的全流程。
B站UP主温特苗展示了一套零代码开发微信小程序的完整流程:先注册小程序账号并完成个人认证(30元/年),再用ChatGPT多轮对话梳理需求生成agents.md文件,然后用Codex的子代理功能批量生成题库、设计UI并编写代码,最后通过反复迭代对齐设计稿与代码,完成上传审核发布。整个过程无需手写一行代码,核心能力在于提问、判断和迭代。
AI时代,人人都能做小程序
你是否有过这样的想法——脑海中有一个App创意,却因为不会编程而搁置?B站UP主温特苗(wintermiao)用一个实际案例证明:借助AI编程工具,即使完全不会写代码,也能从零完成一款微信小程序的开发与上架。
他做的是一款软考刷题小程序——支持快速刷题、章节练习、模拟考试、学习计划等功能,整个过程没有手写一行代码,从灵感到上架一气呵成。本文将完整拆解这套零代码开发流程,帮助零基础读者掌握AI辅助开发小程序的全链路。

第一步:注册微信小程序账号
注册流程与注意事项
开发小程序的第一步是在微信公众平台注册一个小程序账号。微信小程序自2017年正式上线以来,已经发展成为拥有超过数百万个应用的庞大生态。它的核心优势在于"即用即走"——用户无需下载安装,在微信内即可直接使用。小程序运行在微信自有的JavaScript引擎上,采用类似Web的技术栈(WXML模板语言+WXSS样式+JavaScript/TypeScript逻辑),但与传统网页不同的是,它运行在一个受限的沙箱环境中,无法直接操作DOM,而是通过数据绑定驱动视图更新。这种架构设计使得小程序的性能接近原生应用,同时开发门槛远低于iOS/Android原生开发。
注册流程并不复杂:
- 点击「立即注册」,选择「小程序」类型
- 填写邮箱(每个小程序需要一个唯一邮箱,推荐用163批量注册)
- 选择注册类型:个人或企业
一个实用技巧:如果你名下需要多个小程序,就需要准备多个邮箱。163邮箱注册方便快捷,用手机号即可批量创建。
个人认证 vs 企业认证
这是很多新手纠结的问题。两者的核心区别如下:
| 对比项 | 个人认证 | 企业认证 |
|---|---|---|
| 费用 | 30元/年 | 300元/年 |
| 微信支付 | ❌ 不支持 | ✅ 支持 |
| AI聊天功能上线 | ❌ 不可上线 | ✅ 可上线 |
| 认证难度 | 简单,身份证+人脸识别 | 需要营业执照 |

对于新手和学习者,个人认证是最佳起点——30元/年的成本极低,认证流程当天即可完成。企业用户有个省钱技巧:先认证一个公众号(300元),然后通过公众号的「小程序管理」入口批量快速注册并认证小程序,第一年的小程序年费可以免除。
备案:比想象中简单
小程序备案听起来复杂,实际上微信官方提供了免费的一站式备案入口。只需在后台按要求填写信息,接听微信的确认电话,再按短信指引完成验证即可。整个备案审核大约需要2个工作日,而且备案期间不影响开发工作。
第二步:用ChatGPT梳理需求与方案
从模糊想法到清晰方案
温特苗的开发起点非常典型——他只有一个模糊的想法:"我想做一款软考刷题小程序"。他没有产品文档,没有设计稿,甚至不确定要做哪些功能。
他的做法是直接和ChatGPT对话,通过多轮沟通逐步明确需求。这里需要理解ChatGPT和Codex在AI辅助开发中的不同定位:ChatGPT擅长自然语言理解和生成,适合需求分析、方案讨论和技术咨询等"思考型"任务;而Codex(这里指OpenAI在ChatGPT中集成的代码执行代理)则是一个具备实际代码执行能力的AI Agent——它可以读取项目文件、编写代码、运行命令、创建文件结构,本质上是一个能操作代码仓库的自主代理。两者的配合形成了"规划-执行"的完整闭环,类似于产品经理与工程师的协作关系。
温特苗的具体对话过程如下:
- 第一轮对话:告诉ChatGPT想开发一款备战软考的刷题小程序,ChatGPT给出了大量功能方案
- 第二轮对话:缩小范围,说明是自用、只覆盖高级资格(架构师),不需要复杂功能
- 第三轮对话:询问技术选型,比如微信开发者工具的模板选择(TS+Sass)、题库格式(JSON vs Markdown)、云服务方案等
这个过程体现了一个重要的AI编程思维:不需要一次性给出完美需求,而是通过多轮对话逐步收敛。ChatGPT最终帮他生成了一段结构化的需求描述,他将其保存为项目根目录下的 agents.md 文件——这是Codex每次执行任务时都会读取的指令文件。
agents.md是Codex项目中的一个特殊配置文件,类似于给AI代理的"系统提示词"(System Prompt)。每当Codex开始执行新任务时,它会首先读取项目根目录下的agents.md文件,从中获取项目背景、技术约束、编码规范等关键信息。这种机制解决了AI代理的"记忆持久化"问题——由于每次对话的上下文是独立的,agents.md充当了跨会话的"项目记忆",确保AI在不同任务中保持一致的理解和行为。这也是当前AI编程工具(如Cursor的.cursorrules、GitHub Copilot的.github/copilot-instructions.md)普遍采用的设计模式。
第三步:用Codex完成设计与开发
项目初始化
在微信开发者工具中创建项目时,有几个关键选择:
- AppID:选择已注册的小程序对应的ID
- 后端服务:选择「不使用云服务」(微信云服务约20元/月,轻量需求可用阿里云/腾讯云的云函数按量付费)
- 模板:根据ChatGPT建议选择 TS+Sass 模板
关于TS+Sass模板的技术选型:TS指TypeScript,是JavaScript的超集,增加了静态类型检查功能。在小程序开发中使用TypeScript的好处是:AI生成的代码会自带类型注解,减少运行时错误,同时IDE能提供更好的代码补全和错误提示。Sass(Syntactically Awesome Style Sheets)则是CSS的预处理器,支持变量、嵌套、混入等高级特性,能让样式代码更加模块化和可维护。对于AI辅助开发而言,TypeScript的类型系统相当于给AI额外的"约束条件",使其生成的代码更加规范和可靠。

用Codex子代理批量生成题库
题库生成是这个项目的一大亮点。温特苗使用了Codex的**Sub-agents(子代理)**功能:让Codex派出10个"小弟",每个负责生成50-100道题目。
Sub-agents(子代理)的原理类似于分布式计算中的任务分发。当主代理接收到一个大型任务时,它会将任务拆解为多个独立的子任务,每个子任务由一个独立的代理实例执行。每个子代理拥有自己独立的上下文窗口(Context Window),这意味着它不会受到其他子任务内容的干扰。

为什么要用子代理?因为AI有上下文长度限制(通常为几万到十几万Token),如果让一个会话生成全部题目,到后期AI会出现"注意力衰减"现象——早期的指令和约束会被逐渐"遗忘",导致后期输出质量下降。分拆成多个子任务,每个子代理独立完成,题目质量更有保障。
设计稿生成与迭代
Codex初版生成的UI比较简陋。温特苗采取了两个策略来提升设计质量:
- 调用Figma插件:在Codex的插件市场添加Figma,让AI直接生成设计稿
- 借鉴风格灵感:他在B站看到有人用"糖果风格"做小程序,于是让Codex按这个风格重新设计
设计稿与代码的"鸿沟"
这里有一个非常真实的洞察:AI生成的设计稿和AI写出的代码之间存在差距,这和现实中设计师与程序员的协作困境如出一辙。

温特苗的解决方法是反复迭代——让Codex一轮轮地"对齐"设计稿,每次聚焦于背景、图标、布局等具体细节。他分享了几个实用技巧:
- 使用计划模式(Plan Mode):让Codex先出方案再执行,避免盲目修改。计划模式的核心价值在于让开发者在AI动手之前审查其思路,确认方向正确后再执行,大幅减少无效迭代。
- 添加Frontend技能包:在Codex插件中搜索并启用Frontend Skill,提升前端UI的生成质量
- 使用WorkTree:开辟独立的代码工作区,防止迭代过程中破坏已有代码。Codex会将项目拷贝到新文件夹中修改,改好后再合并
WorkTree(工作树)是Git版本控制系统的一项功能,允许在同一个代码仓库中同时检出多个工作目录。在AI辅助开发的场景中,这项功能尤为重要:当Codex需要进行大幅度的UI重构或功能迭代时,它会在一个独立的WorkTree中操作,而不是直接修改主工作目录。这样即使AI的修改出现问题(比如破坏了已有功能),开发者也可以轻松回退,不会丢失之前的工作成果。这本质上是一种"安全沙箱"策略,让AI可以大胆尝试而不承担破坏性风险。
经过六七轮迭代,最终的小程序达到了令人满意的视觉效果。
第四步:上传、审核与发布
代码上传
开发完成后,在微信开发者工具右上角点击「上传」,填写版本号(如0.1、1.0等)和备注,代码即上传至小程序后台。
审核与发布流程
- 登录微信公众平台后台,进入「版本管理」
- 开发版本会出现在列表中,可先设为「体验版」通过二维码测试
- 点击「提交审核」,首次需确认一些信息(如遇重复确认提示,刷新页面后重新提交即可)
- 审核通过后,微信会发送通知
- 在版本管理中点击「发布」,微信扫码确认即完成上架
发布成功后,用户可以通过微信搜索小程序名称、扫码或分享链接来访问你的小程序。
代码托管
微信还提供了免费的代码仓库。在微信开发者工具中右键点击源码管理,添加Remote地址指向微信的代码仓库,即可将代码推送到云端备份。这对于AI辅助开发尤为重要——由于Codex每次迭代都会修改大量文件,有了版本控制就能随时回溯到任意历史状态,即使AI的某次修改引入了问题也能快速恢复。
总结:AI编程的正确打开方式
这个案例展示了一套完整的AI辅助开发工作流:
- ChatGPT负责思考:需求梳理、技术选型、方案规划
- Codex负责执行:设计稿生成、代码编写、题库创建
- 人类负责决策:审美判断、功能取舍、质量把控
整个过程中,开发者的核心能力不是写代码,而是提出正确的问题、做出合理的判断、以及持续迭代的耐心。这种"人机协作"模式正在重新定义软件开发的门槛——技术实现能力不再是瓶颈,清晰的思维和持续的迭代意愿才是关键。
对于想要入门AI编程的新手来说,微信小程序是一个极佳的起点——成本低(30元/年)、不需要服务器和域名、发布流程成熟,配合AI工具可以快速将想法变为现实。
核心要点
- 使用ChatGPT梳理需求+Codex编写代码的组合,零基础即可完成微信小程序从开发到上架的全流程
- 微信小程序个人认证仅需30元/年,无需域名和服务器,是AI编程实践的最佳起点
- 利用Codex的Sub-agents(子代理)功能可高效生成大量题库内容,避免单一会话的上下文限制
- AI生成的设计稿与代码之间存在差距,需要通过计划模式、WorkTree等技巧反复迭代对齐
- 企业用户可通过先认证公众号再批量注册小程序的方式节省首年认证费用
相关推荐
教程攻略Cursor+Codex双IDE协同:开源项目二开实战方法论
基于实战经验总结的开源项目二次开发完整方法论,详解Cursor+Codex双IDE协同工作流,涵盖二开七环节、MVP验证、AI读源码技巧,帮助开发者三天跑通项目、两周完成业务集成。
教程攻略Cursor多Agent实战:50分钟搭建Next.js全栈博客
使用Cursor IDE多Agent协作模式,50分钟内从零搭建全栈博客。涵盖Next.js、Clerk认证、Supabase数据库集成,详解4个AI Agent分阶段开发流程与关键避坑经验。
教程攻略从零搭建AI软件工厂:Cursor工程师的多Agent协作实战经验
Cursor工程师Eric分享AI软件工厂构建实战:从自动化六层级、护栏设计、并行Agent管理到规模化扩展,详解如何用多Agent协作实现7×24小时高效软件开发。