简介：这份资源包面向小程序开发初学者与希望补齐全栈能力的开发者，汇集100多套微信小程序完整源码，每套均含后台管理与前端展示两部分，可用于对照学习页面布局、交互逻辑与接口设计。包内共176个文件，以136个zip源码包为主体，另含rar压缩包、png与jpg界面截图、txt说明及doc、docx、html等文档，整体约313.78MB，按项目分目录存放，便于逐套检索与导入研究。已有348人学习下载。前端部分覆盖WXML结构层、WXSS样式层与JS逻辑层的协同方式，以及微信小程序API调用；后台部分涉及服务端接口设计、用户管理、数据库操作与RESTful API，并延伸至OAuth认证、Ajax请求、WebSocket实时通信等前后端数据交互场景。源码案例横跨电商、社交、资讯、服务预订等应用方向，读者可借此理解完整应用生命周期、代码组织与版本控制策略，在实战分析中积累全栈开发与问题排查经验。
1. 从一份 100+ 套小程序源码包说起：双端项目到底怎么拆
前阵子有个做后端的朋友找我，说想接个小程序私活，前端页面能照着文档画，但后台接口怎么跟小程序端对齐、登录态怎么串、支付回调怎么接，心里完全没底。我直接把手里这份 100 多套小程序源码的资源包丢给了他——后台加前端双端齐全，从电商、预约、点餐到工具类都有。他花了一个周末挑了三套拆完，第二周就敢跟客户报价了。这份资源适合两类人：一是想通过真实项目补齐「前端页面 + 后台接口 + 数据库」完整链路的开发者，二是手里有类似需求、想找可复用骨架快速改的接活选手。它不是什么教程文档，就是一堆能直接跑起来的工程，价值在于你能看到别人怎么把双端串起来，而不是只看单端页面长什么样。
2. 技术栈与目录结构：拿到源码包先看这三层
2.1 双端项目的典型技术组合
这类小程序源码包，前端基本跑不出微信原生小程序（WXML + WXSS + JS）和 uni-app 两个方向，后台则集中在 Node.js（Express / Koa）和 PHP（ThinkPHP / 原生）之间。我拆过的几十套里，占比最高的组合是「微信原生小程序 + Node.js Express + MySQL」，其次是「uni-app + PHP + MySQL」。为什么是这两套？因为接私活场景下，客户要的是能快速部署、服务器成本低、后期好改。Node.js 一套 npm 装完就能跑，PHP 虚拟主机就能部署，MySQL 更是标配。
你拿到包之后，先别急着翻代码，按这三层扫一遍：
- 根目录：看有没有
README.md、package.json、docker-compose.yml，这三个文件决定了你能不能五分钟内跑起来。 - 前端目录：通常叫
miniprogram/、client/、frontend/，里面找app.json（页面路由注册）和project.config.json（开发者工具项目配置）。 - 后台目录：通常叫
server/、admin/、backend/，找app.js或index.php入口，再看routes/或controller/目录。
2.2 目录结构实例拆解
以一套典型的电商类小程序为例，目录大概长这样：
project-root/ ├── miniprogram/ # 小程序前端 │ ├── pages/ # 页面目录 │ │ ├── index/ # 首页 │ │ ├── goods/ # 商品详情 │ │ └── order/ # 订单 │ ├── utils/ # 工具函数 │ │ └── request.js # 请求封装 │ ├── app.js # 全局逻辑 │ ├── app.json # 全局配置 │ └── app.wxss # 全局样式 ├── server/ # 后台服务 │ ├── routes/ # 路由 │ ├── controllers/ # 控制器 │ ├── models/ # 数据模型 │ ├── config/ # 配置 │ │ └── db.js # 数据库连接 │ └── app.js # 服务入口 └── sql/ # 数据库脚本 └── init.sql # 建表 + 初始数据这个结构的好处是前后端完全分离，前端只管调接口，后台只管返回 JSON。你改的时候也清楚：页面问题去miniprogram/pages/，接口问题去server/controllers/，数据问题去server/models/和sql/。
2.3 怎么快速判断一套源码值不值得拆
100 多套不可能每套都细看，我一般用三个标准筛：
| 判断维度 | 值得拆的信号 | 直接跳过的信号 |
|---|---|---|
| 依赖完整性 | package.json 依赖清晰，有 lock 文件 | 依赖缺失、版本写死且过旧 |
| 数据库脚本 | 有完整 init.sql，含建表和初始数据 | 只有零散 SQL 片段 |
| 接口封装 | 前端有统一 request 封装，后台有统一返回格式 | 每个页面各写各的请求 |
按这个标准筛完，100 套里大概有 30 套值得细看，剩下的当页面素材库用就行。
3. 跑起来：从数据库到双端联调的完整步骤
3.1 环境准备与数据库初始化
先确认本机环境：Node.js 建议 16 或 18（别用太新的，有些老项目依赖编译不过），MySQL 5.7 或 8.0，微信开发者工具装最新稳定版。PHP 项目的话再装个 PHP 7.4 + Composer。
数据库初始化是第一步，也是最容易翻车的地方。打开sql/init.sql，先看编码和引擎：
-- 常见建表语句头部 CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `openid` varchar(64) NOT NULL COMMENT '微信openid', `nickname` varchar(64) DEFAULT NULL, `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `idx_openid` (`openid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;这里注意两点：utf8mb4是必须的，不然 emoji 存不进去；openid加了唯一索引，说明这套源码的登录逻辑是靠 openid 做用户标识的。导入命令：
mysql -u root -p your_database < sql/init.sql导入完检查一下表数量对不对，有些包会分多个 sql 文件，别只导了一个。
3.2 后台服务启动与配置修改
后台启动前先改配置文件。常见的是server/config/db.js或.env文件：
// server/config/db.js module.exports = { host: 'localhost', user: 'root', password: 'your_password', // 改成你的密码 database: 'your_database', // 改成你建的库名 port: 3306, charset: 'utf8mb4' };然后装依赖、启动：
cd server npm install npm run dev # 或 node app.js看到控制台输出Server running on port 3000就说明后台起来了。这时候先用浏览器或 Postman 测一个接口，比如http://localhost:3000/api/goods/list，能返回 JSON 就说明数据库连通了。如果报ER_ACCESS_DENIED_ERROR，就是密码错了；报ER_BAD_DB_ERROR，就是库名错了。
3.3 小程序端配置与联调
前端打开微信开发者工具，导入miniprogram/目录。第一件事是改project.config.json里的appid，没有正式 appid 就选「测试号」。第二件事是改请求地址，通常在utils/request.js：
// miniprogram/utils/request.js const BASE_URL = 'http://localhost:3000/api'; // 改成你的后台地址 const request = (url, method = 'GET', data = {}) => { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + url, method, data, header: { 'content-type': 'application/json', 'Authorization': wx.getStorageSync('token') || '' // 带上登录态 }, success: (res) => { if (res.data.code === 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg, icon: 'none' }); reject(res.data); } }, fail: reject }); }); };这段封装做了三件事：统一拼接 baseURL、自动带 token、统一处理返回码。你改的时候只需要动BASE_URL一个地方。联调时如果开发者工具报「不在以下 request 合法域名列表中」，去「详情 → 本地设置」勾上「不校验合法域名」就行。
提示：本地联调阶段后台地址用
localhost没问题，但真机预览时手机访问不到电脑的 localhost，需要换成局域网 IP，比如http://192.168.x.x:3000/api。
4. 核心模块拆解：登录态、请求封装与数据流转
4.1 微信登录链路：从 code 到 token
小程序登录是整个双端项目里最关键的链路，也是新手最容易卡住的地方。完整流程是：小程序端调wx.login()拿 code → 传给后台 → 后台拿 code + appid + secret 调微信接口换 openid 和 session_key → 后台生成 token 返回 → 小程序存 token，后续请求带上。
后台核心代码：
// server/controllers/auth.js const axios = require('axios'); const jwt = require('jsonwebtoken'); exports.login = async (req, res) => { const { code } = req.body; // 用 code 换 openid const { data } = await axios.get('https://api.weixin.qq.com/sns/jscode2session', { params: { appid: process.env.APPID, secret: process.env.SECRET, js_code: code, grant_type: 'authorization_code' } }); if (!data.openid) return res.json({ code: 400, msg: '登录失败' }); // 查用户，没有就注册 let user = await User.findOne({ where: { openid: data.openid } }); if (!user) { user = await User.create({ openid: data.openid, nickname: '新用户' }); } // 签发 token，有效期 7 天 const token = jwt.sign({ uid: user.id }, process.env.JWT_SECRET, { expiresIn: '7d' }); res.json({ code: 200, data: { token, userInfo: user } }); };参数说明：appid和secret在小程序后台「开发管理」里拿，JWT_SECRET自己随便设一个长字符串。expiresIn控制 token 有效期，接私活场景设 7 天比较合适，太短用户老要重登，太长不安全。
4.2 请求封装与统一返回格式
后台所有接口最好统一返回格式，前端才好统一处理。我一般用中间件包一层：
// server/middleware/response.js module.exports = (req, res, next) => { res.success = (data = null, msg = 'ok') => { res.json({ code: 200, msg, data }); }; res.fail = (msg = 'error', code = 400) => { res.json({ code, msg, data: null }); }; next(); };控制器里就直接res.success(data)或res.fail('参数错误')。这样前端request.js里判断res.data.code === 200就够了，不用每个接口写一套判断逻辑。
4.3 数据流转：一个商品列表请求的完整链路
以商品列表为例，走一遍完整链路你就理解双端怎么配合了：
- 小程序
pages/index/index.js调request('/goods/list', 'GET', { page: 1 }) request.js拼成http://localhost:3000/api/goods/list?page=1，带上 token- 后台
routes/goods.js匹配到路由，转给controllers/goods.js - 控制器调
models/goods.js查数据库，返回商品数组 - 控制器
res.success(list)返回 JSON - 前端
request.js的success回调拿到res.data.data，setData渲染页面
这条链路里任何一环断了都会导致页面空白。排查顺序建议从后往前：先看后台接口能不能返回数据，再看前端请求有没有发出去，最后看setData有没有写对。
5. 避坑与常见问题：拆了 30 套源码后我踩过的雷
5.1 数据库导入报错Unknown character set: utf8mb4
现象：导入 sql 文件时直接报错中断。原因：本机 MySQL 版本太低（5.5 以下）不支持 utf8mb4。解决：升级到 5.7 以上，或者把 sql 里的utf8mb4全局替换成utf8（但 emoji 会丢）。
5.2 小程序请求报「不在合法域名列表」
现象：开发者工具里接口调不通，控制台报域名不合法。原因：微信默认只允许 https 且备案过的域名。解决：开发阶段在「详情 → 本地设置」勾选「不校验合法域名」，上线前再把后台部署到 https 域名并配置到小程序后台。
5.3 后台启动报Cannot find module 'xxx'
现象：npm install完启动还是缺模块。原因：有些老项目依赖写在devDependencies里但启动时要用，或者 lock 文件锁了旧版本。解决：先npm install xxx --save补上，还不行就删掉node_modules和 lock 文件重新装。
5.4 登录后接口还是返回 401
现象：明明登录成功了，调其他接口还是提示未授权。原因：token 没存进去或者请求头没带上。解决：检查wx.setStorageSync('token', token)有没有执行，再检查request.js的 header 里Authorization拼对没有。常见错误是后台用Bearer xxx格式解析，前端只传了裸 token。
5.5 真机预览白屏但开发者工具正常
现象：工具里跑得好好的，扫码真机就白屏。原因：通常是请求地址用了 localhost，或者用了工具支持但真机不支持的 API。解决：把BASE_URL换成局域网 IP，检查有没有用到wx.getSystemInfoSync之类需要真机权限的接口。
注意：这五条是我拆包过程中反复遇到的，基本覆盖了 80% 的启动失败场景。遇到新问题先按「后台接口 → 前端请求 → 页面渲染」的顺序定位，别一上来就怀疑代码写错了。
6. 二次开发：怎么把一套源码改成自己的项目
拿到一套能跑通的源码后，二次开发的核心思路是「先换皮、再换逻辑、最后加功能」。我一般按这个顺序来，翻车概率最低。
第一步：换皮。改app.json里的navigationBarTitleText、app.wxss里的主题色、pages/index/里的 banner 图和文案。这一步不碰逻辑，纯粹让项目看起来像你的。改完跑一遍，确认没改坏。
第二步：换数据模型。打开sql/init.sql，把业务表改成你自己的。比如原来是商品表，你要做预约，就把goods改成appointment，字段从price、stock改成date、time_slot。改完同步改models/里对应的模型定义和controllers/里的查询逻辑。这一步最容易漏改，建议用全局搜索把旧表名搜一遍。
第三步：加功能。比如加一个「分享得积分」的功能，需要：小程序端加分享按钮和onShareAppMessage，后台加一个POST /api/share接口，数据库加一张share_log表。加功能时尽量复用现有的 request 封装和返回格式，别自己另起一套。
验证方法很简单：每改完一步，用 Postman 把相关接口全跑一遍，再用开发者工具把相关页面点一遍。别攒着一起测，出了问题不好定位。
// 加新接口的模板，照着现有 controller 抄 exports.share = async (req, res) => { const { uid } = req.user; // 从 token 中间件解出来的 const { goodsId } = req.body; await ShareLog.create({ uid, goodsId, createTime: new Date() }); await User.increment('points', { by: 10, where: { id: uid } }); res.success({ points: 10 }); };最后说个血泪经验：改任何一套源码之前，先git init提交一次原始版本。我早期有次改登录逻辑改崩了，又没备份，硬生生花了一晚上从另一套类似源码里把逻辑拼回来。从那以后我每次拆新包，第一件事就是建 git 仓库、提交原始版本、再开分支改。这个习惯帮我省了至少三次通宵。希望帮到你。
本文还有配套的精品资源，点击获取
