本文拆解的这套微信商城小程序源码，基于UniApp + SpringBoot前后端分离架构，，全开源无加密，覆盖商品管理、订单系统、支付对接、分销裂变、多商户入驻等完整电商能力。
源码：xcxyms.top
一、为什么选 UniApp 做商城小程序：一张图讲清底层逻辑
在众多小程序开发方案里（原生微信小程序、Taro、Remax、kbone…），UniApp + Vue 的组合之所以成为商城类项目的"事实主流"，核心原因就三点：
维度
UniApp 的优势
对商城项目的意义
跨端编译
一套代码 → 微信小程序 / H5 / App / 支付宝小程序 / 钉钉…
商城天然有多端分发需求（公众号H5 + 小程序 + 未来App）
生态成熟度
基于 Vue 语法 + 微信小程序 API 映射，插件市场有大量现成组件（SKU面板、地址选择器、海报生成、虚拟列表）
商城页面复杂度高（商品详情SKU联动、购物车持久化、订单流），现成轮子=工期压缩
前后端解耦
UniApp 端只负责视图层 + 状态管理，通过 REST/GraphQL 调后端 API
商城真正的复杂度在后端：库存扣减、订单状态机、分布式锁、支付对账——前端不该碰这些
所以你拿到的"全开源 UniApp 商城完整包"，本质上应该由 三大件 组成：
┌──────────────────┐
│ ① 后端服务（API Server） │
│ ThinkPHP 6 / SpringBoot / Node.js + MySQL + Redis │
│ → 商品、订单、用户、支付、营销、权限 │
└──────────────────┘
↕ REST/HTTPS
┌──────────────────┐
│ ② UniApp 前端（小程序端） │
│ pages/ 首页 分类 详情 购物车 订单 我的… │
│ stores(Pinia/Vuex) + services(api封装) │
└──────────────────┘
↕ 编译
┌──────────────────┐
│ ③ 后台管理系统（Admin SPA） │
│ Vue + Element-UI / Element Plus │
│ → 商品上下架、订单发货、营销配置、数据看板 │
└──────────────────┘
二、源码目录结构拆解——看懂骨架，搭建才不会迷路
以主流的 UniApp + Vue3（或 Vue2）+ 后端 PHP/Java 前后端分离架构 为例，拿到源码包后你会看到类似这样的结构：
2.1 UniApp 前端目录（核心）
uni-mall/
├── pages/ # 主包页面
│ ├── index/ # 首页（轮播 + 推荐 + 秒杀楼层）
│ ├── category/ # 分类页（多级分类树 + 筛选）
│ ├── goods/ # 商品详情（SKU选择 + 图文详情 + 收藏）
│ ├── cart/ # 购物车（本地+服务端双写）
│ ├── order/ # 订单流（确认订单 → 提交 → 支付 → 结果页）
│ ├── user/ # 个人中心（订单列表/售后/地址）
│ └── login/ # 登录（微信一键 / 手机号）
├── components/ # 全局组件
│ ├── sku-panel/ # SKU弹窗（规格联动核心）
│ ├── address-picker/ # 省市区四级联动
│ └── countdown/ # 秒杀倒计时
├── stores/ # 状态管理
│ ├── cart.js # 购物车 Store（Pinia 或 Vuex）
│ └── user.js # 用户信息 & token
├── services/ # API 请求层
│ ├── goods.js # 商品相关接口
│ ├── order.js # 订单相关接口
│ └── user.js # 登录/地址/收藏
├── utils/
│ ├── request.js # axios/wx.request 封装（拦截器 + token注入 + 错误处理）
│ └── auth.js # 登录态检测 & 静默登录
├── static/ # 静态资源
├── config.js # ★ 环境配置（apiUrl 填这里）
├── manifest.json # AppID 配置（微信小程序）
├── pages.json # 路由 + tabBar 配置
└── package.json
2.2 后端目录（以 ThinkPHP 6 / 经典 MVC 为例）
platform-api/
├── app/
│ ├── controller/
│ │ ├── api/ # 对外API（小程序调用的接口）
│ │ │ ├── Goods.php
│ │ │ ├── Order.php
│ │ │ ├── Pay.php
│ │ │ └── User.php
│ │ └── admin/ # 后台控制器
│ ├── model/ # ORM模型（Goods / Order / User...）
│ ├── service/ # 业务逻辑层（★ 核心：订单创建事务、库存扣减）
│ └── common/ # 工具（签名、加密、微信支付SDK）
├── config/ # database.php / cache.php / 微信配置
├── public/ # web入口（入口在 public/index.php）
├── runtime/ # 运行时（需写权限）
└── .env # 环境变量
读源码的第一准则：先找 config.js（前端）和 .env / config/database.php（后端）——这两个文件决定了你的源码能不能"活过来"。
三、环境准备清单（别跳过，80%的搭建失败都是环境不对）
3.1 前端侧（UniApp 编译环境）
工具
版本推荐
用途
HBuilderX
3.8+
UniApp 官方 IDE，编译/发行一键完成
Node.js
16.x LTS（推荐 18.x）
若你用 CLI 方式或 Vue3+Vite 分支
微信开发者工具
最新 stable
真机预览 + 上传审核
npm / pnpm
pnpm 推荐
依赖安装
微信开发者工具安装后，必须打开「服务端口」：设置 → 安全 → 服务端口 → 开启。否则 HBuilderX 无法启动到小程序模拟器。
3.2 后端侧（以 LNMP / 宝塔 路线最常用）
PHP ≥ 7.4（推荐 8.0–8.2） 或 Java 8/11/17 + Maven
MySQL 5.7+ / 8.0
Redis 4.0+
Nginx 1.20+
PHP 必开扩展（缺一个就可能白屏）：curl、pdo_mysql、mbstring、openssl、fileinfo。
四、逐步搭建：从"源码包"到"小程序跑通"
下面给你一条通用流程，覆盖市面上绝大多数 UniApp 商城开源包（不管是 PHP 系还是 Java 系，思路完全一致，只是第二步换命令）。
Step 1：后端先跑起来（API 必须可达）
A. 宝塔/PHP路线（最常见）
宝塔 → 网站 → 添加站点，域名填你准备的 API 域名（如 api.xxx.com）
把后端代码上传到站点目录，确保 web 根目录指向 public/（不是根目录本身，否则配置泄露）
建数据库 → 导入 _sql/platform.sql（或源码包里的 install.sql）
改配置文件：
// .env 或 config/database.php 里
DB_HOST=127.0.0.1
DB_DATABASE=mall_db
DB_USERNAME=mall_user
DB_PASSWORD=your_pwd
// Redis
REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PASSWORD=
// 微信配置（先占位，后面再填真实商户号）
WECHAT_APPID=你的小程序AppID
WECHAT_SECRET=你的小程序Secret
WECHAT_MCH_ID=
WECHAT_KEY=
给 runtime 目录写权限：
chown -R www:www /www/wwwroot/api.xxx.com/
chmod -R 755 /www/wwwroot/api.xxx.com/
访问 https://api.xxx.com 或 /api/goods/list?page=1&limit=10，确认接口能返回 JSON。
B. SpringBoot 路线简述（如 youlai-mall 系）
# MySQL/Redis/Nacos 先跑起来
# 导入 document/sql/*.sql
# Nacos 里改 mysql & redis 连接
# IDEA → 依次启动：nacos → youlai-gateway → youlai-auth → mall-pms/oms/ums
访问 http://localhost:9999/doc.html 看 Swagger，接口通了再做前端。
Step 2：HBuilderX 导入 UniApp 前端 & 改 config.js
打开 HBuilderX → 文件 → 导入 → 从本地目录导入，选中 uni-mall/ 目录。
找到 config.js（有的项目在根目录，有的在 utils/config.js）：
// config.js 示例
export default {
// ★ 填你后端公网地址，结尾不要带斜杠
apiUrl: 'https://api.xxx.com',
// 小程序端 timeout
timeout: 15000,
// 存储键名
tokenKey: 'uni_token',
}
关键检查项：
apiUrl 必须是 https://（微信小程序强制 HTTPS，本地 127 调试除外）
如果后端在开发阶段还没上 HTTPS，可以用微信开发者工具 → 详情 → 本地设置 → 不校验合法域名（仅开发阶段）
Step 3：绑 AppID + 跑起来
manifest.json → 微信小程序配置 → 填你的小程序 AppID（在 https://mp.weixin.qq.com 注册并拿到）
HBuilderX → 运行 → 运行到小程序模拟器 → 微信开发者工具
开发者工具里能看到首页 → 说明前端 ↔ 后端已经接通
Step 4：微信登录 & 支付对接（核心难点）
微信登录（小程序端最小流程）
// utils/auth.js
export function wxLogin() {
return new Promise((resolve, reject) => {
wx.login({
success(res) {
// res.code → 发给后端
// 后端用 code + appid + secret → 调微信接口换 openid/session_key
// 后端生成你自己的 JWT token → 返回给前端存进去
resolve(res.code)
},
fail: reject
})
})
}
前端拿到后端返回的 token 后存 uni.setStorageSync('token', token)，之后的所有请求在 request.js 拦截器里带上：
// utils/request.js
const baseURL = 'https://api.xxx.com'
export function request(options) {
const token = uni.getStorageSync('token')
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + options.url,
method: options.method || 'GET',
data: options.data,
header: {
'Authorization': token ? `Bearer ${
token}` : '',
'Content-Type': 'application/json'
},
success(res) {
if (res.statusCode === 401) {
// token过期 → 触发重新登录
return
}
resolve(res.data)
},
fail: reject
})
})
}
微信支付（下单闭环）
支付的关键不是"调起"，而是后端生成 prepay_id 并签名返回，前端拿参数调 wx.requestPayment：
// 提交订单成功后
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package, // 形如 prepay_id=xxx
signType: 'RSA', // 或 MD5，看微信支付V2/V3
paySign: payData.paySign,
success() {
uni.navigateTo({
url: '/pages/order/result?status=success' })
}
})
⚠️ 后端回调地址 notify_url 必须是公网 HTTPS 可达的，且验签失败时绝对不能落盘成功状态——这是支付安全的生死线。
五、数据库核心表设计（理解这个，二次开发就通了一半）
商城的灵魂不在页面，在数据模型。下面是核心表的最小集合：
-- 商品
goods (id, spu_name, price, stock, category_id, album_json, detail_html, status)
-- SKU（多规格商品的核心）
goods_sku (id, goods_id, sku_json, price, stock, sku_code)
-- 购物车（支持游客临时cart + 登录后merge）
cart (id, user_id/null, sku_id, quantity, checked)
-- 订单
orders (
id, order_no, user_id, total_amount, pay_amount,
status, -- 0待付 1已付 2发货 3完成 4关闭
address_snapshot_json,
created_at
)
-- 订单明细
order_items (id, order_id, sku_id, qty, price_unit)
-- 用户
users (id, openid, nickname, avatar, phone)
二次开发时的第一刀，通常切在 goods_sku.stock 的扣减策略上：
方案A（简单）：下单时直接 UPDATE sku SET stock = stock - qty WHERE stock >= qty。适合小规模。
方案B（生产）：Redis 预扣库存 + 数据库最终一致 + 订单超时自动回滚。高并发必走这条。
六、性能优化：别让商城"能跑"就行
6.1 UniApp 分包加载（防止主包超限 2MB）
// pages.json
{
"subPackages": [
{
"root": "pages-sub/order",
"pages": ["list", "detail", "result"]
}
],
"preloadRule": {
"pages/index/index": {
"packages": []
}
}
}
6.2 后端缓存策略
商品详情页：Redis KV 缓存（TTL 300s，后台编辑商品时主动 del）
首页楼层：预生成 JSON 快照存 Redis，避免每次实时 JOIN
用户会话：Redis / JWT 无状态（推荐 JWT + 短期有效 + refresh机制）
6.3 图片资源
所有商品图走对象存储（COS / OSS / MinIO），别直接放服务器磁盘。CDN + WebP 自适应能让首屏加载差出一个量级。
七、上线前的安全加固清单
☑ config.js 里的 apiUrl 必须是 HTTPS
☑ 后端 .env 文件不能在 web 可访问目录（PHP项目尤其注意）
☑ 支付 notify_url 做签名校验 + 幂等（同一 transaction_id 不重复入账）
☑ 订单金额后端二次计算，不能相信前端传来的 pay_amount
☑ 后台管理端改默认路径（别留 /admin 裸奔）
☑ SQL 入参用 ORM 预编译 / PreparedStatement（防注入）
☑ 微信 secret / 商户 key 不要硬编码在前端
☑ 小程序 request 合法域名列表在公众平台配置白名单
八、常见"搭不起来"的排错路线图
症状
优先排查
HBuilderX 运行后白屏
manifest.json 的 AppID 是否为空；config.js 的 apiUrl 是否填错
接口报 404
后端入口是否在 public/，Nginx try_files 规则是否正确
微信登录 code→openid 失败
appid/secret 填反了？用的是测试号而非正式号？
支付能调起但 notify 不回调
notify_url 是否内网？是否 HTTPS？防火墙 443 开了没？
上传小程序提示"包过大"
没做分包；static 里塞了原图 → 移出去走 CDN
如果你愿意，下一步我可以按你手头具体源码的技术栈（比如是 ThinkPHP6 系 / SpringBoot 系 / Node系？前端是 Vue2 还是 Vue3+Pinia？）给你做精确到文件级的二次开发路线图——包括 SKU 引擎重写、库存预扣 Lua 脚本、订单状态机流转表和支付对账 Cron 的完整代码骨架。只要贴出你源码的根目录截图或 package.json / composer.json 即可。