简介这份资源包面向小程序开发初学者与希望补齐全栈能力的开发者汇集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.jsExpress / Koa和 PHPThinkPHP / 原生之间。我拆过的几十套里占比最高的组合是「微信原生小程序 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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这里注意两点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?page1带上 token后台routes/goods.js匹配到路由转给controllers/goods.js控制器调models/goods.js查数据库返回商品数组控制器res.success(list)返回 JSON前端request.js的success回调拿到res.data.datasetData渲染页面这条链路里任何一环断了都会导致页面空白。排查顺序建议从后往前先看后台接口能不能返回数据再看前端请求有没有发出去最后看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 仓库、提交原始版本、再开分支改。这个习惯帮我省了至少三次通宵。希望帮到你。本文还有配套的精品资源点击获取