mpvue-meituan
**开源项目Git仓库地址：mpvue-meituan ** 进来了就点个赞再走呗
目录
项目简介
主要功能(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开发小程序能力
- 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
总结
欢迎小伙伴们扫码进群
**开源项目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 欢迎小伙伴进群交流学习