AI 开发微信小程序 2.0

这是一套新的 AI 微信小程序开发流程。

1.0 版本证明了 Codex 可以完成原生微信小程序、CloudBase 和微信支付接入。2.0 版本继续解决一个更重要的问题：怎样让这件事稳定复用，而不是每次重新搭环境、重新解释规则、重新排查相同的问题。

现在我们已经把经过真实案例验证的工程约束、设计流程、CloudBase 接入、微信登录、支付基础能力和自动验收，整理成一套可复用的微信小程序代码模板。

1.0 和 2.0 的区别

1.0 的做法是：准备账号和需求，然后让 AI 从一个空项目开始开发。它能跑通，但很多能力依赖当次对话，设计、加载、缓存、支付回调和验收都可能反复返工。

2.0 不再从空项目开始。

2.0 的目标不是让 AI 在第一天写出更多页面，而是让它在后续开发中少走弯路，并且能拿出真实证据说明功能已经完成。

你仍然需要准备什么

Codex 不能替你注册微信主体，也不能代替你完成微信里的用户授权和真实付款。

开始前，人只需要处理这些平台动作：

1. 注册微信小程序，取得 AppID；需要微信支付时，准备可以开通支付的主体和商户号。
2. 下载并登录微信开发者工具，开启服务端口，第一次自动打开项目时确认信任。
3. 注册腾讯云并开通 CloudBase 环境，取得环境 ID。
4. 按实际功能完成 CloudBase、微信支付、手机号等首次授权。
5. 在真机上完成扫码、手机号授权、¥0.10 测试支付和退款到账等必须由用户执行的动作。

这些动作完成后，后续的工程配置、页面开发、后端、数据库、云函数、图片上传、自动测试和截图验收，都可以继续交给 Codex 执行。

新代码模板包含什么

新版不是一份只有首页的空壳，也不是把会员案例复制给每一个项目。

根模板保持业务无关，真实产品放在独立的 examples/{slug} 中。公共能力放在共享包和自动化脚本里，因此后续可以快速创建新的小程序，又不会把会员、缝纫社区或其他案例的代码互相污染。

固定技术栈

• 原生微信小程序：WXML + TypeScript。
• weapp-vite：构建、开发服务器和微信开发者工具连接。
• Tailwind CSS 4 + weapp-tailwindcss 5：统一样式约束，并检查真实编译产物。
• TDesign MiniProgram：表单、弹窗、导航和反馈优先使用成熟组件。
• CloudBase：SQL 数据库、云函数、对象存储和日志。

通用业务基础

• 微信身份登录与按需授权。
• 手机号绑定、头像、昵称和个人资料。
• 订单、微信支付、支付结果查询、会员权益与退款状态。
• 活动、报名、票券、订单列表和必要的管理能力。
• 数据缓存、失败重试、空状态、权限状态和页面返回规则。
• 多案例数据隔离和独立导出。

自我验证 Harness

• 自动诊断 AppID、CloudBase 环境和本地配置。
• 自动构建并打开微信开发者工具。
• 自动导航页面、读取 Console、截图和检查视觉基线。
• 自动验证源码约束、构建产物、资源体积和关键路由。
• 通过唯一的 CloudBase 自动化通道操作数据库、云函数、存储和日志。
• 在人完成真机授权或付款后，继续查询服务端订单、退款和权益终态。

这套能力的价值是：Codex 不只告诉你“理论上可以”，而是能够在真实项目里运行、截图、回读数据，再给出已经验证和仍需人工确认的边界。

AI 微信小程序 2.0 的完整流程

01 确认 MVP

本教程假定你已经有相对明确的需求。开发前只做一次边界确认：第一版的核心用户任务是什么，哪些功能必须实现，哪些明确不做。

让 AI 一次性追问最多 8 个会改变 MVP 的问题，每个问题给出推荐答案。确认后，再让它用不超过 8 条要点复述共同理解。

下面是已经讨论好的需求：

[粘贴需求]

这次只实现第一版 MVP。请先不要写代码。

请提炼核心用户任务和最小业务闭环，列出必须实现和明确不做的功能；一次性提出最多 8 个会改变 MVP 范围的问题，并给出推荐答案；最后用不超过 8 条要点复述双方已经确认的内容。

02 搭建 Harness

让 Codex 检查真实项目，而不是只相信需求文档或依赖名称。它需要实际证明自己能够构建项目、打开开发者工具、读取 Console、截图、操作云端并执行测试。

在写业务代码前，请检查项目的真实技术栈，并为它搭建能够自我验证的 Harness。

请搜索当前官方提供或推荐的 MCP、Skill、CLI 和自动化能力，并实际验证构建、DevTools 导航与截图、Console、数据库、云函数、存储和日志。

最后列出：已经具备的自动化能力、仍然存在的卡点、需要我一次性配合的动作，以及后续怎样自动测试和验收。

03 大范围探索视觉方向

同一个小程序可以有完全不同的产品气质。第一轮让 ImageGen 生成多套差异明显的方向，每套都包含同样的核心页面，方便比较整体风格。

04 小范围确定 UX/UI

风格确定后，不再重新换一套视觉，而是在同一设计语言中比较首页第一任务、信息优先级、TabBar、登录时机、支付入口和返回逻辑。

05 生成设计系统和 MVP 页面规格

原型图只负责提供视觉方向。真正指导代码的是：设计令牌、公共组件、页面目标、路由、数据来源、缓存、加载、空、失败、权限和验收标准。

这一步应留下四份产物：

• 五个主页面原型。
• 完整页面规格。
• 项目设计系统。
• 最终设计验收。

06 先完成一个代表页面

不要一开始生成几十个页面。先选择一个同时包含导航、真实数据、图片、登录状态和核心动作的页面，让它暴露设计系统、缓存、加载和组件复用的问题。

代表页面通过验收后，先把经验写回设计规范、公共组件、AGENTS.md、Skill 和自动检查，再开发下一条任务。

07 按核心用户任务扩展

不要按“先写完所有 UI，再接后端”的方式推进。每一条任务都同时完成页面、真实数据、云端逻辑、失败状态、自动测试和截图验收。

会员案例可以拆成：

1. 公开浏览：主页、成员、活动。
2. 身份资料：微信登录、手机号和个人资料。
3. 会员权益：会员方案、通行证和权益状态。
4. 支付售后：订单、微信支付、查单和退款。
5. 活动流程：报名、票券和取消。
6. 运营管理：用户、活动和订单处理。

08 分层验收

页面能打开，只能证明页面能打开。完整验收还要检查：

• 源码、类型、路由和敏感信息。
• 真实构建、Tailwind 产物、分包和资源体积。
• 微信开发者工具逐页截图、Console、返回和缓存。
• 数据库、云函数、存储、日志、订单和退款终态。
• 真机微信授权、手机号、真实支付和退款到账。

09 沉淀成功经验

只有真实复现并通过验收的经验，才写入模板。下一次创建小程序时，AI 从已经验证过的登录、支付、缓存、图片和验收流程开始，而不是重新猜一次。

这份免费文档和代码模板的关系

这篇 2.0 流程文档免费公开。你可以直接使用里面的流程、提示词和验收方法。

新版微信小程序代码模板属于付费资料，包含完整工程、Harness、公共能力、会员案例和自动化脚本：

• 加入 01MVP 实战会员可以获取代码模板和后续更新。
• 只需要小程序模板，也可以单独购买，当前价格 ¥199。
• 购买或咨询可以联系 MakerJackie。

WECHAT MINI PROGRAM TEMPLATE

不必再从空项目重新搭一次

先阅读免费流程，确认这种开发方式适合你；需要现成工程时，再选择会员或单独购买模板。

查看会员方案联系 MakerJackie

如果你第一次做微信小程序，先完成 1.0 实战中的账号准备，再回到这篇 2.0 流程。注册、授权和真实支付仍然需要你完成；这些动作结束后，Codex 才能接管后续工程并持续自动验收。