微信小程序 #项目笔记#

2024-06-23 00:35| 来源: 网络整理| 查看: 265

目录开发前准备项目展示项目分析项目初始化封装网络请求任务1 商家首页任务分析焦点图切换中间区域单击跳转到菜单列表底部商品展示任务2 菜单列表任务分析折扣信息区设计菜单列表布局请求数据实现菜单栏联动单品列表功能任务3 购物车任务分析设计底部购物车区域添加商品到购物车购物车界面添加商品数量减少商品数量清空购物车满减优惠跳转到订单确认页面任务4 订单确认任务分析订单信息备注功能实现支付功能支付成功返回订单列表任务5 订单详情任务分析取餐部分信息展示订单详情部分订单信息部分任务6 订单列表任务分析订单列表设计封装数据请求初始化页面下拉刷新功能上拉触底功能任务7 消费记录任务分析设计消费记录列表成果展示

随着微信小程序的迅速发展与普及，外卖、点餐小程序越来越多地被使用，它不像APP那样全面，有非常复杂的功能，而是提供了快速购物的通道，无需下载使用，不用安装APP，简化了APP的很多功能，之加入核心功能呢。

点餐系统小程序主要完成底部标签导航的设计、幻灯片轮播效果设计、菜单列表的效果显示、购物车功能实现、订单详情页面设计、订单列表设计、消费记录页面的设计。

开发前准备项目展示

在这里插入图片描述

项目分析

订餐系统任务需求：

底部标签导航切换。在“首页” 单击“开启点餐之旅”，跳转到菜单列表界面。在菜单列表页面中，单击“+”把所选商品加入购物车。如果购物车中商品数量为0时，单击购物车图标不会展开购物车列表，如果不为0时，单击购物车，可以操作购物车。在“订单列表”界面，查看订单状态，显示是否取餐。“消费记录”界面显示历史订单消费记录信息。项目初始化路径作用images存放图片pages/index首页pages/list菜单列表页面pages/order/list订单列表页面pages/order/detail订单详情页面pages/order/balance订单确认页面pages/record消费记录页面utils/fetch.js网络请求封装页面utils/common.wxss页面公有样式库app.js定义全局变量app.json配置pages、window、tabBarapp.wxss公共样式页面封装网络请求

为什么要封装网络请求？

本项目采用的网络请求的方式来获取数据。小程序官方文档提供了网络请求API，传递参数，对不同请求做不同处理。请求接口中有部分请求参数以及响应结果处理都很类似。 module.exports = function(path, data, method) { return new Promise((resolve, reject) => { wx.request({ url: '', // 接口地址 method: method, data: data, header: {'Content-Type': 'json' }, success: resolve, fail: function() {// 请求失败执行fail操作 reject() wx.showModal({ showCancel: false, title: '失败' }) } }) }) } // 引入fetch.js文件 const fetch = require('../../utils/fetch.js') // 接口请求 fetch(path).then((res) => { // 请求成功的操作 },() => { // 请求失败操作 }); 任务1 商家首页任务分析

首页内容任务分析：

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

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

index.wxml

【本文地址】

微信小程序 #项目笔记#

微信小程序 #项目笔记#

今日新闻

推荐新闻