（微信小程序）微信小程序-毕设级项目搭建-扫码点餐微信小程序（微

2020-06-06 本文已影响0人 Happy王子乐

作者（转载请注明出处）：Happy王子乐
个人GitHub（喜欢的还请点个Star、flow一下）：https://github.com/HappyWjl
相关文章：
（微信小程序）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
 （JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
 （vue管理系统）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
 （微信小程序）微信小程序-毕设级项目搭建-微信小程序商城（内含源码，微信小程序+java逻辑后台+vue管理系统）
（JAVA后端）微信小程序-毕设级项目搭建-微信小程序商城（内含源码，微信小程序+java逻辑后台+vue管理系统）
（vue管理系统）微信小程序-毕设级项目搭建-微信小程序商城（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
 （vue博客前台）vue系统-毕设级项目搭建-vue博客系统（内含源码，vue博客前台+java逻辑后台+vue管理系统）
（java逻辑后台）vue系统-毕设级项目搭建-vue博客系统（内含源码，vue博客前台+java逻辑后台+vue管理系统）
（vue管理系统）vue系统-毕设级项目搭建-vue博客系统（内含源码，vue博客前台+java逻辑后台+vue管理系统）

一、环境搭建

参考教程：https://blog.csdn.net/u012888052/article/details/79623229
另外，因为程序涉及微信登录功能，还需要自己注册个测试账号，相关地址：https://developers.weixin.qq.com/sandbox
里面的AppID、AppSecret，后面需要配置到java后台配置文件中。
此项目，代码样式为网上搜集，如有雷同，纯属巧合。

二、相关技术栈

css：略
javascript：略
weui：微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，各种官方组件，好用简洁。

三、项目简单介绍

当用户扫描小程序二维码后，即可进入小程序首页，目前此项目未发布到线上，所以还没有公开的二维码。
小程序首页

在这里插入图片描述

主页面提供美食轮播图，可在后台自定义图片；
下方展示了店铺名称、店铺地址信息，可在后台自定义文案；
用户进行授权时，会调用微信小程序api，获取openid等值，并通过后端接口将用户信息保存到数据库中。
点餐页

在这里插入图片描述

当点击中间“点餐”按钮后，进入到点餐页，通过左侧的列表，展示了菜品的各种类目。点击类目，可以看到右侧详细的商品列表了，包括商品名称、商品描述、库存、价格，这些信息都可以在管理后台进行修改。

在这里插入图片描述
当点击商品右下角的“➕”时，商品会加入到购物车
在这里插入图片描述

点击购物车图标时，可以显示购物车内商品详情，并且可以一键清空购物车。
确认订单页

在这里插入图片描述

确认订单页可以选择就餐人数，方便上菜时，提供适合的餐筷。

在这里插入图片描述
点击下方按钮时，可以选择支付方式，分别为：会员卡、微信支付、银行卡。
当选择完支付方式后，订单即为"已支付"状态。
我的页

在这里插入图片描述

我的页可以修改个人信息，查看刚刚下过的订单，查看发表过的评价，并且可以直接拨打商家电话。

在这里插入图片描述
点击头像时，修改信息页弹出，可自行修改用户信息。
在这里插入图片描述

点击上方状态菜单，可查看不同状态下的订单信息。

在这里插入图片描述
当上菜后，后台管理系统可以完结订单，用户端即显示为“待评价”状态。
在这里插入图片描述
评价订单可以输入文字，进行美味的描述。。
在这里插入图片描述
评价完成后，订单为真正的完成状态，此时可以查看评价内容
在这里插入图片描述
评价内容可以选择查看全部或者自己的评价内容