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

mpvue-meituan

mpvue-meituan 是一款使用mpvue開發的實戰小程序項目，徹底仿製美團官方外賣點餐小程序開發而成，項目的框架結構徹底按照企業開發架構搭建而成。結合了原生小程序的開發能力和Vue能力，使小程序開發起來更加便捷高效，項目使用了比較流行的Vuex框架來做爲全局的狀態數據管理，使數據交互更加的便捷，結合了sass的使用讓寫Css樣式更加的駕輕就熟。目前市面上有不少使用mpvue開發的示例Demo，可是那些示例Demo都過於簡單，沒有提供一套系統的框架結構，借鑑的意義不是很大。因此做者就開源了一個企業級框架開發的小程序供你們學習參考，總之是一個極力推薦學習的小程序實戰項目。歡迎小夥伴們點贊， star 先謝過啦！

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

目錄

• 項目簡介
• 主要功能
• 預覽效果圖
• 安裝調試
• API數據來源
• 技術要點
• 核心組件庫
• 開發中遇到的坑
• 待完成功能
• 待優化bug
• 目錄結構
• 總結

項目簡介

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)。

固然，若是老鐵們認爲做者的開源項目mpvue-meituan還不錯，也請點個贊，給個 star 支持一下吧 🙏🙏🙏 ，也衷心的歡迎小夥伴們提些寶貴的意見和建議。

歡迎小夥伴們掃碼進羣

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

更多文章

• 做者React Native開源項目OneM地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習