综合项目-点餐系统

8.1 开发前准备
- 8.1.1 项目展示
- 8.1.2 项目分析
- 8.1.3 项目初始化
- 8.1.4 封装网络请求
8.2 【任务1】商家首页
- 8.2.1 任务分析
- 8.2.2 焦点图切换
- 8.2.3 中间区域单击跳转到菜单列表
- 8.2.4 底部商品展示
8.3 【任务2】菜单列表
- 8.3.1 任务分析
- 8.3.2 折扣信息区
- 8.3.3 设计菜单列表布局
- 8.3.4 请求数据
- 8.3.5 实现菜单栏联动单品列表功能
8.4 【任务3】购物车
- 8.4.1 任务分析
- 8.4.2 设计底部购物车区域
- 8.4.3 添加商品到购物车
- 8.4.4 购物车界面
- 8.4.5 增加商品数量
- 8.4.6 减少商品数量
- 8.4.7 清空购物车
- 8.4.8 满减优惠
- 8.4.9 跳转到订单确认页面
8.5 【任务4】订单确认
- 8.5.1 任务分析
- 8.5.2 订单信息
- 8.5.3 备注功能实现
- 8.5.4 支付功能
- 8.5.5 支付成功返回订单列表
8.6 【任务5】订单详情
- 8.6.1 任务分析
- 8.6.2 取餐部分信息展示
- 8.6.3 订单详情部分
- 8.6.4 订单信息部分
8.7 【任务6】订单列表
- 8.7.1 任务分析
- 8.7.2 订单列表设计
- 8.7.3 封装数据请求
- 8.7.4 初始化页面
- 8.7.5 下拉刷新功能
- 8.7.6 上拉触底功能
8.8 【任务7】消费记录
- 8.8.1 任务分析
- 8.8.2 设计消费记录列表
总结

8.1 开发前准备

8.1.1 项目展示

点餐系统效果图展示：

8.1.2 项目分析

订餐系统任务需求：

底部标签导航切换。
在“首页” 单击“开启点餐之旅”，跳转到菜单列表界面。
在菜单列表页面中，单击“+”把所选商品加入购物车。
如果购物车中商品数量为0时，单击购物车图标不会展开购物车列表，如果不为0时，单击购物车，可以操作购物车。
在“订单列表”界面，查看订单状态，显示是否取餐。
“消费记录”界面显示历史订单消费记录信息。

8.1.3 项目初始化

8.1.4 封装网络请求

为什么要封装网络请求？

本项目采用的网络请求的方式来获取数据。
小程序官方文档提供了网络请求API，传递参数，对不同请求做不同处理。
请求接口中有部分请求参数以及响应结果处理都很类似。

8.2 【任务1】商家首页

8.2.1 任务分析

首页内容任务分析：

顶部商品的滑块容器区域。
中间部分新品推送区域。
底部商品列表展示区域。
当进入到首页时开始请求接口，此时会出现弹窗，提示努力加载中；请求成功后，关闭弹窗，获取数据渲染首页。

8.2.2 焦点图切换

在首页顶部区域，设置了焦点图切换的效果，图片资源通过请求接口获取数据。焦点图区域的布局：

8.2.3 中间区域单击跳转到菜单列表

首页中间部分展示了手机点餐的推广banner图，单击“开启订餐之旅”跳转到菜单列表，引导顾客进行点餐，中间区域的布局：

8.2.4 底部商品展示

底部区域的布局：

8.3 【任务2】菜单列表

8.3.1 任务分析

菜单列表任务分析：

顶部折扣信息区域。
左侧菜单栏区域。
右侧单品列表区域。
菜单栏和单品间实现单击联动效果。

8.3.2 折扣信息区

展示商家的折扣活动信息或店铺优惠信息，折扣信息区页面结构布局：

8.3.3 设计菜单列表布局

pages/list/list.wxml文件，左侧菜单列表页面结构布局：

pages/list/list.wxml文件，右侧菜单列表页面结构布局：

8.3.4 请求数据

8.3.5 实现菜单栏联动单品列表功能

8.4 【任务3】购物车

8.4.1 任务分析

购物车任务分析：

当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态。
当商品数量不为0时，在购物车图标的右上角显示商品数量，图标变为可单击状态。
单击购物车可以展开里面的商品，此时可以添加或者减少商品数量，动态计算总金额。
单击清空购物车，商品数量和商品总价都变为0，购物车图标切换到灰色，此时不可单击

8.4.2 设计底部购物车区域

菜单列表页面数据请求成功后，loading值设为true，显示底部购物车区域。当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态

8.4.3 添加商品到购物车

单击图标“+”，把商品添加到购物车。

8.4.4 购物车界面

8.4.5 增加商品数量

8.4.6 减少商品数量

8.4.7 清空购物车

8.4.8 满减优惠

总价等于0，并且loading为真，显示“满25立减3元(手机点餐专享)”。总价小于25元，并且总价不等于0，且loading为真，显示 “满25立减3元,还差{{25-总计}}元,去凑单。

8.4.9 跳转到订单确认页面

8.5 【任务4】订单确认

8.5.1 任务分析

订单确认页面任务分析：

请求商品订单接口。
获取到接口数据，渲染页面。

8.5.2 订单信息

8.5.3 备注功能实现

8.5.4 支付功能

8.5.5 支付成功返回订单列表

8.6 【任务5】订单详情

8.6.1 任务分析

订单详情页面任务分析：

支付成功之后跳转到订单详情页面pages/order/detail/detail.wxml。
发起网络请求，获取订单信息。
信息包括取餐号、订单信息、订单号码、订单时间等。

8.6.2 取餐部分信息展示

8.6.3 订单详情部分

8.6.4 订单信息部分

8.7 【任务6】订单列表

8.7.1 任务分析

订单列表页面任务分析：

pages/order/list/list.wxml文件为tabBar页面，两种打开方式。
直接切换底部标签导航进入订单页面，此时不执行页面刷新。
在订单支付成功之后，单击左上角返回也可以回到订单列表页面，此时需要执行页面刷新。

8.7.2 订单列表设计

8.7.3 封装数据请求

8.7.4 初始化页面

8.7.5 下拉刷新功能

8.7.6 上拉触底功能

8.8 【任务7】消费记录

8.8.1 任务分析

消费记录页面任务分析：

pages/record/record.wxml文件为tabBar页面
发起网络请求，获取消费记录信息。
展示用户的个人历史订单信息。
包括用户的下单时间、商品总价钱。

8.8.2 设计消费记录列表

总结

点餐系统小程序主要完成底部标签导航的设计、幻灯片轮播效果设计、菜单列表的效果显示、购物车功能实现、订单详情页面设计、订单列表设计、消费记录页面的设计。通过对本章的学习，读者需要重点掌握如何设计一个完整的小程序项目，熟悉项目的开发流程，学会如何在开发中运用所学技术解决实际问题。

微信小程序开发 | 综合项目-点餐系统相关推荐

详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
基于微信小程序的智能推荐点餐系统
摘要在社会高速发展的过程中,计算机系统在社会生产的过程中大量应用,并且随着相关技术的高速发展,这一过程在不断加速.因此,将智能推荐点餐系统管理与当前的网络相结合,利用计算机构建以微信小程序为基础 ...
微信小程序开发工具项目创建步骤
账号申请后台小程序信息完善安装开发工具IDE 小程序项目搭建项目编译真机预览调试小程序开发前准备: ①申请账号 ②安装开发工具账号申请进入小程序注册页根据指引填写信息和提交相应的资料, ...
微信小程序开发15 项目实战基于云开发开发一个在线商城小程序
在学完前 4 个模块之后,我相信你会对微信小程序的开发有一个全新的认识.在前面 3 个模块中,俊鹏分别从微信小程序内在的运行原理,小程序工程化开发以及具体实践层面,深度讲解了微信小程序开发所必要的知识 ...
600多个微信小程序源码_点餐系统的开发，java后台+微信小程序实现完整的餐厅点餐系统。微信扫码点餐小程序源码讲解...
今天来给大家讲解一个完整的微信扫码点餐项目.java后台+微信小程序实现点餐系统. 后台技术选型: JDK8 MySQL(需要5.6以上) Spring-boot Spring-data-jpa Lo ...
基于微信小程序的火锅店点餐系统小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
微信小程序+VUE食堂订餐点餐系统(含源码+论文+答辩PPT等)
项目功能简介: 该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离的形式使用Java+VUE 微信小程 ...
基于微信小程序的智能推荐点餐系统的设计与实现.pdf
近年来,互联网行业飞速发展,许多传统行业开始与互联网结合并通过数字化的改造.转型与升级创造出新的发展生态.尤其在国人最关注的"吃"的方面,餐饮行业通过将点餐.结算等一系列的服务流程 ...
微信小程序开发（随机课堂点名系统）
前言随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端.然而在2017年"微信之父"张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的 ...

微信小程序开发 | 综合项目-点餐系统