微信小程序开发实战，从0到1搭建咖啡点餐系统，用户端、商家后台和微信支付，打包上线扫码点餐

这门课用一个咖啡点餐小程序做实战项目，从零开始把商用小程序的开发流程走一遍。前端基于 uni-app，页面用 Trae 配合 Figma 生成，数据放在 uniCloud，支付接微信支付和 uni-pay 插件，最后打包上线，生成扫码点餐的小程序码

课程用到的技术栈

• uni-app 全家桶：uni-starter 和 uni-admin 搭前端与后台的基础架构，uni-id 做用户体系，uni-pay 接微信支付
• Trae 加 Figma：由设计稿生成首页和点餐页面，再手动微调界面细节
• 云开发：数据存在 uniCloud，图片走云存储
• 微信支付：配置小程序 ID 和密钥、注册微信支付商户平台、关联商户号、申请证书设置密钥、处理支付回调和异常

内容按开发顺序展开

课程从项目效果展示开始，先搭开发环境，再用 uni-starter 和 uni-admin 把基础架构立起来。有了架子之后进入页面部分，用 Trae 加 Figma 生成首页和点餐页基础页面，接着做前端页面与数据库的关联，完成咖啡分类管理、咖啡管理、咖啡详情页微调、购物弹窗和订单支付页面

支付和登录是另一条主线：配置小程序 ID 与密钥完成用户登录，让客户端拿到 uid，创建可以接入微信支付的小程序，注册微信支付商户平台，把小程序和商户号关联起来，申请证书设置密钥，再用 uni-pay 插件生成订单，处理支付回调和支付异常

用户端这边有客户端订单页面、我的订单、浏览过的商品本地缓存、我的页面和底部 tabbar 图标。商家后台做咖啡订单管理、隐藏菜单、实时监控订单生成和取餐。收尾阶段是打包上线、生成小程序码，以及把扫码点餐的桌号记录到订单里

需要什么前提

课程从搭建开发环境讲起，跟着做需要一台能装 Node 环境的电脑

登录和支付部分要在微信公众平台注册小程序账号，并在微信支付商户平台注册商户号。微信支付需要个体工商户或企业主体资质，个人主体的小程序可以开发调试，但开通不了微信支付

课程目录

• 00 项目效果展示
• 01 搭建开发环境
• 02 基础架构搭建（uni-starter、uni-admin）
• 03 Trae 加 Figma 生成前端页面
• 04 Trae 加 Figma 实战 - 生成首页
• 05 开发点餐页面的基础页面
• 06 前端页面关联数据库 - 咖啡分类管理
• 07 咖啡管理
• 08 如何微调界面效果 - 咖啡详情页面
• 09 购物弹窗
• 10 订单支付页面
• 11 配置小程序 ID 和小程序密钥 - 用户登录
• 12 客户端获取用户 uid - 订单支付前完成登录
• 13 创建可以接入微信支付的小程序
• 14 注册微信支付商户平台
• 15 小程序关联商户号
• 16 申请证书设置密钥
• 17 uni-pay 插件通过云对象获取 uid - 支付生成订单
• 18 支付回调和处理支付异常
• 19 云储存点餐页面功能完善
• 20 咖啡订单管理
• 21 开发隐藏菜单
• 22 创建 uni-id 实例 - 客户端订单页面
• 23 我的订单
• 24 本地缓存（LocalStorage）- 浏览过的商品
• 25 完善我的页面
• 26 tabbar 图标 - 完善页面底部导航栏
• 27 取餐
• 28 后台实时监控订单生成
• 29 项目发布（打包上线）
• 30 生成小程序码和扫码点餐
• 31 扫码点餐的桌号记录到订单

课程共 32 集视频，配套资源在本页获取