mpvue实战美团外卖点餐小程序
mpvue-meituan
mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全按照企业开发架构搭建而成。结合了原生小程序的开发能力和Vue能力,使小程序开发起来更加便捷高效,项目使用了比较流行的Vuex框架来作为全局的状态数据管理,使数据交互更加的便捷,结合了sass的使用让写Css样式更加的得心应手。目前市面上有很多使用mpvue开发的示例Demo,但是那些示例Demo都过于简单,没有提供一套系统的框架结构,借鉴的意义不是很大。所以作者就开源了一个企业级框架开发的小程序供大家学习参考,总之是一个极力推荐学习的小程序实战项目。欢迎小伙伴们点赞, star 先谢过啦!
**开源项目Git仓库地址:mpvue-meituan ** 进来了就点个赞再走呗
目录
- 项目简介
- 主要功能
- 预览效果图
- 安装调试
- API数据来源
- 技术要点
- 核心组件库
- 开发中遇到的坑
- 待完成功能
- 待优化bug
- 目录结构
- 总结
项目简介
mpvue-meituan 是一款使用mpvue开发的小程序,完全仿制美团官方外卖小程序。目前市面上大部分的小程序开发还是使用微信原生的开发能力,原生的开发能力约束太多,导致小程序开发成本变高。于是市面上衍生出不少小程序开发框架,其中最为流行的有下面三个框架:
wepy
taro
mpvue
。这三个框架出自不同的大厂,之前不太了解的小伙伴们可以自行查阅资料。本项目主要介绍如何使用vue来快速开发一款复杂的小程序项目。
主要功能(20+页面)
- 首页Tab
- 首页商家列表
- 选择收货地址列表
- 选择城市
- 商品搜索列表
- 分类列表
- 邀请好友领红包
- 添加购物车页面
- 食品档案
- 订单Tab
- 订单列表
- 提交订单
- 商品备注
- 订单详情
- 商品评论
- 我的Tab
- 我的页面
- 美团红包页面
- 无效红包页面
- 代金券页面
- 无效代金券列表
- 收货地址列表
- 新增收货地址
- 帮助反馈
- 协议说明
- 待补充
预览效果图
安装调试
# install dependencies
npm install# serve with hot reload at localhost:8080
npm run dev# build for production with minification
npm run build# build for production and view the bundle analyzer report
npm run build --report
API数据来源
mpvue-meituan 项目的数据来源目前均来自美团外卖小程序抓包数据,将抓包数据存储为本地JSON,然后工程访问本地JSON数据。由于美团外卖小程序属于美团正式线上产品,故不能直接访问其真实API,使用本地JSON一样能实现绝大部分需求,少数需要数据交互的需求自己mock数据即可。
技术要点
- 微信原生小程序开发能力
- mpvue开发小程序能力
- Vue开发能力
- less,sass 等css编译器用法
- 小程序开发基础框架结构搭建
- 小程序网络层封装
- Vuex全局状态管理框架的使用
- 小程序,vue组件化开发技巧
- 小程序中iconFont使用技巧
- 使用canvas绘制小程序分享海报技巧
- 待补充
核心组件库
- mpvue
- vuex
- lodash
- mpvue-wxparse
- minapp-api-promise
- 待补充
开发中遇到的坑
待补充
待完成功能
- 选择城市列表
- 分类筛选功能
- 购物车页面完善优化
- 发表评论功能
- 提交订单页面完善优化
- canvas绘制分享海报
- vuex状态管理使用
- 常用工具类封装
- 组件化使用
- sass环境的搭建及使用
- 待补充
目录结构
.
├── App.vue
├── action
│ └── action.js
├── app.json
├── assets
│ ├── global.scss
│ └── iconfont.less
├── components
│ ├── card.vue
│ └── sep-line.vue
├── constants
│ ├── commonType.js
│ ├── errorCodeMap.js
│ ├── hostConfig.js
│ ├── pathConfig.js
│ └── responseCode.js
├── main.js
├── middlewares
│ └── index.js
├── network
│ ├── cache
│ │ └── cache.js
│ └── request
│ ├── HttpExtension.js
│ └── HttpRequest.js
├── pages
│ ├── addAddress
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── addressList
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── categoryList
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── citySearch
│ │ ├── index.vue
│ │ └── main.js
│ ├── citys
│ │ ├── index.vue
│ │ └── main.js
│ ├── commentList
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── couponList
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── dicedActivity
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── expiredCoupon
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── expiredRedPacket
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── feedback
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── home
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── index
│ │ ├── index.vue
│ │ └── main.js
│ ├── me
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── orderDetail
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── orderList
│ │ ├── data.js
│ │ ├── index.vue
│ │ └── main.js
│ ├── pickProtocol
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── protocol
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── redPacket
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── remark
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── searchList
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── selectAddress
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── share
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ ├── shoppingCart
│ │ ├── data.js
│ │ ├── index.vue
│ │ ├── main.js
│ │ └── main.json
│ └── submitOrder
│ ├── data.js
│ ├── index.vue
│ ├── main.js
│ └── main.json
├── store
│ ├── index.js
│ ├── modules
│ │ ├── shoppingCart.js
│ │ └── submitOrder.js
│ └── mutations-type.js
└── utils├── arrayExtension.js├── bus.js├── deepClone.js├── deviceInfo.js├── formatTime.js├── index.js├── mta_analysis.js├── regex.js├── stringExtension.js├── style.js├── toast.js└── wxapi.js37 directories, 117 files
总结
mpvue-meituan 项目是作者大约使用了2周时间开源的一款小程序项目,项目中基本涵盖了企业开发中常用的技术要点,非常适合想学习小程序开发的小伙伴们参考学习。相信此项目能给小伙伴们带来不一样的收获。大家也可以加作者的mpvue小程序交流群交流学习(
QQ群号:694979037
)。当然,如果老铁们认为作者的开源项目mpvue-meituan还不错,也请点个赞,给个
star
支持一下吧 ??? ,也衷心的欢迎小伙伴们提些宝贵的意见和建议。
欢迎小伙伴们扫码进群
**开源项目Git仓库地址:mpvue-meituan ** 进来了就点个赞再走呗
更多文章
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
- 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注,多多点赞
- 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
mpvue实战美团外卖点餐小程序相关推荐
- mpvue开发美团外卖点餐小程序
mpvue-meituan mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全按照企业开发架构搭建而成.结合了原生小程序的 ...
- php微信外卖多店点餐小程序,微信外卖点餐小程序怎么制作?按这个步骤来就行...
秋分已过,气温早已逐渐降温了,针对许多宅男宅女而言,又来到一个醒来靠胆量外出靠吸引力的季节,那么微信点餐就不可或缺了,因此,做餐馆的小伙伴们使用点餐小程序的话,就能吸引到大批的用户.那么微信外卖点餐小 ...
- 基于微信小程序的外卖点餐小程序
文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
- 扫码点餐系统源码 外卖点餐小程序源码 点餐APP全套源码
1. 开发语言:JAVA 2. 数据库:MySQL 3. 原生小程序 4. Sass 模式 5. 带调试视频 门店独立管理后台,可打包微信小程序,H5,APP,LBS定位附近门店,可导航前往下单,订单 ...
- 软件工程毕业设计课题(59)微信小程序毕业设计JAVA外卖点餐小程序系统设计与实现
基于微信小程序的毕业设计题目(5)php点菜外卖小程序(含开题报告.任务书.中期报告.答辩PPT.论文模板) 项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序外卖点菜系统,前台用 ...
- 基于微信奶茶外卖点餐小程序系统设计与实现 开题报告
毕业论文 基于微信小程序的奶茶外卖商城系统 开题报告 学 院: 专 业: 年 级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书 姓 名 ...
- 前后端分离项目,vue+uni-app+php+mysql外卖点餐小程序系统设计与实现
功能介绍 [后台管理员功能] 会员列表:查看所有注册会员信息,支持删除 录入资讯:录入资讯标题.内容等信息 管理资讯:查看已录入资讯列表,支持删除和修改 广告设置:上传图片和设置小程序首页轮播图广告地 ...
- 前后端分离项目,vue+uni-app+php+mysql外卖点餐小程序系统 开题报告
毕业论文 基于Vue.js外卖点餐小程序系统 开题报告 学 院: 专 业: 年 级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书 姓 名 ...
- SSM基于微信小程序的外卖点餐系统 毕业设计-附源码2711704
基于微信小程序的外卖点餐系统的设计与实现 摘要 立足于当下餐饮行业现有的点餐模式,分析传统APP点餐的运作流程,结合微信小程序的特点设计新型的外卖点餐系统.近几年,人们生活水平日益提升,但工作强度和压 ...
最新文章
- DNS部署(四)之lvs+keepalived+bind架构高可用负载均衡DNS系统
- go swagger
- python查看方法作用_python学习笔记1,新手小白也能看得懂
- 二十三、前端必学Node.js入门
- ElasticSearch搜索引擎: 内存分析与设置
- python 覆盖list_【Python妙招】gt;gt;gt;看腻了能不能换成别的啊……当然可以啦:)...
- Android 自动换行流式布局的RadioGroup
- 3.SpringBoot+Redis
- 今天我的天空瞬间明亮了
- 剑指offer.删除链表中重复的节点
- linux打印jvm内存堆栈_jvm内存堆栈监控之jmap篇
- SQL数据库连接语句
- 计算机实训大纲,计算机专业实训大纲
- 基于python的学生信息管理系统文献综述_学生信息管理系统----文献综述
- 关于总时差和自由时差的作用及理由
- windows 10 安装jira进行开发管理
- java、class、jar、aar、dex、smali、apk之间的关系
- netkeeper代理服务器未响应,使用netkeeper创翼网速慢解决方案(C13)
- ISO8583报文128个域说明
- 机器视觉(七):图像分割
热门文章
- 算法12---约瑟夫环问题
- linux 动态密码,DKEY for Linux/UNIX
- php验证码大全(实例分享),php图片验证码的例子
- 【阿里面试】C++多态和虚函数
- ubuntu下Qt编程qmake的使用详解
- java版通过轨道6根数实现计算出经纬度坐标
- YaCy—基于P2P的分布式开源搜索引擎
- PHP获取当前页面完整URL地址
- 笨办法学python3进阶篇_笨办法学Python 3 进阶篇
- 操作无法完成:- 创建/更新: 未设置强制字段.- 删除: 另一个模型要求删除记录。如果可能的话,把它存档模型: 库龄分析报表 (eno.md.payable.age.analyse.rpt)