一个基于微信云开发的餐饮店点餐小程序(含顾客和管理员功能)免费开源!喜欢的记得给星星!

一、项目背景:

市面上不缺点餐系统,但是贵?不好用?所以我开发了这款非常适合餐饮店的点餐小程序。功能亮度:一键生成桌码、打印菜单小票(不需要人工手写菜单)。

【下载地址】【程序源代码】点餐微信小程序(开源源码)https://pan.minnai.net/s.php?code=C16jBo

二、效果预览:

三、项目功能:

顾客功能:

1. 在线点餐(支持堂食和打包)✅ 菜品分类浏览,清晰直观✅ 购物车管理,方便快捷✅ 微信支付、余额支付✅ 免单机会使用,优惠多多

2. 会员充值(充值68,免单一次,后续可以自己改)✅ 充值即成为会员✅ 多种充值套餐可选,灵活配置

3. 订单管理✅ 查看点餐订单✅ 查看充值记录,一目了然

4. 个人中心✅ 余额查询,实时显示✅ 免单次数显示🛠️ 管理员功能数据管理✅ 菜品管理 - 添加、编辑、删除菜品,设置价格、图片、描述等✅ 菜品分类管理 - 管理菜品分类,支持排序✅ 会员管理 - 查看会员列表,修改会员余额和免单次数✅ 订单管理 - 查看所有订单✅ 充值选项管理 - 设置充值套餐和赠送规则✅ 公告管理 - 设置小程序公告信息,发布优惠活动系统设置✅ 店铺设置 - 配置店铺基本信息(名称等)✅ 桌码管理 - 管理桌号信息,生成桌码海报(如使用桌号功能)✅ 打印机管理 - 配置小票打印机,支持自动打印订单✅ 修改密码 - 修改管理员登录密码

5.进入管理员界面的方法💡:在"我的"页面右下角连续点击5次即可进入管理后台

代码目录说明

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. 获取项目代码
2. 配置云开发环境在微信开发者工具中打开项目开通云开发,创建云环境获取云环境ID(在云开发控制台顶部查看)

3. 修改配置文件修改小程序入口文件

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

修改所有云函数配置文件(在 cloudfunctions 目录下的各个云函数 index.js 文件中):
将所有 '填写你的环境ID' 替换为你的实际云环境ID。需要修改的云函数:

login/index.jsgetCategory/index.js

doBuy/index.jspay/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,打印小票机也是找这家买)4. 创建数据库集合在云开发控制台 

数据库中创建以下集合:
user - 用户表
dish - 菜品表
dishCategory - 菜单分类表
notice - 公告通知表
order - 订单表(点餐订单和充值订单)
printer - 打印机表
order - 订单表
rechargeOptions - 充值套餐表
freeBuy - 免单记录表
shopInfo - 店铺表
admin - 管理员表
tableCode - 桌码表

💡 提示:所有集合的权限都设置为:自定义安全规则:

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


5. 上传云函数在微信开发者工具中,右键点击每个云函数文件夹,

选择上传并部署:

云端安装依赖需要上传的云函数:
login - 用户登录
getCategory - 获取菜品分类
doBuy - 执行购买/下单
pay - 支付相关
pay_success - 支付成功回调
get_code - 生成小程序码
getPhoneNumber - 获取手机号
getUserList - 获取用户列表
rintBack - 打印机回调处理
printManage - 打印机管理
6. 修改生成桌码的背景图把images文件夹里的bg.png图片上传到云存储,得到url

把/pages/admin/tableCode/tableCode.js

里面的bgImg变量的值替换为urlconst bgImg = "把images文件夹的bg.png上传到云存储,得到url,你的背景图片URL放这里


7. 删除images/githubImg文件夹,避免代码包过大,没法上传代码

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

9. 进入管理后台点击底部"我的"标签,进入个人中心在页面右下角空白区域连续快速点击 5 次(1秒内完成)

首次使用会弹出"设置管理员密码"弹窗,输入至少6位密码设置成功后自动跳转到管理后台

在管理后台中可以:设置店铺信息添加菜品分类和菜品设置充值套餐管理订单和会员打印机管理、公告管理功能。

五、其他说明:

1、技术栈微信云开发(云函数 + 云数据库)UI框架:Vant Weapp + ColorUI

2、微信支付如何授权点击“云开发”进入云开发控制台-点击“设置”-点击“其他设置”-点击“授权”,商户号管理员收到授权消息-点击授权即可。

【下载地址】pan.minnai.net/s.php?code=ohXbhH

【写作说明】以上文章属于此号原创所有,如需转载请注明出处。

【免责声明】本号不是广告商,文章发布源代码和文章均来源于各类开源网站社区或者是小编在项目中、学习中整理的一些实例项目。主要目的是将开源代码分享给喜欢编程、有梦想的程序员,希望能帮助到你们与他们共同成长。其中用户产生的一些自愿下载、打赏或者付费行为,原则与平台没有直接关系。如果涉及开源程序侵犯到原作者相关权益,可联系小编进行相关处理。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐