mpvue开发美团外卖点餐小程序
mpvue-meituan
mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全按照企业开发架构搭建而成。结合了原生小程序的开发能力和Vue能力,使小程序开发起来更加便捷高效,项目使用了比较流行的Vuex框架来作为全局的状态数据管理,使数据交互更加的便捷,结合了sass的使用让写Css样式更加的得心应手。目前市面上有很多使用mpvue开发的示例Demo,但是那些示例Demo都过于简单,没有提供一套系统的框架结构,借鉴的意义不是很大。所以作者就开源了一个企业级框架开发的小程序供大家学习参考,总之是一个极力推荐学习的小程序实战项目。欢迎小伙伴们点赞, star 先谢过啦!
**开源项目Git仓库地址:mpvue-meituan ** 进来了就点个赞再走呗
目录
项目简介
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绘制分享海报
- [x] vuex状态管理使用
- [x] 常用工具类封装
- [x] 组件化使用
- [x] 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.js
37 directories, 117 files
总结
mpvue-meituan 项目是作者大约使用了2周时间开源的一款小程序项目,项目中基本涵盖了企业开发中常用的技术要点,非常适合想学习小程序开发的小伙伴们参考学习。相信此项目能给小伙伴们带来不一样的收获。大家也可以加作者的mpvue小程序交流群交流学习(
QQ群号:694979037
)。当然,如果老铁们认为作者的开源项目mpvue-meituan还不错,也请点个赞,给个
star
支持一下吧mpvue开发美团外卖点餐小程序的更多相关文章
- 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 干货| 外卖点餐系统(App及后台)
简单总结一下,这个系统是一个外卖点餐系统,也就是仿美团饿了么,也是当时我的毕业设计,花费了我很多精力,主要包括了移动端App.服务端(中台)和商家的后台管理.答辩完后我就将移动端源码放到了GitHub ...
- Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)
1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列(一)小程序开发初体验
开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发. 关于还没有接触过小程序的开发者来说,最关心的问题无非就是,开发小 ...
- 基于wepy和云开发的动漫资讯小程序----233次元
233次元小程序 # 233次元小程序 项目描述- 基于微信小程序的动漫咨询小程序,采用`wepy`框架开发:- 后台数据采用小程序的云开发存储: 线上体验 部分截图 ...
- Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)
1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa- ...
- [转]微信小程序开发系列(一)小程序开发初体验
本文转自:http://www.cnblogs.com/rennix/p/6287432.html 开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领 ...
随机推荐
- 01HTMl-<base>标签
一.base用于定义页面链接的打开方式 <base target="_blank"/> 定义页面链接默认打开方式,base通过target属性告诉浏览器如何打开页面. ...
- Python基础-接口与归一化设计、抽象类、继承顺序、子类调用父类,多态与多态性
一.接口与归一化设计 Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 由 ...
- 数据结构与算法C语言所有头文件汇总 —— 持续更新
header.h // 顺序表的结构定义 #define Maxsize 100 //const int Maxsize = 100; // 预先定义一个足够大的常数 typedef struct { ...
- 04_zookeeper的watcher机制
[watcher简述] * zk针对每个节点的操作,都会有一个监督者:watcher * 当监控的某个对象(znode)发生了变化,则出发watcher * zk中的watcher是一次性的,出发后立 ...
- 基础JavaScript练习(一)
任务目的 学习与实践JavaScript的基本语法.语言特性 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 如图,模拟一个队列,队列的每个元素是一个 ...
- 目前比较全的CSS重设(reset)方法总结(转)
原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...
- dubbo学习总结三 消费端
消费端跟服务端类似 注意点是dubbo:reference 和服务端的dubbo:service做区分 消费端主要是处理发送过来的请求
- leveldb分析——单元测试工具
leveldb中自己实现了一个简单的单元测试工具,下面是一个对CRC类测试的一个例子 class CRC { }; TEST(CRC, Extend) { ASSERT_EQ(Value(), Ext ...
- Visual Stuio 2010 常用快捷及操作(转)
文章来源:http://www.cnblogs.com/martianzone/p/3373791.html 1.如果你想复制一行代码(超级长,鼠标拖老久的),只需要在这行的空白处 CTRL+C 同理 ...
- Python取出SQL表单中的字段名
def ReturnInfo(self, avalue, akey): cursor = connection.cursor() Sql = "select * from %s where ...