基於mpvue的微信商城小程式
阿新 • • 發佈:2018-12-30
基於mpvue的微信小程式商城(小程式端,服務端,後臺管理) 小程式是github上的一個開源專案
小程式端
技術棧
mpvue + mpvue-router-patch + mpvue-entry + vuex + webpack + ES6/7 + flyio + mpvue-wxparse
專案執行
微信開發中工具選中mpvue-xbyjShop/buyer作為專案目錄即可
功能列表
頁面
- 首頁 -- 完成
- 分類商品 -- 完成
- 商家品牌、品牌詳情 -- 完成
- 新品首發 -- 完成
- 人氣推薦 -- 完成
- 專題商品、專題詳情 -- 完成
- 分類首頁 -- 完成
- 搜尋頁 -- 完成
- 商品詳情 -- 完成
- 評論頁 -- 完成
- 購物車 -- 完成
- 下單頁 -- 完成
- 支付頁、支付結果頁 -- 完成
- 我的訂單、訂單詳情頁 -- 完成
- 優惠卷
- 我的收藏 -- 完成
- 我的足跡 -- 完成
- 地址管理頁 -- 完成
- 意見反饋
- 物流查詢
元件
- 商品篩選元件 -- 綜合、價格、分類
功能
- 專題評論
- 搜尋商品
- 商品收藏
- 加入購物車
- 購物車商品的編輯、刪除、批量操作
- 瀏覽記錄
- 收貨地址的增、刪、改
- 下單支付 .....
小程式效果展示
首頁、商品分類頁
品牌詳情頁、人氣推薦頁
專題、專題詳情
分類首頁、搜尋頁
商品詳情、購物車
確認訂單、付款頁
我的訂單、訂單詳情
優惠卷、我的收藏
我的足跡、地址管理
後臺管理端展示,可定製開發
橫幅管理
分類管理
品牌管理
商品管理
頻道管理
服務端API
服務端api基於Node.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開發。