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开发美团外卖点餐小程序的更多相关文章

  1. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  2. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  3. 干货| 外卖点餐系统(App及后台)

    简单总结一下,这个系统是一个外卖点餐系统,也就是仿美团饿了么,也是当时我的毕业设计,花费了我很多精力,主要包括了移动端App.服务端(中台)和商家的后台管理.答辩完后我就将移动端源码放到了GitHub ...

  4. Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)

    1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...

  5. 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  6. 微信小程序开发系列(一)小程序开发初体验

    开发小程序所需的基本技能   关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发. 关于还没有接触过小程序的开发者来说,最关心的问题无非就是,开发小 ...

  7. 基于wepy和云开发的动漫资讯小程序----233次元

    233次元小程序 # 233次元小程序 项目描述- 基于微信小程序的动漫咨询小程序,采用`wepy`框架开发:- 后台数据采用小程序的云开发存储: 线上体验 部分截图                 ...

  8. Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

    1.课程介绍 1.课程概述 1.做什么? Vue+koa2开发一款全栈小程序 2.哪些功能? 个人中心.图书列表.图书详情.图书评论.个人评论列表 3.技术栈 小程序.Vue.js.koa2.koa- ...

  9. [转]微信小程序开发系列(一)小程序开发初体验

    本文转自:http://www.cnblogs.com/rennix/p/6287432.html 开发小程序所需的基本技能   关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领 ...

随机推荐

  1. IO流之打印流

    打印流的概述(只有输出就是只与数据目的有关,不会抛出IO异常) 打印流添加输出数据的功能,使它们能够方便地打印各种数据值表示形式. 打印流根据流的分类: l  字节打印流  PrintStream l ...

  2. mysql if函数使用例子

    1.场景一 有时查询数量a 同时查询过滤后的数量b 2. 代码 SELECT count(id) as total_count, count( IF ( date(order_time) = DATE ...

  3. 洛谷P3960 列队(动态开节点线段树)

    题意 题目链接 Sol 看不懂splay..,看不懂树状数组... 只会暴力动态开节点线段树 观察之后不难发现,我们对于行和列需要支持的操作都是相同的:找到第\(k\)大的元素并删除,在末尾插入一个元 ...

  4. Java反射机制(带应用)

    1.Java的反射机制:        Java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态 ...

  5. 05_zookeeper的ACL

    [ACL概述] ACL:access control Lists,权限控制. * 针对节点可以设置相关的读写等权限,目的是为了保障数据安全性. * 权限permissions可以指定不同的权限范围以及 ...

  6. android 多渠道打包

    android 多渠道打包 原理 在manifest文件中,application标签内部设置不同的metadata标签即可,可以通过java api获取这个matedata内的值 友盟提供的多渠道打 ...

  7. SQL Server ->> 深入探讨SQL Server 2016新特性之 --- Row-Level Security(行级别安全控制)

    SQL Server 2016 CPT3中包含了一个新特性叫Row Level Security(RLS),允许数据库管理员根据业务需要依据客户端执行脚本的一些特性控制客户端能够访问的数据行,比如,我 ...

  8. 24点-code1

    #include <iostream> #include <string> #include <cstdlib> #include <cmath> us ...

  9. XML布局之路

    XML布局存放在工程文件的res/layout目录下.安卓和PC端的界面布局有用到. 常用的布局方式,线性布局:LinearLayout 表格布局:TableLayout 帧布局  :FrameLay ...

  10. linux下 signal信号机制的透彻分析与各种实例讲解

    转自:http://blog.sina.com.cn/s/blog_636a55070101vs2d.html 转自:http://blog.csdn.net/tiany524/article/det ...