mpvue實(shí)戰(zhàn)開發(fā)美團(tuán)外賣小程序

mpvue-meituan

mpvue-meituan 是一款使用mpvue開發(fā)的實(shí)戰(zhàn)小程序項(xiàng)目承冰，完全仿制美團(tuán)官方外賣點(diǎn)餐小程序開發(fā)而成华弓，項(xiàng)目的框架結(jié)構(gòu)完全按照企業(yè)開發(fā)架構(gòu)搭建而成。結(jié)合了原生小程序的開發(fā)能力和Vue能力困乒，使小程序開發(fā)起來更加便捷高效寂屏，項(xiàng)目使用了比較流行的Vuex框架來作為全局的狀態(tài)數(shù)據(jù)管理，使數(shù)據(jù)交互更加的便捷顶燕，結(jié)合了sass的使用讓寫Css樣式更加的得心應(yīng)手凑保。目前市面上有很多使用mpvue開發(fā)的示例Demo，但是那些示例Demo都過于簡單涌攻，沒有提供一套系統(tǒng)的框架結(jié)構(gòu)欧引，借鑒的意義不是很大。所以作者就開源了一個(gè)企業(yè)級框架開發(fā)的小程序供大家學(xué)習(xí)參考恳谎，總之是一個(gè)極力推薦學(xué)習(xí)的小程序?qū)崙?zhàn)項(xiàng)目芝此。

開源項(xiàng)目Git倉庫地址：https://github.com/guangqiang-liu/mpvue-meituan

項(xiàng)目簡介

mpvue-meituan 是一款使用mpvue開發(fā)的小程序憋肖，完全仿制美團(tuán)官方外賣小程序。目前市面上大部分的小程序開發(fā)還是使用微信原生的開發(fā)能力婚苹，原生的開發(fā)能力約束太多岸更，導(dǎo)致小程序開發(fā)成本變高。于是市面上衍生出不少小程序開發(fā)框架膊升，其中最為流行的有下面三個(gè)框架：wepy taro mpvue怎炊。這三個(gè)框架出自不同的大廠，之前不太了解的小伙伴們可以自行查閱資料廓译。本項(xiàng)目主要介紹如何使用vue來快速開發(fā)一款復(fù)雜的小程序項(xiàng)目评肆。

主要功能(20+頁面)

首頁Tab
- 首頁商家列表
- 選擇收貨地址列表
- 選擇城市
- 商品搜索列表
- 分類列表
- 邀請好友領(lǐng)紅包
- 添加購物車頁面
- 食品檔案
訂單Tab
- 訂單列表
- 提交訂單
- 商品備注
- 訂單詳情
- 商品評論
我的Tab
- 我的頁面
- 美團(tuán)紅包頁面
- 無效紅包頁面
- 代金券頁面
- 無效代金券列表
- 收貨地址列表
- 新增收貨地址
- 幫助反饋
- 協(xié)議說明
待補(bǔ)充

預(yù)覽效果圖

美團(tuán)買賣小程序

安裝調(diào)試

# 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數(shù)據(jù)來源

mpvue-meituan 項(xiàng)目的數(shù)據(jù)來源目前均來自美團(tuán)外賣小程序抓包數(shù)據(jù)，將抓包數(shù)據(jù)存儲為本地JSON非区，然后工程訪問本地JSON數(shù)據(jù)瓜挽。由于美團(tuán)外賣小程序?qū)儆诿缊F(tuán)正式線上產(chǎn)品，故不能直接訪問其真實(shí)API征绸，使用本地JSON一樣能實(shí)現(xiàn)絕大部分需求久橙，少數(shù)需要數(shù)據(jù)交互的需求自己mock數(shù)據(jù)即可。

技術(shù)要點(diǎn)

微信原生小程序開發(fā)能力
mpvue開發(fā)小程序能力
Vue開發(fā)能力
less管怠，sass 等css編譯器用法
小程序開發(fā)基礎(chǔ)框架結(jié)構(gòu)搭建
小程序網(wǎng)絡(luò)層封裝
Vuex全局狀態(tài)管理框架的使用
小程序淆衷，vue組件化開發(fā)技巧
小程序中iconFont使用技巧
使用canvas繪制小程序分享海報(bào)技巧
待補(bǔ)充

核心組件庫

mpvue
vuex
lodash
mpvue-wxparse
minapp-api-promise
待補(bǔ)充

開發(fā)中遇到的坑

待補(bǔ)充

待完成功能

選擇城市列表
分類篩選功能
購物車頁面完善優(yōu)化
發(fā)表評論功能
提交訂單頁面完善優(yōu)化
canvas繪制分享海報(bào)
vuex狀態(tài)管理使用
常用工具類封裝
組件化使用
sass環(huán)境的搭建及使用
待補(bǔ)充

目錄結(jié)構(gòu)

.
├── 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

總結(jié)

mpvue-meituan 項(xiàng)目是作者大約使用了2周時(shí)間開源的一款小程序項(xiàng)目，項(xiàng)目中基本涵蓋了企業(yè)開發(fā)中常用的技術(shù)要點(diǎn)排惨，非常適合想學(xué)習(xí)小程序開發(fā)的小伙伴們參考學(xué)習(xí)吭敢。相信此項(xiàng)目能給小伙伴們帶來不一樣的收獲。大家也可以加作者的mpvue小程序交流群交流學(xué)習(xí)(QQ群號：694979037)暮芭。

當(dāng)然鹿驼，如果老鐵們認(rèn)為作者的開源項(xiàng)目還不錯(cuò)，也請點(diǎn)個(gè) star 支持一下 ?????? 辕宏，也衷心的歡迎小伙伴們提些寶貴的意見和建議畜晰。

開源項(xiàng)目Git倉庫地址：https://github.com/guangqiang-liu/mpvue-meituan

mpvue實(shí)戰(zhàn)開發(fā)美團(tuán)外賣小程序

mpvue實(shí)戰(zhàn)開發(fā)美團(tuán)外賣小程序

mpvue-meituan

目錄

項(xiàng)目簡介

主要功能(20+頁面)

預(yù)覽效果圖

安裝調(diào)試

API數(shù)據(jù)來源

技術(shù)要點(diǎn)

核心組件庫

開發(fā)中遇到的坑

待完成功能

目錄結(jié)構(gòu)

總結(jié)

更多文章

推薦閱讀更多精彩內(nèi)容