基於mpvue的微信小程式商城（小程式端，服務端，後臺管理） 小程式是github上的一個開源專案

小程式端

技術棧

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

專案執行

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

功能列表

頁面

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

元件

•  商品篩選元件 -- 綜合、價格、分類

功能

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

小程式效果展示

首頁、商品分類頁

品牌詳情頁、人氣推薦頁

專題、專題詳情

分類首頁、搜尋頁

商品詳情、購物車

確認訂單、付款頁

我的訂單、訂單詳情

優惠卷、我的收藏

我的足跡、地址管理

後臺管理端展示，可定製開發

橫幅管理

分類管理

品牌管理

商品管理

頻道管理

服務端API

服務端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: '', // 小程式 appid
    secret: '', // 小程式金鑰
    mch_id: '', // 商戶帳號ID
    partner_key: '', // 微信支付金鑰
    notify_url: '' // 微信非同步通知
  }
};

最後

1、小程式商城後臺管理端

基於java Spring開發。

聯絡我