手把手教你用CloudBase完成电商小程序全栈开发

文章/答案/技术大牛

发布

大家好！我是喜欢折腾 AI 的开发者 Luke，最近用 AI 工具做了一件很有意思的事情：从零开始，纯AI驱动，Vibe Coding 搭建了一个具备支付功能的商业化小程序。

💡 为什么要做这个实践？

最近 AI 编程工具满天飞，Cursor、Claude Code、Gemini CLI、Kiro等等，但我学习时发现：

社交网络上使用编程工具秀出的 90%的 AI 编程示例都停留在演示阶段，无法真正商用落地

我也对比了几家公司的产品，比如 Lovable, v0等，他们通过与 Supabase 集成，能完成前后端应用的开发，其中 Lovable 能与 Stripe 支付集成，这样能完成整个流程的闭环，做出海产品没问题，但是当我的产品目标用户在国内市场时，这些为海外服务的产品似乎就“水土不服”了

相比 Stripe 的信用卡支付，国内用户更熟悉的是微信/支付宝的支付方式
国内企业往往对数据有合规要求，更倾向于使用国内的云服务厂商，Supabase 就不太适合了

那么有没有办法能够找到一条 “本土化” 的 AI 全栈开发 & 落地商用的路径呢，接下来告诉你我怎么做的

🛠️ 我的 AI 工具库

经过一番调研，我选择了这套组合：

核心工具链

各工具详细介绍

🤖 Claude Code CLI - 项目大脑

理解和分解复杂的业务需求，生成高质量的代码和架构方案
协调各个工具之间的配合

☁️ CloudBase-AI-Toolkit - CloudBase AI 工具：

提供 CloudBase MCP，实现数据库、云函数、静态托管一体化管理
预置的开发模版和 CloudBase 最佳实践 rules

💰 CloudBase 微信小程序支付云模版 - 支付能力

开箱即用的支付能力封装，免去复杂的签名、安全验证
官方维护，安全性和稳定性有保障

🎨 Figma MCP - AI设计师

与 AI 编程工具无缝对接
快速迭代和原型验证

📚 Context7 MCP - 智能文档助手

智能搜索最新的API文档和最佳实践
提供准确的代码示例和配置方案

🎯 AI 开发全记录

第1步：AI设计稿生成

首先通过 Figma AI 完成设计稿设计：

Figma 页面中点击 AI 图标，选择 “First Draft”
输入提示词如下

生成一个具有设计感的衣物购买电商App，页面要求
1. 首页展示商品瀑布流
2. 详情页展示商品价格，数量等信息
3. 购物车展示添加购物车的所有商品项信息
4. 个人中心展示我的订单，收获地址等信息

注意：这里 figma AI 会生成一张页面稿子，这张稿子里是将多个页面合并在一起了，但不影响 Claude Code 调用工具理解

第2步：Vibe Coding 项目准备

这里我们按如下步骤做好 Vibe Coding 前的项目准备工作：

下载项目模板：CloudBase-AI-Toolkit 提供了微信小程序，Web，Uniapp 跨端等各种开发模版，这里我们下载微信小程序模版

模板的好处是已提供好 CloudBase 最佳实践 rules 以及 CloudBase MCP 配置

打开 VSCode/Cursor（或其他编程IDE），打开终端，运行 claude，输入 /mcp 可以检查当前默认的 cloudbase mcp server 配置正常
打开 Figma 桌面客户端（只支持在桌面端中设置 Figma MCP Server），如图所示选中 Preferences -> Enable Dev Mode MCP Server 启动 MCP Server

将 Figma MCP Server 配置（以及 context7 MCP Server）添加至项目根目录 .mcp.json 文件中，如下

{
  "mcpServers": {
    "cloudbase": {
      "command": "npx",
      "args": ["-y", "@cloudbase/cloudbase-mcp@latest"]
    },
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

注意：这里分享一个踩坑经验，我在更新 .mcp.json 配置时发现新增 mcp 配置后 Claude 并没有识别到，在官方文档上找到了手动添加的方式处理 sse 类型添加：claude mcp add --transport sse Figma http://127.0.0.1:3845/sse command 类型添加: claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

三个mcp 配置添加完成后，运行 /mcp 可以看到如下结果：

遵循 Figma MCP 官方的最佳实践，可以在 CLAUDE.md 末尾补充一个 Figma 的自定义规则

<user_custom_rules>
# MCP Servers
## Figma Dev Mode MCP Rules
  - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

</user_custom_rules>

这份规则可以避免 Claude Code 从网上任意下载素材资源（有可能下载失败），而采用 Figma 提供的资源

第3步：前端交互开发

首先需要登录 CloudBase 云开发环境（需要先在云开发平台上创建环境），对话框中输入 “登录云开发”
浏览器会先弹出云开发平台上的授权，授权后弹出环境选择确认框，选择环境后登录完成

Claude Code 对接 Figma MCP 完成原型稿的前端交互还原

Claude Code能够解读Figma设计稿的组件结构以及生成对应的小程序页面代码

先保证 Figma 当前生成的设计稿属于被选中状态，然后 Claude 命令行对话输入提示词如下

根据figma 设计稿当前选中的，将figma 设计稿转换为代码实现，完成如下应用

一个具有设计感的衣物购买电商小程序，具有4个页面
1. 商城首页，瀑布流展示 商品图片
2. 首页商品图片点击后，跳转进入商品详情页，可加入购物车
3.购物车页面，展示已挑选的商品项信息，可点击购买
4. 个人中心页，展示购物订单信息

注意：
1. 你从设计稿中读取 UI 细节时，必须使用 get_code 方法
2. 当你完成前端的交互实现后，必须和我确认，没问题后再进行后端开发

输入后，Claude 会调用 Figma MCP Server 的 get_code 工具读取设计稿细节（如下图），然后 Claude 会进行前端交互的还原开发了

第4步：后端逻辑开发和部署

当你通过多轮对话迭代，确认前端交互实现的没问题后，可以要求 Claude Code 开始后端逻辑的开发了，提示词如下

现在我们来实现后端逻辑，使用云函数来完成业务逻辑
1. 商品列表页数据读取（可预先往数据库中写入一批商品数据）
2. 商品详情数据读取
3. 商品下单（生成订单）
4. 订单列表查询
5. 支付的具体实现暂时空着

Claude Code 结合 CloudBase MCP 完成后端逻辑的编写及资源的部署：

生成并部署了 business 云函数，里面涉及获取商品列表，获取商品详情，创建订单，查询订单列表等逻辑
创建了 orders, products 两张表，用于存储订单和商品信息，关联的用户信息标识使用了 openid

第5步：微信支付云模版配置

在云开发平台上配置云模版并配置商户证书信息：

开通微信支付云模版
- 登录腾讯云开发平台
- 进入模板中心
- 安装微信支付模版
img
安装完成，配置商户信息

img后续还需要配置接受支付通知的云函数，此时先不用配置，后面会讲到未启用微信支付公钥则不需要填相关配置

微信appId
商户号 (mch_id)
商户API证书序列号
商户API证书私钥
API V3密钥

检查云函数列表，确认已经部署了 wxpayFunctions 云函数 wxpayFunctions 中内置了微信支付的相关流程，如小程序下单，查询订单，退款等
告诉 Claude，调用 CloudBase 的工具将 wxpayFunctions 云函数下载到本地（cloudfunctions 目录），因为后续 AI 需要根据业务逻辑修改云函数代码

第6步：微信支付创建订单逻辑改写

让 Claude Code 结合 Context7 的文档能力，基于 wxpayFunctions 模板代码，补充小程序里微信支付下单逻辑：

Claude Code 命令行对话中输入 “use context7, 参照文档资料帮我实现小程序下单逻辑”，这里也可以手动补充一些微信支付官方的文档链接在上下文中使用

Context7 MCP 调用工具寻找了支付相关的API文档材料

核心支付流程图示（这里后台调用JSAPI 下单不需要我们关注，已内置到模板逻辑中）

Claude 学习相关文档后会自动编写完成客户端发起下单，成功后唤起收银台，更新订单状态等逻辑。

第7步：微信支付订单回调通知逻辑创建

当用户支付动作完成后，微信支付后台会推一个支付结果通知到云函数，我们需要创建一个云函数来处理这个通知，然后更新订单状态。

Claude Code 命令行对话中输入如下提示词

1. 为方便实际支付测试，请将调用支付接口时的实际价格除以 1000 再调用
2. 请继续实现支付成功后微信的回调通知云函数，可以参考该文档的第5步实现 https://tcb.cloud.tencent.com/cloud-template/detail?appName=wx-pay-v2 

注意：回调通知函数是一个新的函数，你可以命名为 wxpayOrderCallback，你的实现应该严格参照该文档第5步

这里我让 Claude 直接读 CloudBase 官方的云模版文档中回调通知示例（把文档链接扔给它），创建了 wxpayOrderCallback 云函数，用于处理微信支付回调通知。

当 wxpayOrderCallback 云函数部署完成后，需要类似第 5 步中配置到模板中的“接受支付通知的云函数”，填入 scf:wxpayOrderCallback，这样当微信支付后台推送支付结果通知时，会调用 wxpayOrderCallback 云函数。

🎉 至此一个极简的电商小程序就完成了

✅ 商品浏览和搜索
✅ 购物车管理
✅ 订单创建和查询
✅ 微信支付集成
✅ 支付状态实时更新
✅ 订单历史管理

当然比起市面上成熟的电商小程序，这个项目还有很多不足，比如：物流发货，地址管理，商品推荐/评论/收藏等，但我相信大家看了本文的内容后，有能力与 AI 一起扩展实现这些功能。

🤔 AI编程的真实体验

整个项目做下来差不多花了两天时间，相比传统的开发模式真的提速不少，基于 CloudBase + Claude Code + Figma 的这套开发工具链，我总结了如下优势：

通过 AI 生成设计稿，可以让不懂设计的同学也能快速做出有设计感的界面
Claude Code + CloudBase 可以快速实现前后端逻辑 & 资源的部署
CloudBase 微信支付云模版可以帮助快速实现支付功能，无需关心复杂的支付流程
一人开发所花费的各类产品工具成本，相比传统开发模式中雇佣不同专业人士，可以节省大量成本
AI编程帮助创业者快速验证商业想法，降低试错成本，快速迭代，快速验证，快速调整

💌 写在最后

这次AI驱动的商业化应用实践让我深深震撼了，因为它真的能帮我们做出有商业价值的应用。AI工具不是要取代程序员，而是让每个有想法的人都能成为创造者。

🔗 相关链接

Figma MCP 官方文档：https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server
context7 文档：https://context7.com/
CloudBase-AI-Toolkit：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit
CloudBase 微信支付云模板文档：https://tcb.cloud.tencent.com/cloud-template/detail?appName=wx-pay-v2

💡 为什么要做这个实践？

🛠️ 我的 AI 工具库
- 核心工具链
- 各工具详细介绍

🎯 AI 开发全记录
- 第1步：AI设计稿生成
- 第2步：Vibe Coding 项目准备
- 第3步：前端交互开发
- 第4步：后端逻辑开发和部署
- 第5步：微信支付云模版配置
- 第6步：微信支付创建订单逻辑改写
- 第7步：微信支付订单回调通知逻辑创建

🎉 至此一个极简的电商小程序就完成了

🤔 AI编程的真实体验

💌 写在最后
- 🔗 相关链接