AI 交友会员小程序实战
从微信小程序前期准备，到把完整需求交给 Codex，用 Weapp-vite 和 CloudBase 做一个可落地的交友小程序案例。
不写一行代码，利用 CLI/Skill/MCP，从 0 到 1 做一个商业小程序
流程大概是这样的：人先把微信生态里那些必须人工操作的步骤——账号、认证、权限、支付、云环境——都准备好，然后打开 Codex，把脚手架创建、依赖安装、CloudBase 配置、页面开发、云函数、调试日志这些事情丢给 AI 去做。
案例用的是我一个朋友发来的交友小程序需求文档。原始需求我会原样保留，方便你直接复制给 Codex。文章前半段讲人类要准备什么，后半段是一份可以直接复制给 Codex 的任务说明。
开做前先准备
| 准备项 | 用途 |
|---|---|
| 小程序 AppID | 创建真实项目、预览、上传和提审 |
| 微信开发者工具 | 调试页面、云函数、体验版和真机预览 |
| CloudBase 环境 | 用户数据、云函数、存储和后端能力 |
| Codex 或同类 AI agent | 根据需求文档创建项目、写代码、查日志、修问题 |
| 交友产品需求文档 | 明确用户资料、推荐、会员、活动和后台边界 |
| 主体认证和支付准备 | 做会员订阅、活动报名和正式上线时需要 |
这类案例里，账号、认证、支付和云环境需要人先准备好。AI 可以写代码和排错，但不能替你完成微信平台里的主体认证。
为什么适合做小程序
交友、线下活动、会员权益这类产品，我的建议是：先做微信小程序，别一上来就搞 App。
当然它也不是万能的。如果你的核心流量靠 Google SEO，或者用户主要在电脑上操作，小程序就不应该是唯一入口。但我们这个场景是微信生态里的 MVP，小程序没毛病。
技术栈
这次我推荐这么搭：
为什么不直接用微信开发者工具新建原生模板？
原生模板当然可以，最稳。但这次我们希望 AI 多干点活，Weapp-vite 的工程化体验会顺很多——Vite、TypeScript、Tailwind、DevTools 自动打开、console 日志桥接、脚手架内置的 Agent 规则，这些东西能让 Codex 更容易持续工作。
那 Taro 呢？
如果你是 React 团队，或者明确要多端，Taro 可以考虑。但这个案例第一版就是微信小程序，没必要为了"以后可能跨端"提前加复杂度。
先分清楚谁做什么
这一步很重要——不是所有事情都该丢给 Codex。
总结一下：
- 人类负责拿到微信生态的入场券。
- Codex 负责跑项目、按需求实现。
- 人类负责看真机效果、确认支付、准备审核材料。
人类先做的准备
这些事情先搞定，不然 Codex 后面跑着跑着就卡住了。
全部完成后就可以打开 Codex 开始第一轮了
1. 注册微信小程序
入口：微信公众平台
说几个实际会遇到的问题：
- 如果你已经有认证公众号，可以在公众号后台的小程序管理里创建小程序，复用认证信息。第一年能省点认证费，但第二年起小程序还是要单独认证。
- 邮箱用 163 这种普通邮箱就能注册。如果你有长期域名，也可以用飞书、企业邮箱之类的配个域名邮箱，后面管理多个产品会方便些。
- 小程序名称经常被占用。公司主体如果要用品牌名，可能还要涉及商标。普通 MVP 可以先取个描述性名称，比如"产品创作教程"这种。
- 纯英文名称通常会要求补充商标或说明。非中文名称一般要在备注里写中文名称、主要服务内容，并承诺遵守相关法律法规。
2. 处理类目、认证和备案
这个地方别想当然。
- 微信认证：个人 30 元，企业 300 元。
- 小程序备案需要几天，建议早点开始，别等代码写完了才弄。
- 备案需要身份证、营业执照、手机号、应急联系方式等材料。
- 前置审批项一般选"以上都不涉及"，除非你真的做出版、影视、药品、新闻、校外培训、宗教、互联网金融、网络文化这些需要许可的领域。
交友和 AI 相关功能尤其要注意类目：
- 社交类目可能需要《非经营性互联网信息服务备案核准》。
- 深度合成、AI 问答之类的场景，涉及算法备案、合作协议、备案编号等材料。
这块政策和平台要求变得挺快的。提审之前，一定要重新看一遍微信后台的最新要求。
3. 获取 AppID
在小程序管理后台左下角：
小程序 -> 账号设置 -> 账号信息找到 AppID，后面复制给 Codex。
如果你接入了第三方 API，还要去：
管理 -> 开发管理 -> 开发设置 -> 服务器域名添加 request 合法域名。你自己的 URL 跟我用的肯定不一样，别直接复制教程里的域名。
4. 开通 CloudBase
在微信开发者工具里开通云开发环境，拿到 CloudBase 环境 ID。
环境 ID 一般在 CloudBase 控制台或微信开发者工具的云开发面板里能看到。给 Codex 的时候记得用占位符标清楚：
CloudBase 环境 ID：<你的环境 ID>5. 如果要接微信支付
如果这个产品要做年费会员，那就需要准备微信支付。
流程大致是：
- 登录 微信支付商户平台。
- 注册或确认微信支付商户号。
- 在商户平台里关联小程序 AppID。
- 关联后，小程序后台也要确认这个待关联商户号。
- 记下商户号，后面复制给 Codex。
小程序后台确认路径大概是：
小程序后台 -> 支付与交易 -> 微信支付 -> 待关联商户号 -> 确认这里有个常见的坑：直连商户和服务商模式不是一回事。让 Codex 写支付的时候，一定要先确认你是哪种模式，再写支付参数。别让 AI 自己猜。
给 Codex 的项目信息
打开 Codex 之前，先把这些信息整理成一小段文本：
小程序 AppID：<你的 AppID>
CloudBase 环境 ID：<你的环境 ID>
微信支付商户号：<你的商户号，如果暂时不接支付就写"暂不接入">
是否需要微信支付：需要 / 暂不需要
项目类型：微信小程序，交友 + 线下活动 + 会员权益
技术栈：Weapp-vite + TDesign Mini Program + Tailwind CSS + CloudBase SQL 数据库注意：API 密钥、证书、私钥这些东西别直接写进公开文档里。配置支付证书或密钥的时候，让 Codex 指引你在本地或平台后台处理，不要在文章里乱贴。
实际用的时候，跟 Codex 的对话不是一次搞定的。建议拆成四轮，每轮单独开一次对话：
跑起开发服务器
设计数据表结构
确定设计方向
完成最终开发
前一轮没确认，不要急着进下一轮。特别是需求没定清楚之前，别进实现阶段。
第一轮：项目初始化
新建一个空文件夹，打开 Codex，复制下面这段：
我要做一个微信小程序项目，请你从零帮我创建并初始化。
## 基础信息
- 小程序 AppID：<填写你的 AppID>
- 技术栈：Weapp-vite + TDesign Mini Program + Tailwind CSS + CloudBase SQL 数据库
- 项目类型：微信小程序，交友 + 线下活动 + 会员权益
## 执行原则
1. 先创建 Weapp-vite 项目，优先选择适合微信小程序、TDesign、Tailwind CSS 的模板组合。
2. 脚手架如果提示安装推荐 AI skills，请优先安装。它生成的 AGENTS.md 要保留。
3. 后端使用 CloudBase，数据库使用 SQL 数据库，不要使用文档数据库。
4. 如果 CloudBase MCP、CLI 或微信开发者工具需要登录授权，请明确告诉我需要人工授权的位置，然后继续完成能自动完成的部分。
## 需要你执行的命令
这些你自己跑，不需要问我：
```bash
# 创建 Weapp-vite 项目
pnpm create weapp-vite
# 安装依赖
pnpm i
# 启动开发
pnpm dev
pnpm dev --open
# 持续监听微信开发者工具 console，桥接回终端
wv ide logs --open
# 只打开微信开发者工具
pnpm open
# 生产构建
pnpm build
pnpm build --open
# 配置 CloudBase 工具链：
npx skills add TencentCloudBase/cloudbase-skills
npm install @cloudbase/cli@latest -g
tcb ai
npm i @cloudbase/cloudbase-mcp -g
# macOS / Linux / WSL
codex mcp add cloudbase --env INTEGRATION_IDE=CodeX -- cloudbase-mcp
# Windows
codex mcp add cloudbase --env INTEGRATION_IDE=CodeX -- cmd /c cloudbase-mcp
完成后告诉我项目结构、开发服务器状态，以及哪些步骤需要我到微信后台确认。这一轮结束你应该有：一个可以跑起来的项目骨架，微信开发者工具能正常打开。
第二轮：需求梳理
打开一个新的 Codex 对话（不要在上一轮的对话里继续），复制下面这段：
下面是一份交友小程序的原始需求文档。里面有重复和不完整的部分，你先看一遍，然后：
1. 整理出合理的 MVP 范围（哪些功能第一版必须做，哪些可以后续迭代）
2. 设计数据表结构
3. 给出实现计划
不要急着直接开始写代码。先输出整理结果给我确认，我确认了你再进入下一步。
交友小程序 — 需求清单
版本：v1.0 | 日期：2026-05-12 | 产品类型：微信小程序（社交 + 活动报名）
一、项目概述
一款基于线下活动的交友微信小程序，核心功能为：
1.会员系统（年费玩家）提供两项核心权益：
•全年免费参加所有线下活动
•解锁其他用户的详细信息查看权限
2.推荐：展示其他用户信息，促进用户间认识与连接
二、功能模块总览
模块 说明
用户与个人信息模块 注册登录、信息采集、个人主页
推荐模块 推荐页、用户信息、权限控制
会员模块 邀请、年费购买、权益生效、续费、后台管理
三、模块一：用户与个人信息模块（核心）
3.1 注册与登录
编号 功能点 说明 优先级
U-01 微信授权登录 一键授权，获取 OpenID 进行用户绑定 P0
U-02 手机号绑定 用于重要通知与线下身份核验 P0
3.2 个人信息采集（推荐系统基础）
编号 功能点 说明 优先级
U-03 基础信息 昵称、头像、性别、年龄、身高、所在城市、所在区域 P0
U-04 详细信息 “【工作与学校】
行业、职业、毕业学校、最高学历
【其他】
星座、MBTI、兴趣爱好、一句话介绍、情感状态、交友目的、年收入范围、故乡、吸烟、饮酒、健身、房、车状态、恋爱物品
【照片墙】（最多6张）" P0
U-05 信息触发时机 注册时引导 + 成为会员后引导补全 P0
U-06 信息完善度 进度条展示，引导用户填写完整 P0
3.3 我的主页
编号 功能点 说明 优先级
U-07 被喜欢次数 查看自己总共被多少人喜欢过 P0
U-08 被约次数 收到有多少个人约我参加线下活动 P0
U-09 编辑个人信息 随时可修改已填写的信息 P0
U-10 邀请成为会员 付费后可追踪邀请人是谁 P0
四、模块二：推荐模块（核心）
4.1 用户浏览
编号 功能点 说明 优先级
U-07 被喜欢次数 查看自己总共被多少人喜欢过 P0
U-08 被约次数 收到有多少个人约我参加线下活动 P0
U-09 编辑个人信息 随时可修改已填写的信息 P0
U-10 邀请成为会员 付费后可追踪邀请人是谁 P0
五、模块三：会员（年费玩家）模块
编号 功能点 说明 优先级
U-07 被喜欢次数 查看自己总共被多少人喜欢过 P0
U-08 被约次数 收到有多少个人约我参加线下活动 P0
U-09 编辑个人信息 随时可修改已填写的信息 P0
U-10 邀请成为会员 付费后可追踪邀请人是谁 P0
这一轮结束你应该有：确认好的 MVP 范围、数据表设计和实现计划。
第三轮：UI 原型
打开一个新的 Codex 对话，复制下面这段：
基于我们已经确认的需求，现在来设计小程序的原型页面。
项目背景：AI 交友会员小程序，核心场景是会员、推荐、线下活动报名。
技术栈：Weapp-vite + TDesign Mini Program + Tailwind CSS。
已确认的 MVP 页面清单：
1. **注册/登录页** - 微信授权登录 + 手机号绑定
2. **个人资料页** - 基础信息 + 详细信息采集，含完善度进度条
3. **推荐页** - 展示其他用户信息，左右滑动或卡片浏览
4. **个人主页** - 显示被喜欢次数、被约次数、编辑资料入口
5. **会员页** - 年费购买、权益说明
6. **活动列表页** - 线下活动展示、报名
请先输出每个页面的结构和布局描述，不要直接生成代码。我会确认后再进入实现。
如果合适的话，你可以先用 HTML 做原型给我看。这一轮结束你应该有：确认好的页面结构和设计方向。
第四轮：完整实现
打开一个新的 Codex 对话，复制下面这段。这是最大的一轮，给它所有需要的完整信息：
基于我们前几轮确认的需求和设计，现在来实现完整的小程序。
## 基础信息
- 小程序 AppID：<填写你的 AppID>
- CloudBase 环境 ID：<填写你的 CloudBase 环境 ID>
- 微信支付商户号：<填写你的商户号；如果暂不接支付，写"暂不接入">
- 是否需要微信支付：需要 / 暂不需要
- 技术栈：Weapp-vite + TDesign Mini Program + Tailwind CSS + CloudBase SQL 数据库
- 项目类型：微信小程序，交友 + 线下活动 + 会员权益
## 已确认的 MVP 范围
1. 注册/登录（微信授权 + 手机号）
2. 个人信息采集（基础信息 + 详细信息 + 照片墙 + 完善度进度条）
3. 个人主页（被喜欢次数、被约次数、编辑资料、邀请记录）
4. 推荐页（用户卡片浏览、信息查看权限控制）
5. 会员系统（年费购买、权益生效、续费、后台管理）
6. 活动列表（线下活动展示、报名）
## 实现要求
1. 实现时保留小程序真实用户视角，不要把内部开发说明写进页面 UI。
2. 每完成一段功能，说明怎么在微信开发者工具或真机里验证。
3. 如果遇到 CloudBase、微信支付、DevTools 报错，先查真实日志再改代码。
4. 如果接入微信支付，必须先确认直连商户还是服务商模式，不要乱传 sub_mch_id / sub_openid。
5. 支付相关实现要参考微信官方云开发支付文档，不能凭印象写。
6. 开发过程中要看真实报错：终端日志、微信开发者工具 console、网络请求响应、CloudBase 云函数日志。
7. 最后给出真机调试、上传审核、发布前检查清单。
## 支付参考文档
- CloudBase 微信支付接入流程：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/guide/wechatpay/openapi.html
- CloudBase 微信支付 SDK 指引：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/reference-sdk-api/open/pay/Cloud.CloudPay.html这一轮结束你应该有：完整可运行的小程序，可以在微信开发者工具和真机上测试。
常用命令参考
这块是额外说明，正常情况下让 Codex 执行就好，不需要自己手敲。
开发命令
pnpm dev
pnpm dev --open
pnpm dev -o
wv ide logs --openpnpm dev 启动监听构建，保存后自动重新编译并同步到开发目录。配合 --open 会先尝试预热 DevTools 配置，再拉起微信开发者工具。
如果你在 Codex、Claude Code、Cursor CLI 这类 AI 终端里工作，并且默认配置保持 weapp.forwardConsole.enabled = 'auto'，那么 pnpm dev --open 打开微信开发者工具后，会自动把小程序 console 日志桥接回当前终端。
构建命令
pnpm build
pnpm build --open
pnpm build -o生产构建会重新生成输出目录，并应用压缩、静态资源处理和分包产物整理。
打开微信开发者工具
pnpm open
wv ide setup .pnpm open 直接打开微信开发者工具。wv ide setup . 只做 DevTools 配置预热，不会立即打开 IDE。
如果命令行提示"请先在微信开发者工具中开启服务端口"，去：
微信开发者工具 -> 设置 -> 安全设置 -> 开启服务端口勾选后重启微信开发者工具，再让 Codex 继续。
透传微信开发者工具 CLI
wv preview --project ./dist/build/mp-weixin
wv upload --project ./dist/build/mp-weixin -v 1.0.0 -d “release"
wv config lang en
wv screenshot --project ./dist/build/mp-weixin --json
wv compare --project ./dist/build/mp-weixin --baseline .screenshots/baseline/index.png --max-diff-pixels 100 --json
wv ide preview --project ./dist/build/mp-weixin
wv ide config show
wv ide setup .Weapp-vite 会优先执行自己的原生命令，只有未命中时才回退透传到 weapp-ide-cli。所以 build、dev、open、analyze、generate、mcp、prepare 这些命令不会被官方 IDE CLI 覆盖。
调试方法
小程序开发别只看 AI 的解释，要看真实现象。
常用的排查路径：
- 微信开发者工具 console：看页面报错、组件报错、授权失败。
- 网络面板：找到对应请求看响应体，别只看状态码。
- CloudBase 云函数日志：支付、登录、数据库权限问题基本都要看这里。
- 真机调试：登录、手机号授权、微信支付、订阅消息，模拟器经常不够用。
- 微信后台配置：合法域名、类目、支付关联、接口权限，很多问题不是代码问题。
腾讯云开发如果是前端直连数据库，需要设置 RLS 操作权限。一般是全部用户只读，或者只能修改自己的数据。后端云函数访问相对简单，但也不能把敏感数据随便返回给前端。
教程里最重要的习惯是：遇到报错先找到真实日志，再让 Codex 基于日志修。
下一步
你现在要做的事情分为两个阶段：
1 完成小程序注册、认证、类目、备案判断
2 获取 AppID
3 开通 CloudBase，拿到环境 ID
4 如果要接支付，准备商户号并关联小程序
1 新建文件夹，初始化项目
2 新开对话，梳理需求、设计数据表
3 新开对话，确定页面结构和 UI 原型
4 新开对话，完整信息给 Codex，最终实现
⚠ 顺序很重要：每一轮单独开一次 Codex 对话。前一轮没确认，不要急着进下一轮。需求没定清楚之前，别进实现阶段。
补充一些基础的小程序信息
给 AI 的推荐提示词
请先判断本任务应该使用哪个 weapp-vite skill。
如果任务涉及当前安装版本，请优先读取 node_modules/weapp-vite/dist/docs/。
如果任务涉及真实小程序运行时截图、截图对比或日志，请优先使用 wv screenshot、wv compare、wv ide logs --open 或对应 MCP tools。
最后请给出：使用的 skill、改动文件、验证命令和结论。
应该尽量在项目中使用 tailwindcss （如果仓库是基于 weapp-tailwindcss 且已经做好 tailwindcss 配置的话）
``这篇文档有问题？