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è)級(jí)框架開發(fā)的小程序供大家學(xué)習(xí)參考，總之是一個(gè)極力推薦學(xué)習(xí)的小程序?qū)崙?zhàn)項(xiàng)目。

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

目錄

• 項(xiàng)目簡介
• 主要功能
• 預(yù)覽效果圖
• 安裝調(diào)試
• API數(shù)據(jù)來源
• 技術(shù)要點(diǎn)
• 核心組件庫
• 開發(fā)中遇到的坑
• 待完成功能
• 待優(yōu)化bug
• 目錄結(jié)構(gòu)
• 總結(jié)

項(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
  • 首頁商家列表
  • 選擇收貨地址列表
  • 選擇城市
  • 商品搜索列表
  • 分類列表
  • 邀請(qǐng)好友領(lǐng)紅包
  • 添加購物車頁面
  • 食品檔案
• 訂單Tab
  • 訂單列表
  • 提交訂單
  • 商品備注
  • 訂單詳情
  • 商品評(píng)論
• 我的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ù)存儲(chǔ)為本地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ā)表評(píng)論功能
• 提交訂單頁面完善優(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群號(hào)：694979037)。

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

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

更多文章

• 作者React Native開源項(xiàng)目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架完成開發(fā)的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star
• 作者簡書主頁：包含60多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.itdecent.cn/u/023338566ca5 歡迎小伙伴們：多多關(guān)注，多多點(diǎn)贊