九两酒商城 ​

项目演示 ​

微信扫描下方小程序码，在线体验九两酒商城 ↓↓↓

视频教程 ​

📺 完整版学习地址：https://www.bilibili.com/cheese/play/ss484459492

课程内容概述 ​

这是一个基于 Vue3 和 uniapp 开发的 unipay微信小程序购物商城 的完整实战课程。课程从前端到后端，从用户端到管理端，系统地讲解了整个电商项目的开发流程。核心知识内容可以概括为以下几个方面：

1. 项目初始化与基础架构
   • 使用Vue3和uniapp创建项目，配置tabBar及核心页面。
   • 封装公共组件（如自定义标题栏、搜索组件），实现组件的复用。
   • 运用CSS技术（如粘性定位sticky、动态计算高度）进行页面布局和样式美化。
   • 引入并使用图标库、第三方工具库（如xe-utils）来提升开发效率。
2. 核心业务模块（客户端）
   • 首页/分类/购物车：实现商品分类、Banner轮播、热销产品展示。封装多功能商品卡片，实现SKU（库存单位）规格选择和购物车弹窗。
   • 状态管理：使用Pinia进行全局状态管理，特别是对购物车数据的存储、合并、数量更新和价格计算。
   • 用户交互：实现商品搜索、新闻资讯列表与详情（富文本解析）、个人中心、订单列表等页面。
3. 后端服务与数据库（uniCloud）
   • 服务端开发：使用uniCloud创建服务空间、云函数和云对象，实现前后端分离。
   • 数据库设计：为商品、分类、用户、订单、地址、积分、优惠券等核心业务模块创建schema数据表结构。
   • 数据查询与操作：使用JQL进行联表查询、数据过滤、分页、聚合统计（如group by），并实现数据库的增删改查。
4. 高级功能与业务逻辑
   • 用户体系：集成uni-id，实现用户注册登录、微信小程序登录、个人资料修改、手机号获取等功能。
   • 商户/门店系统：设计商家入驻、分店管理、申请加盟的完整流程，并与地图地理位置（geoNear附近搜索）结合。
   • 支付与订单：集成unipay支付模块，实现完整的订单创建、金额计算（含运费、积分抵扣、优惠券抵扣）、微信支付、订单取消、申请退款等功能。调用微信同城配送API计算运费和创建配送单。
   • 营销体系：开发积分系统（签到、消费送积分、积分抵扣）、优惠券系统（后台创建、领取、使用、返还）。
   • 定时任务：使用云对象的_timing定时触发器，实现超时订单自动关闭、订单完成后自动赠送积分等自动化任务。
5. 后台管理系统（uniadmin）
   • 集成Element-Plus组件库，开发后台管理页面，用于管理新闻资讯、商品分类、商品信息、商户审核、配置项、优惠券活动等。
   • 实现表格数据渲染、分页、搜索、批量删除、表单验证与提交、图片上传与压缩等管理功能。
6. 项目部署与优化
   • 介绍项目打包前的准备工作（如初始化数据库、整合初始化数据）。
   • 将uni-admin后台管理和微信小程序前端分别打包并部署上线。
   • 讲解项目中的细节优化、Bug修复和性能考虑（如图片压缩、节点信息获取）。

核心亮点 ​

1.商城类小程序uniapp项目架构布局

2.uniCloud高阶JQL语法应用

3.uni-id快捷登录及用户体系

4.unipay支付的各功能模块

5.uniadmin后台管理系统

6.element-plus在Vue3项目中的应用

7.pinia全局状态管理

8.积分系统及积分支付模块

9.优惠券应用管理

10.微信官方API同城配送应用

11.地址管理及地理位置定位

12.手机号获取用户认证

13.各类常用的第三方插件的应用

功能概览 ​

知识概览 ​

项目效果图概览 ​

📱 小程序客户端页面 ​

💻 后台管理页面 ​