mpvue開發美團外賣點餐小程式
摘要：
mpvue-meituan 是一款使用mpvue開發的實戰小程式專案，完全仿製美團官方外賣點餐小程式開發而成，專案的框架結構完全按照企業開發架構搭建而成。結合了原生小程式的開發能力和Vue能力，使小程式開發起來更加便捷高效，專案使用了比較流行的Vuex框架來作為全域性的狀態資料管理，使資料互...
ofollow,noindex">mpvue-meituan 是一款使用mpvue開發的實戰小程式專案，完全仿製美團官方外賣點餐小程式開發而成，專案的框架結構完全按照企業開發架構搭建而成。結合了原生小程式的開發能力和Vue能力，使小程式開發起來更加便捷高效，專案使用了比較流行的Vuex框架來作為全域性的狀態資料管理，使資料互動更加的便捷，結合了sass的使用讓寫Css樣式更加的得心應手。目前市面上有很多使用mpvue開發的示例Demo，但是那些示例Demo都過於簡單，沒有提供一套系統的框架結構，借鑑的意義不是很大。所以作者就開源了一個企業級框架開發的小程式供大家學習參考，總之是一個極力推薦學習的小程式實戰專案。歡迎小夥伴們點贊， star 先謝過啦！
**開源專案Git倉庫地址： mpvue-meituan ** 進來了就點個贊再走唄
目錄
- 專案簡介
- 主要功能
- 預覽效果圖
- 安裝除錯
- API%E6%95%B0%E6%8D%AE%E6%9D%A5%E6%BA%90" rel="nofollow,noindex" target="_blank">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