Claude Code 实战一：从零开发电商小程序（全流程）

前言有了入门基础我们来看一个完整的实战案例——使用 Claude Code 开发一个具备支付功能的电商小程序。这个案例整合了 Figma 设计稿还原、后端开发、数据库管理和微信支付集成是一次典型的“全栈 AI 驱动开发”实践。 项目概况项目目标开发一个衣物购买电商小程序包含首页商品瀑布流、商品详情、购物车、个人中心四个页面并集成微信支付技术栈微信小程序 CloudBase云开发 微信支付云模版开发工具Claude Code Figma MCP CloudBase MCP Context7 MCP 第一阶段项目准备与设计稿接入1.1 获取设计稿首先通过 Figma AI 生成设计稿打开 Figma 桌面客户端点击 AI 图标选择 “First Draft”输入提示词生成电商 App 设计稿text生成一个具有设计感的衣物购买电商App页面要求首页展示商品瀑布流详情页展示商品价格数量等信息购物车展示添加购物车的所有商品项信息个人中心展示我的订单收货地址等信息1.2 下载项目模板使用 CloudBase-AI-Toolkit 提供的微信小程序模板bash克隆模板项目git clone https://github.com/cloudbase/cloudbase-ai-toolkitcd cloudbase-ai-toolkit/wechat-miniprogram-template安装依赖npm install1.3 配置 MCP 服务器在项目根目录创建 .mcp.json 配置文件json{“mcpServers”: {“cloudbase”: {“command”: “npx”,“args”: [“-y”, “cloudbase/cloudbase-mcplatest”]},“Figma”: {“url”: “http://127.0.0.1:3845/sse”},“context7”: {“command”: “npx”,“args”: [“-y”, “upstash/context7-mcplatest”]}}}1.4 初始化项目上下文启动 Claude Code 并初始化bashclaude/init # 自动生成 CLAUDE.md 文件关键技巧在 CLAUDE.md 中添加 Figma 自定义规则避免 AI 从网上乱下素材markdownuser_custom_rulesMCP ServersFigma Dev Mode MCP RulesThe Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assetsIMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directlyIMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload/user_custom_rules 第二阶段前端交互开发2.1 登录云开发环境在 Claude Code 中输入text登录云开发浏览器会自动弹出授权页面选择云开发环境后完成登录。2.2 还原设计稿确保 Figma 设计稿处于选中状态然后输入提示词text根据figma 设计稿当前选中的将figma 设计稿转换为代码实现完成如下应用一个具有设计感的衣物购买电商小程序具有4个页面商城首页瀑布流展示 商品图片首页商品图片点击后跳转进入商品详情页可加入购物车购物车页面展示已挑选的商品项信息可点击购买个人中心页展示购物订单信息注意你从设计稿中读取 UI 细节时必须使用 get_code 方法当你完成前端的交互实现后必须和我确认没问题后再进行后端开发Claude Code 会调用 Figma MCP Server 的 get_code 工具读取设计稿细节然后生成小程序页面代码。高效技巧使用 引用特定文件进行精准修改text请帮我优化 pages/index/index.wxml 的商品卡片样式让图片更大一些️ 第三阶段后端逻辑开发3.1 编写云函数前端确认没问题后开始后端开发text现在我们来实现后端逻辑使用云函数来完成业务逻辑商品列表页数据读取可预先往数据库中写入一批商品数据商品详情数据读取商品下单生成订单订单列表查询支付的具体实现暂时空着Claude Code 会结合 CloudBase MCP 完成生成并部署 business 云函数自动创建 orders、products 数据表写入示例商品数据高级技巧使用 Plan 模式先确认计划再执行按 ShiftTab 两次切换至 Plan 模式输入需求AI 先给出执行计划确认无误后切回自动模式一次性完成 第四阶段微信支付集成4.1 安装支付云模版登录腾讯云开发平台进入模板中心安装“微信支付模版”。安装完成后配置商户信息微信 appId商户号 (mch_id)商户API证书序列号商户API证书私钥API V3密钥4.2 下载支付云函数到本地text请将 wxpayFunctions 云函数下载到本地 cloudfunctions 目录4.3 实现支付逻辑使用 Context7 MCP 获取最新文档textuse context7, 参照文档资料帮我实现小程序下单逻辑Claude Code 会自动调用 Context7 搜索支付相关文档修改云函数代码实现下单逻辑编写客户端发起支付的代码4.4 实现支付回调text为方便实际支付测试请将调用支付接口时的实际价格除以 1000 再调用请继续实现支付成功后微信的回调通知云函数可以参考该文档的第5步实现 https://tcb.cloud.tencent.com/cloud-template/detail?appNamewx-pay-v2回调函数wxpayOrderCallback会在用户支付成功后自动更新订单状态。 第五阶段自动化与优化5.1 创建自定义命令将常用操作封装成命令避免重复劳动创建 .claude/commands/deploy-all.mdmarkdowndescription: 一键部署所有云函数请执行以下操作检查所有云函数的代码是否有语法错误使用 CloudBase MCP 部署 business 云函数使用 CloudBase MCP 部署 wxpayFunctions 云函数部署完成后输出部署状态之后只需输入 /deploy-all 即可一键部署。5.2 配置权限预批准为了避免每次操作都弹确认框text/permissions在交互界面中预先批准常用的 CloudBase 工具权限。5.3 添加 Hook 自动格式化在项目 .claude/settings.json 中添加json{“hooks”: {“PostToolUse”: “eslint --fix ./src”}}这样每次 AI 改完代码都会自动运行格式化。 实战总结项目开发时间线MCP 工具链Figma CloudBase Context7 三位一体Plan 模式复杂任务先规划后执行避免方向错误上下文工程把关键规则固化到 CLAUDE.md实现“复利效应”避坑指南不要直接让 AI 动手先用 Plan 模式确认方案善用撤销改错了按 Esc Esc 一键回退多任务并行开多个终端同时处理不同模块定期提交每完成一个功能就 Git 提交便于回滚