mpvue-xbyjShop

基于mpvue的微信小程序商城（小程序端，服務端）

小程序端

技術棧

mpvue + mpvue-router-patch + mpvue-entry + vuex + webpack + ES6/7 + flyio + mpvue-wxparse

項目運行

微信開發中工具選中mpvue-xbyjShop/buyer作為項目目錄即可

功能列表

頁面

• 首頁 – 完成
• 分類商品 – 完成
• 商家品牌、品牌詳情 – 完成
• 新品首發 – 完成
• 人氣推薦 – 完成
• 專題商品、專題詳情 – 完成
• 分類首頁 – 完成
• 搜索頁 – 完成
• 商品詳情 – 完成
• 評論頁 – 完成
• 購物車 – 完成
• 下單頁 – 完成
• 支付頁、支付結果頁 – 完成
• 我的訂單、訂單詳情頁 – 完成
• 優惠卷
• 我的收藏 – 完成
• 我的足跡 – 完成
• 地址管理頁 – 完成
• 意見反饋
• 物流查詢

組件

• 商品篩選組件 – 綜合、價格、分類

功能

• 專題評論
• 搜索商品
• 商品收藏
• 加入購物車
• 購物車商品的編輯、刪除、批量操作
• 瀏覽記錄
• 收貨地址的增、刪、改
• 下單支付
  …

效果展示

首頁、商品分類頁

品牌詳情頁、人氣推薦頁

專題、專題詳情

分類首頁、搜索頁

商品詳情、購物車

確認訂單、付款頁

付款結果、個人中心

我的訂單、訂單詳情

優惠卷、我的收藏

我的足跡、地址管理

意見反饋、物流查詢

服務端

服務端api基于Ｎode.js+ThinkJS+MySQL

項目運行

創建數據庫xbyjshop導入mpvue-xbyjShop/server目錄下的xbyjShop.sql數據修改兩個配置文件，見下面安裝依賴 npm install啟動項目 npm start

修改數據庫配置文件

server/src/common/config/database.js

const mysql = require('think-model-mysql');module.exports = {handle: mysql,database: 'xbyjshop',prefix: 'xbyjshop_',encoding: 'utf8mb4',host: '127.0.0.1',port: '3306',user: 'root',password: '你的密碼',dateStrings: true
};

修改微信登錄和微信支付配置文件

server/src/common/config/config.js

// default config
module.exports = {default_module: 'api',weixin: {appid: '', // 小程序 appidsecret: '', // 小程序密鑰mch_id: '', // 商戶帳號IDpartner_key: '', // 微信支付密鑰notify_url: '' // 微信異步通知}
};

上線部署

騰訊云ECS CentOS 7.3 64
PM2管理nodejs進程
Nginx反向代理
配置HTTPS（微信小程序接口必須是HTTPS）

數據接口： https://www.xuanbiyijue.com/api/
具體的步驟，之后有空詳細補一篇吧；

說明

如果本項目對您有幫助，歡迎 “點贊，關注” 支持一下 謝謝~

源碼獲取關注公眾號「碼農園區」，回復 【uniapp源碼】

最后

精選32套源碼目錄：

python
復制代碼
IT之家小程序版客戶端(使用 Mpvue 開發，兼容 Web)ithome-lite-master.zipmpvue 仿網易嚴選mpvue-shop-master.zipmpvue-音樂播放器mpvue-music-master.zipmpvue性能測試與體驗miniweibo-master.zipmpvue改造的日歷.zipmpvue框架仿滴滴出行didi-master.zipmpVue高仿美團小程序教程mpvue-meituan-master.zipuni APP自動更新并安裝.vueuni-app nvue沉浸式狀態欄(線性漸變色).vueuni-app 二維碼生成器分享wxqrcode.zipuni-app 側邊導航分類,適合商品分類頁面uni-app-left-navigation-master.zipuni-app 自定義底部導航欄uni-app-bottom-navigation-master.zipuni-app全局變量的幾種實現方式.zipuni-app的markdown富文本編輯器插件uniapp-markdown-master.zipuni-app自定義導航欄title-custom.zipuniapp聊天實例，支持圖片，語音，表情.zipuniapp選擇器,包含一級,二級級聯,三級級聯uniapp-picker-master.zipvue-mpvue-ChatRobot聊天機器人vue-mpvue-ChatRobot-master.zip【小程序】CNode社區mpvue-cnode-master.zip【插件、圖表】7種圖表漂亮豐富uniCharts.zip一款播課類小程序, 基于 mpvue 構建mp-podcast-mpvue-master.zip云檔新版小程序端，基于mpvue開發cloud-doc-v2-master.zip仿uc瀏覽器列表.vue仿扎克新聞mpZAKER-master.zip仿網易云UImusic播放器mpvue-music-master.zip仿追書神器的小說閱讀器小程序wx-book-master.zip參照米家APP布局和樣式,編寫的一款智能家居小程序smart-home-master.zip商城實例mpvue-xbyjShop-master.zip基于 mpvue 實現豆瓣電影微信小程序mpvue-douban-master.zip基于mpvue的優酷mpvue-youku-master.zip校園助手示例SHUhelper-master.zip類似mui中的chat(聊天窗口)實現uniapp-chat-master.zip美團外賣(第三方)開源程序mpvue-master.zip美食搜索mpvue-FG-master.zip豆瓣平分mpvue-douban-pingfen-master.zip頂部tabbar.vue

源碼截圖：

?

?源碼獲取

關注公眾號「碼農園區」，回復 【uniapp源碼】，即可獲取全套源碼下載鏈接