脚本宝典收集整理的这篇文章主要介绍了mpvue实战开发美团外卖小程序,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全按照企业开发架构搭建而成。结合了原生小程序的开发能力和Vue能力,使小程序开发起来更加便捷高效,项目使用了比较流行的Vuex框架来作为全局的状态数据管理,使数据交互更加的便捷,结合了sass的使用让写Css样式更加的得心应手。目前市面上有很多使用mpvue开发的示例Demo,但是那些示例Demo都过于简单,没有提供一套系统的框架结构,借鉴的意义不是很大。所以作者就开源了一个企业级框架开发的小程序供大家学习参考,总之是一个极力推荐学习的小程序实战项目。欢迎小伙伴们点赞, star 先谢过啦!
开源项目Git仓库地址:mpvue-meituan 进来了就点个赞再走呗
mpvue-meituan 是一款使用mpvue开发的小程序,完全仿制美团官方外卖小程序。目前市面上大部分的小程序开发还是使用微信原生的开发能力,原生的开发能力约束太多,导致小程序开发成本变高。于是市面上衍生出不少小程序开发框架,其中最为流行的有下面三个框架:wepy
taro
mpvue
。这三个框架出自不同的大厂,之前不太了解的小伙伴们可以自行查阅资料。本项目主要介绍如何使用vue来快速开发一款复杂的小程序项目。
首页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
mpvue-meituan 项目的数据来源目前均来自美团外卖小程序抓包数据,将抓包数据存储为本地JSON,然后工程访问本地JSON数据。由于美团外卖小程序属于美团正式线上产品,故不能直接访问其真实API,使用本地JSON一样能实现绝大部分需求,少数需要数据交互的需求自己mock数据即可。
待补充
.
├── 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
支持一下吧 ???????????? ,也衷心的欢迎小伙伴们提些宝贵的意见和建议。
欢迎小伙伴们扫码进群
开源项目Git仓库地址:mpvue-meituan 进来了就点个赞再走呗
以上是脚本宝典为你收集整理的mpvue实战开发美团外卖小程序全部内容,希望文章能够帮你解决mpvue实战开发美团外卖小程序所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。