餐饮店点餐小程序源码带教程 微信云开发无需服务器（含顾客 + 管理员双端功能）

一个基于微信云开发的餐饮店点餐小程序（含顾客和管理员功能）

背景：市面上不缺点餐系统，但是贵？不好用？所以开发了这款非常适合餐饮店的点餐小程序。

功能亮度：一键生成桌码、打印菜单小票（不需要人工手写菜单）

顾客功能

1. 在线点餐（支持堂食和打包）

✅ 菜品分类浏览，清晰直观
✅ 购物车管理，方便快捷
✅ 微信支付、余额支付
✅ 免单机会使用，优惠多多
2. 会员充值（充值68，免单一次，后续可以自己改）

✅ 充值即成为会员
✅ 多种充值套餐可选，灵活配置
3. 订单管理

✅ 查看点餐订单
✅ 查看充值记录，一目了然
4. 个人中心

✅ 余额查询，实时显示
✅ 免单次数显示

 

代码目录说明:

orderFood-wxCloud/
├── cloudfunctions/              # 云函数目录
│   ├── login/                  # 用户登录，获取openid
│   ├── getCategory/            # 获取菜品分类
│   ├── doBuy/                  # 执行购买/下单操作
│   ├── pay/                    # 微信支付相关
│   ├── pay_success/            # 支付成功回调
│   ├── get_code/               # 生成小程序码
│   ├── getPhoneNumber/         # 获取手机号
│   ├── getUserList/            # 获取用户列表（管理后台用）
│   ├── printBack/              # 打印机回调处理
│   └── printManage/            # 打印机管理
│
├── miniprogram/                # 小程序前端目录
│   ├── pages/                  # 页面目录
│   │   ├── index/             # 首页（点餐页面）
│   │   ├── recharge/          # 充值页面
│   │   ├── myorder/           # 我的订单页面
│   │   ├── myhome/            # 个人中心页面
│   │   ├── settle/            # 结算页面
│   │   └── admin/             # 管理后台目录
│   │       ├── admin.js       # 管理员首页
│   │       ├── dish/          # 菜品管理
│   │       ├── user/          # 会员管理
│   │       ├── order/         # 订单管理
│   │       ├── rechargeOptions/ # 充值套餐管理
│   │       ├── notice/        # 公告管理
│   │       ├── shopInfo/      # 店铺设置
│   │       ├── tableCode/     # 桌码管理
│   │       └── printer/       # 打印机管理
│   ├── components/            # 组件目录
│   │   ├── avatarNicknameModal/ # 头像昵称授权组件
│   │   ├── colorui/           # ColorUI样式库
│   │   └── painter/           # 海报生成组件
│   ├── images/                # 图片资源目录
│   ├── utils/                 # 工具函数目录
│   ├── vant/                  # Vant Weapp UI组件库
│   ├── app.js                 # 小程序入口文件
│   ├── app.json               # 小程序配置文件
│   └── app.wxss               # 小程序全局样式
│
├── project.config.json        # 项目配置文件

 

 

 

 

 

 

 

 

 

 教程：

1 配置云开发环境:

1.在微信开发者工具中打开项目
2.开通云开发，创建云环境
3.获取云环境ID（在云开发控制台顶部查看）
3. 修改配置文件
修改小程序入口文件miniprogram/app.js（第18行）：

wx.cloud.init({
  env: '你的云环境ID',  // 替换为你的实际环境ID
  traceUser: true,
})

修改所有云函数配置文件（在 cloudfunctions 目录下的各个云函数 index.js 文件中）：
将所有 '填写你的环境ID' 替换为你的实际云环境ID。
需要修改的云函数：
login/index.js
getCategory/index.js
doBuy/index.js
pay/index.js （这个微信支付云函数还需要改subMchId商户号改成自己的商户号ID）
pay_success/index.js
get_code/index.js
getPhoneNumber/index.js
getUserList/index.js
printBack/index.js
printManage/index.js (这个打印机管理员云函数还需要改appid、appsecret，访问：https://open.trenditiot.com 可申请打印机 AppID、appsecret，打印小票机也是找这家买)

2 创建数据库集合

在云开发控制台 → 数据库中创建以下集合：
user - 用户表
dish - 菜品表
dishCategory - 菜单分类表
notice - 公告通知表
order - 订单表（点餐订单和充值订单）
printer - 打印机表
order - 订单表
rechargeOptions - 充值套餐表
freeBuy - 免单记录表
shopInfo - 店铺表
admin - 管理员表
tableCode - 桌码表
提示：所有集合的权限都设置为：自定义安全规则：

{
  "read": true,
  "write": true
}

3 上传云函数

在微信开发者工具中，右键点击每个云函数文件夹，选择：
上传并部署：云端安装依赖
需要上传的云函数：
login - 用户登录
getCategory - 获取菜品分类
doBuy - 执行购买/下单
pay - 支付相关
pay_success - 支付成功回调
get_code - 生成小程序码
getPhoneNumber - 获取手机号
getUserList - 获取用户列表
printBack - 打印机回调处理
printManage - 打印机管理

4 修改生成桌码的背景图

把images文件夹里的bg.png图片上传到云存储，得到url，把/pages/admin/tableCode/tableCode.js里面的bgImg变量的值替换为url
const bgImg = "把images文件夹的bg.png上传到云存储，得到url。你的背景图片URL放这里"

5 删除images/githubImg文件夹，避免代码包过大，没法上传代码

6 运行项目

1.在微信开发者工具中点击"编译"按钮
2.小程序会自动运行并显示在模拟器中

 

7. 进入管理后台

1.点击底部"我的"标签，进入个人中心
2.在页面右下角空白区域连续快速点击 5 次（1秒内完成）
3.首次使用会弹出"设置管理员密码"弹窗，输入至少6位密码
4.设置成功后自动跳转到管理后台
5.在管理后台中可以：
设置店铺信息
添加菜品分类和菜品
设置充值套餐
管理订单和会员
打印机管理、公告管理功能

 

其他说明:

1、技术栈
微信云开发（云函数 + 云数据库）
UI框架：Vant Weapp + ColorUI
2、微信支付如何授权
点击“云开发”进入云开发控制台-点击“设置”-点击“其他设置”-点击“授权”，商户号管理员收到授权消息-点击授权即可。
3、成本
小程序认证费：30块
打印小票机:259块左右
成本不到300块就拥有自己的点餐小程序。