微信小程序开发实战第8章-综合项目—点餐系统课件.pptx

1、第8章 综合项目-点餐系统开发前准备菜单列表订单确认订单列表商家首页购物车订单详情消费记录学习目标掌握掌握掌握掌握同步、异步存储数据用法12掌握数据接口的封装方法3掌握Promise的用法4熟悉点餐系统的功能设计目录点击查看本节相关知识点商家首页8.28.2点击查看本节相关知识点8.38.3菜单列表点击查看本节相关知识点开发前准备8.18.1点击查看本节相关知识点购物车8.48.4目录点击查看本节相关知识点订单详情8.68.6点击查看本节相关知识点8.78.7订单列表点击查看本节相关知识点订单确认8.58.5点击查看本节相关知识点消费记录8.88.8知识架构8.1 开发前准备开发前准备1项目展

2、示2项目分析3项目初始化4封装网络请求知识架构8.2【任务任务1】商家首页商家首页1任务分析2焦点图切换3中间区域单击跳转到菜单列表4底部商品展示知识架构8.3【任务任务2】菜单列表菜单列表1任务分析2折扣信息区3设计菜单列表布局4请求数据5实现菜单栏联动单品列表功能知识架构8.4【任务任务3】购物车购物车1任务分析2设计底部购物车区域3添加商品到购物车4购物车界面5增加商品数量知识架构8.4【任务任务3】购物车购物车6减少商品数量7清空购物车8满减优惠9跳转到订单确认页面知识架构8.5【任务任务4】订单确认订单确认1任务分析2订单信息3备注功能实现4支付功能5支付成功返回订单列表知识架构8.

3、6【任务任务5】订单详情订单详情1任务分析2取餐部分信息展示3订单详情部分4订单信息部分知识架构8.7【任务任务6】订单列表订单列表1任务分析2订单列表设计3封装数据请求4初始化页面5下拉刷新功能6上拉触底功能知识架构8.8【任务任务7】消费记录消费记录1任务分析2设计消费记录列表8.1 开发前准备 项目展示 点餐系统效果图展示效果图展示：首页菜单列表8.1 开发前准备 项目展示 加入购物车去支付8.1 开发前准备 项目分析 订餐系统任务需求任务需求：p 底部标签导航切换。p 在“首页”单击“开启点餐之旅”，跳转到菜单列表界面。p 在菜单列表页面中，单击“+”把所选商品加入购物车。p 如果购物

4、车中商品数量为0时，单击购物车图标不会展开购物车列表，如果不为0时，单击购物车，可以操作购物车。p 在“订单列表”界面，查看订单状态，显示是否取餐。p“消费记录”界面显示历史订单消费记录信息。8.1 开发前准备 项目初始化路径路径作用作用images存放图片pages/index首页pages/list菜单列表页面pages/order/list订单列表页面pages/order/detail订单详情页面pages/order/balance订单确认页面8.1 开发前准备 项目初始化路径路径作用作用pages/record消费记录页面utils/fetch.js网络请求封装页面utils/co

5、mmon.wxss页面公有样式库app.js定义全局变量app.json配置pages、window、tabBarapp.wxss公共样式页面8.1 开发前准备 封装网络请求 为什么要封装网络请求封装网络请求？p 本项目采用的网络请求的方式来获取数据。p 小程序官方文档提供了网络请求API，传递参数，对不同请求做不同处理。p 请求接口中有部分请求参数以及响应结果处理都很类似。8.1 开发前准备 封装网络请求module.exports=function(path,data,method)return new Promise(resolve,reject)=wx.request(url:,/接口

6、地址 method:method,data:data,header:Content-Type:json,success:resolve,fail:function()/请求失败执行fail操作 reject()wx.showModal(showCancel:false,title:失败)fetch.js页面8.1 开发前准备 封装网络请求/引入fetch.js文件const fetch=require(././utils/fetch.js)/接口请求fetch(path).then(res)=/请求成功的操作,()=/请求失败操作);请求接口页面8.2【任务1】商家首页 任务分析首页内容任务分

7、析任务分析：p 顶部商品的滑块容器区域。p 中间部分新品推送区域。p 底部商品列表展示区域。p 当进入到首页时开始请求接口，此时会出现弹窗，提示努力加载中；请求成功后，关闭弹窗，获取数据渲染首页。8.2【任务1】商家首页 焦点图切换在首页顶部区域，设置了焦点图切换的效果，图片资源通过请求接口获取数据。焦点图区域的布局：index.wxml8.2【任务1】商家首页 焦点图切换onLoad:function(options)wx.showLoading(title:努力加载中)fetch(food/index).then(res=/请求成功，关闭提示框 wx.hideLoading();/把接口返

8、回数据给listData this.setData(listData:res.data),()=/请求失败，关闭提示框，执行fetch.js文件中的fail方法 wx.hideLoading()index.jsonLoad()函数请求成功请求失败请求首页接口8.2【任务1】商家首页 焦点图切换const fetch=require(././utils/fetch.js)data:indicatorDots:true,/显示面板指示点 autoplay:true,/图片自动切换 interval:5000,/自动切换时间间隔 duration:1000/滑动动画时长 ,index.js引入fet

9、ch.jsdata:8.2【任务1】商家首页 中间区域单击跳转到菜单列表首页中间部分展示了手机点餐的推广banner图，单击“开启订餐之旅”跳转到菜单列表，引导顾客进行点餐，中间区域的布局：index.wxml8.2【任务1】商家首页 中间区域单击跳转到菜单列表 wx.navigateTo()实现跳转gostart:function()wx.navigateTo(url:./list/list)index.js8.2【任务1】商家首页 底部商品展示底部区域的布局：index.wxml8.3【任务2】菜单列表 任务分析 菜单列表任务分析任务分析：p 顶部折扣信息区域。p 左侧菜单栏区域。p 右侧

10、单品列表区域。p 菜单栏和单品间实现单击联动效果。8.3【任务2】菜单列表 折扣信息区展示商家的折扣活动信息或店铺优惠信息，折扣信息区页面结构布局：减满50元减10元（在线支付专享）list.wxml8.3【任务2】菜单列表 设计菜单列表布局pages/list/list.wxml文件，左侧菜单列表页面结构布局：item.name list.wxml8.3【任务2】菜单列表 设计菜单列表布局pages/list/list.wxml文件，右侧菜单列表页面结构布局：view list.wxml8.3【任务2】菜单列表 请求数据const fetch=require(././utils/fetch.

11、js)Page(data:loading:false /false，不显示底部操作菜单 onLoad:function(options)wx.showLoading(title:努力加载中)fetch(food/list).then(res=wx.hideLoading();this.setData(listData:res.data,loading:true),()=wx.hideLoading()list.js8.3【任务2】菜单列表 实现菜单栏联动单品列表功能Page(data:activeIndex:0,toView:a0,loading:false ,/左侧菜单项选择 selectM

12、enu:function(e)list.js8.4【任务3】购物车 任务分析购物车任务分析任务分析：p 当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态。p 当商品数量不为0时，在购物车图标的右上角显示商品数量，图标变为可单击状态。p 单击购物车可以展开里面的商品，此时可以添加或者减少商品数量，动态计算总金额。p 单击清空购物车，商品数量和商品总价都变为0，购物车图标切换到灰色，此时不可单击8.4【任务3】购物车 设计底部购物车区域菜单列表页面数据请求成功后，loading值设为true，显示底部购物车区域。当购物车里商品数量为0时，购物车图标为灰色，处于不可单击状态 list.w

13、xml8.4【任务3】购物车 添加商品到购物车单击图标“+”，把商品添加到购物车。Page(data:activeIndex:0,currentType:0,currentIndex:0,loading:false ,/加入购物车 addToCart:function(e)list.js8.4【任务3】购物车 购物车界面 5?cart-scroll-list:list.wxmlshowCartList:function()if(this.data.cartList.length!=0)this.setData(showCart:!this.data.showCart);list.js8.4【任

14、务3】购物车 增加商品数量Page(/购物车添加商品数量 addNumber:function(e)list.js8.4【任务3】购物车 减少商品数量Page(/购物车减少商品数量 decNumber:function(e)list.js8.4【任务3】购物车 清空购物车Page(clearCartList:function()this.setData(cartList:,/商品列表为空 showCart:false,/不展开购物车 sumMonney:0,cupNumber:0 )list.js8.4【任务3】购物车 满减优惠总价等于0，并且loading为真，显示“满25立减3元(手机点餐

15、专享)”。总价小于25元，并且总价不等于0，且loading为真，显示“满25立减3元,还差25-总计元,去凑单。view class=cut-bar wx:if=sumMonneylist.wxml8.4【任务3】购物车 跳转到订单确认页面const fetch=require(././utils/fetch.js)pages(/单击选好了，判断页面是否跳转 goBalance:function(e)list.js8.5【任务4】订单确认 任务分析订单确认页面任务分析任务分析：p 请求商品订单接口。p 获取到接口数据，渲染页面。8.5【任务4】订单确认 订单信息 0 balance.wxml

16、8.5【任务4】订单确认 订单信息const fetch=require(./././utils/fetch.js)Page(onLoad:function(options)/请求订单接口 fetch(food/order,:options.order_id).then(res=)order_idbalance.js8.5【任务4】订单确认 备注功能实现 notebalance.wxml8.5【任务4】订单确认 备注功能实现listenerTextarea:function(e)var note=e.detail.value /存储note值 wx.setStorageSync(note,no

17、te)balance.jsonLoad:function(options)/获取note值 var note=wx.getStorageSync(note)detail.js8.5【任务4】订单确认 支付功能 去支付balance.wxmlgotopay:function(e)fetch(food/pay,order_id:order_id,method).then(res)=)balance.js8.5【任务4】订单确认 支付成功返回订单列表App(/定义全局变量：是否刷新页面。为false不执行刷新 isReloadOrderList:false)app.jsonUnload:functi

18、on()var app=getApp();/支付成功之后调到订单页面，通知订单页刷新 app.isReloadOrderList=true wx.switchTab(url:/pages/order/list/list)order/detail/detail.js8.6【任务5】订单详情 任务分析订单详情页面任务分析任务分析：p 支付成功之后跳转到订单详情页面pages/order/detail/detail.wxml。p 发起网络情求，获取订单信息。p 信息包括取餐号、订单信息、订单号码、订单时间等。8.6【任务5】订单详情 取餐部分信息展示 取餐号 order/detail/detail.

19、wxml8.6【任务5】订单详情 订单详情部分 订单详情 order/detail/detail.wxml8.6【任务5】订单详情 订单信息部分 .order/detail/detail.wxml8.7【任务6】订单列表 任务分析订单列表页面任务分析任务分析：p pages/order/list/list.wxml文件为tabBar页面，两种打开方式。p 直接切换底部标签导航进入订单页面，此时不执行页面刷新。p 在订单支付成功之后，单击左上角返回也可以回到订单列表页面，此时需要执行页面刷新。8.7【任务6】订单列表 订单列表设计 下单时间 到底啦order/list/list.wxml8.7【

20、任务6】订单列表 封装数据情求const fetch=require(./././utils/fetch)Page(data:orderList:,/下拉触底时追加数据 is_last:false /数据是否加载完毕 ,last_id:0,/加载文件的标识 /定义请求方法，封装请求的公共部分（3个参数：数据、成功、失败）loadData:function(data,success,fail)data.row=10 /每一页10条数据 fetch(food/orderlist,data).then(res)=)order/list/list.js8.7【任务6】订单列表 初始化页面onShow:

21、function()var app=getApp();/获取到并判断全局变量isReloadOrderList，是否为true，为true就刷新 if(app.isReloadOrderList)this.onLoad()/刷新完成之后，把isReloadOrderList的值设为false app.isReloadOrderList=false order/list/list.js获取全局变量isReloadOrderList8.7【任务6】订单列表 初始化页面onLoad:function(options)wx.showLoading(title:加载中.)/调用loadData()方法

22、this.loadData(last_id:0 ,(data)=this.setData(orderList:data.list,()=wx.hideLoading()/请求失败关闭加载框 )order/list/list.jsonLoad()8.7【任务6】订单列表 初始化页面 /跳转到订单详情页 orderdetail:function(e)/获取订单号 var index=e.currentTarget.dataset.postid wx.navigateTo(url:./detail/detail?order_id=+index )order/list/list.js8.7【任务6】订

23、单列表 下拉刷新功能onPullDownRefresh:function()wx.showNavigationBarLoading();/显示顶部刷新图标 this.loadData(last_id:0 ,data=this.setData(orderList:data.list ,()=wx.hideNavigationBarLoading();/隐藏导航条栏加载框 )order/list/list.js8.7【任务6】订单列表 上拉触底功能onReachBottom:function()/判断数据是否到底，如果is_last为true到底了，则不执行请求 if(this.data.is_l

24、ast)return wx.showLoading(title:玩命加载中)this.loadData(last_id:this.last_id,(data)=var orderList=this.data.orderList for(var i=0;i wx.hideLoading()/隐藏加载框 )order/list/list.js8.8【任务7】消费记录 任务分析消费记录页面任务分析任务分析：p pages/record/record.wxml文件为tabBar页面p 发起网络情求，获取消费记录信息。p 展示用户的个人历史订单信息。p 包括用户的下单时间、商品总价钱。8.8【任务7】消

25、费记录 设计消费记录列表消费记录 items.date items.time￥items.summoney record/record.wxml8.8【任务7】消费记录 设计消费记录列表const fetch=require(././utils/fetch.js)Page(onLoad:function(options)wx.showLoading(title:努力加载中)wx.setNavigationBarTitle(title:消费记录)/设置小程序导航栏标题文字内容 /请求消费记录接口 fetch(food/record).then(res=wx.hideLoading()/关闭加载信息 this.setData(listData:res.data)record/record.js本章总结点餐系统小程序主要完成底部标签导航的设计、幻灯片轮播效果设计、菜单列表的效果显示、购物车功能实现、订单详情页面设计、订单列表设计、消费记录页面的设计。通过对本章的学习，读者需要重点掌握如何设计一个完整的小程序项目，熟悉项目的开发流程，学会如何在开发中运用所学技术解决实际问题。