首页 前端知识 微信小程序商城实例(附精选源码32套,涵盖商城团购等)

微信小程序商城实例(附精选源码32套,涵盖商城团购等)

2024-04-29 12:04:23 前端知识 前端哥 884 616 我要收藏

mpvue-xbyjShop

基于mpvue的微信小程序商城(小程序端,服务端)

小程序端

技术栈

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

项目运行

微信开发中工具选中mpvue-xbyjShop/buyer作为项目目录即可

功能列表

页面

  • 首页 – 完成
  • 分类商品 – 完成
  • 商家品牌、品牌详情 – 完成
  • 新品首发 – 完成
  • 人气推荐 – 完成
  • 专题商品、专题详情 – 完成
  • 分类首页 – 完成
  • 搜索页 – 完成
  • 商品详情 – 完成
  • 评论页 – 完成
  • 购物车 – 完成
  • 下单页 – 完成
  • 支付页、支付结果页 – 完成
  • 我的订单、订单详情页 – 完成
  • 优惠卷
  • 我的收藏 – 完成
  • 我的足迹 – 完成
  • 地址管理页 – 完成
  • 意见反馈
  • 物流查询

组件

  • 商品筛选组件 – 综合、价格、分类

功能

  • 专题评论
  • 搜索商品
  • 商品收藏
  • 加入购物车
  • 购物车商品的编辑、删除、批量操作
  • 浏览记录
  • 收货地址的增、删、改
  • 下单支付

效果展示

首页、商品分类页

1.首页.gif

2.商品分类.png

品牌详情页、人气推荐页

3.品牌详情页.png
4.人气推荐.gif

专题、专题详情

5.专题.gif

6.专题详情.gif

分类首页、搜索页

8.搜索.gif

7.分类首页.png

商品详情、购物车

10.购物车.gif

9.商品详情.gif

确认订单、付款页

12.付款页.png

11.确认订单.png

付款结果、个人中心

14.个人中心.png

13.付款结果.png

我的订单、订单详情

16.订单详情.png

15.我的订单.png

优惠卷、我的收藏

18.我的收藏.png

17.优惠卷.png

我的足迹、地址管理

20.地址管理.gif

19.我的足迹.png

意见反馈、物流查询

22.物流查询.png

21.意见反馈.png

服务端

服务端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: '' // 微信异步通知
  }
};

上线部署

腾讯云ECS CentOS 7.3 64
PM2管理nodejs进程
Nginx反向代理
配置HTTPS(微信小程序接口必须是HTTPS)

数据接口: https://www.xuanbiyijue.com/api/
具体的步骤,之后有空详细补一篇吧;

说明

如果本项目对您有帮助,欢迎 “点赞,关注” 支持一下 谢谢~

源码获取关注公众号「码农园区」,回复 【uniapp源码】

最后

精选32套源码目录:

IT之家小程序版客户端(使用 Mpvue 开发,兼容 Web)ithome-lite-master.zip

mpvue 仿网易严选mpvue-shop-master.zip

mpvue-音乐播放器mpvue-music-master.zip

mpvue性能测试与体验miniweibo-master.zip

mpvue改造的日历.zip

mpvue框架仿滴滴出行didi-master.zip

mpVue高仿美团小程序教程mpvue-meituan-master.zip

uni APP自动更新并安装.vue

uni-app nvue沉浸式状态栏(线性渐变色).vue

uni-app 二维码生成器分享wxqrcode.zip

uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip

uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip

uni-app全局变量的几种实现方式.zip

uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip

uni-app自定义导航栏title-custom.zip

uniapp聊天实例,支持图片,语音,表情.zip

uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

vue-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源码】,即可获取全套源码下载链接
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6469.html
标签
小程序
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!