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
- 我的頁面
- 美團紅包頁面
- 無效紅包頁面
- 代金券頁面
- 無效代金券列表
- 收貨地址列表
- 新增收貨地址
- 幫助反饋
- 協議說明
待補充

預覽效果圖

mpvue

安裝調試

# 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

**開源項目Git倉庫地址：mpvue-meituan ** 進來了就點個贊再走唄

mpvue開發美團外賣點餐小程序

mpvue-meituan

目錄

項目簡介

主要功能(20+頁面)

預覽效果圖

安裝調試

API數據來源

技術要點

核心組件庫

開發中遇到的坑

待完成功能

目錄結構

總結

更多文章

免責聲明！