mpvue-meituan

mpvue-meituan 是一款使用mpvue開發的實戰小程式專案，完全仿製美團官方外賣點餐小程式開發而成，專案的框架結構完全按照企業開發架構搭建而成。結合了原生小程式的開發能力和Vue能力，使小程式開發起來更加便捷高效，專案使用了比較流行的Vuex框架來作為全域性的狀態資料管理，使資料互動更加的便捷，結合了sass的使用讓寫Css樣式更加的得心應手。目前市面上有很多使用mpvue開發的示例Demo，但是那些示例Demo都過於簡單，沒有提供一套系統的框架結構，借鑑的意義不是很大。所以作者就開源了一個企業級框架開發的小程式供大家學習參考，總之是一個極力推薦學習的小程式實戰專案。

開源專案Git倉庫地址：https://github.com/guangqiang-liu/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)。

當然，如果老鐵們認為作者的開源專案還不錯，也請點個 star 支援一下 ??? ，也衷心的歡迎小夥伴們提些寶貴的意見和建議。

開源專案Git倉庫地址：https://github.com/guangqiang-liu/mpvue-meituan

mpvue實戰開發美團外賣小程式

mpvue-meituan

目錄

專案簡介

主要功能(20+頁面)

預覽效果圖

安裝除錯

API資料來源

技術要點

核心元件庫

開發中遇到的坑

待完成功能

目錄結構

總結

更多文章

相關文章