简介这份微信小程序短视频源码面向小程序开发者、前端技术爱好者及希望学习短视频应用开发的人群提供播放、上传、点赞、评论等核心功能模块的完整前后端实现可用于技术学习、二次开发或搭建个性化短视频社交与娱乐类小程序。压缩包共45个文件约225KB以js逻辑脚本、json配置、wxss样式、vue组件、wxml模板为主另含map映射、图片素材及scss、html等辅助文件目录涵盖页面、组件、静态资源与公共配置等模块结构清晰便于按需查阅。目前已有338人学习下载。读者可借此理解短视频小程序的整体架构与数据流程掌握uniapp与vue.js在微信小程序中的组件化实践并基于封装好的功能模块快速扩展出属于自己的短视频项目。1. 从一份短视频小程序源码说起TypeScript 全栈到底能跑多快前阵子有个做本地生活服务的读者找到我说他们想给商户做一套短视频展示工具要求能发视频、能刷信息流、能点赞评论还得能塞进微信里直接用。他手里已经有一份「微信小程序-短视频源码」技术栈写着前端 TypeScript、后端 TypeScript问我这套东西到底能不能落地、跑起来要多久、坑在哪。我花了一个周末把这份源码从目录结构到接口链路完整拆了一遍结论是这套东西的骨架是完整的前端小程序端用 TypeScript 写页面逻辑和请求封装后端也是 TypeScript 起服务前后端语言统一对中小团队来说上手成本确实低。它适合谁适合想快速搭一个短视频 Demo 验证业务、或者需要一套可二次开发底座的开发者。但要注意源码给的是「能跑通」的基线不是「能上线」的成品中间隔着配置、鉴权、存储、审核好几道坎。下面我按实际拆解顺序把这份源码怎么用、参数怎么调、哪里容易翻车一条条讲清楚。2. 源码结构拆解前端小程序与后端服务的 TypeScript 分工2.1 目录布局与模块职责拿到源码先别急着npm install先看目录。这份源码典型的分法是两大块miniprogram/放小程序端server/放后端服务。小程序端里pages/按页面分目录常见的有index信息流、publish发布、detail播放详情、profile个人主页utils/放请求封装和工具函数components/放视频卡片、评论列表这类复用组件。后端server/里src/下一般分routes/、controllers/、services/、models/TypeScript 的tsconfig.json决定编译目标。为什么强调先看结构因为短视频类小程序的核心链路就三条拉流列表接口、推流上传接口、互动点赞评论接口。你只要在目录里定位到这三条链路的文件剩下的都是外围。我一般会先打开utils/request.ts看请求基址和拦截器再打开后端routes/看路由前缀两边一对接口地图就出来了。# 查看源码顶层结构先建立模块地图 ls -la # 典型输出会看到 miniprogram/ 和 server/ 两个目录 # 分别进入看 package.json确认依赖和启动脚本 cat miniprogram/package.json cat server/package.json这段命令的作用是快速确认项目是不是「双端分离」结构。参数上没什么可调的重点是看两个package.json里的scripts字段前端一般有build或直接靠开发者工具编译后端通常有dev、build、start。如果后端scripts里只有start没有dev说明它没配热重载改代码要手动重启这点后面避坑章会细说。2.2 前端 TypeScript 的编译配置小程序端用 TypeScript绕不开tsconfig.json和开发者工具的配合。这份源码里前端 TS 一般编译到 ES2017 或 ES5module设成CommonJS因为小程序运行时对模块系统的支持有限。关键参数是strict很多源码为了省事把它设成false这意味着类型检查形同虚设你写错字段名它也不报错。{ compilerOptions: { target: ES2017, module: CommonJS, strict: true, noImplicitAny: true, outDir: ./dist, rootDir: ./src, typeRoots: [./typings] }, include: [src/**/*.ts], exclude: [node_modules] }逻辑说明target决定编译后的语法级别小程序基础库版本低的话建议 ES5高版本可以 ES2017。strict和noImplicitAny建议打开虽然会暴露一堆历史类型错误但这是把「玄学 bug」提前到编译期的唯一办法。typeRoots指向typings目录小程序 API 的类型声明通常放这里缺了它wx.request这类调用会飘红。改完配置记得在开发者工具里勾选「使用 TypeScript 编译」否则工具还是按 JS 处理。2.3 后端 TypeScript 服务的启动链路后端这块源码一般用 Express 或 Koa 起服务TypeScript 通过ts-node或先tsc再node dist运行。启动入口通常是src/index.ts或src/app.ts里面做三件事加载环境变量、注册中间件、挂载路由。// server/src/index.ts 典型启动逻辑 import express from express; import dotenv from dotenv; import videoRouter from ./routes/video; dotenv.config(); // 加载 .env 里的端口、数据库地址等 const app express(); app.use(express.json()); // 解析 JSON 请求体上传接口需要调大 limit app.use(/api/video, videoRouter); // 视频相关路由统一前缀 const port process.env.PORT || 3000; app.listen(port, () { console.log(server running on ${port}); });逻辑说明dotenv.config()必须在读取process.env之前调用顺序错了端口永远是默认值。express.json()默认请求体上限是 100kb短视频上传如果走 JSON 传 base64 会直接爆掉常见做法是上传走独立接口用multipart/form-data或者把 limit 调到50mb。路由前缀/api/video要和前端request.ts里的 baseURL 对上对不上就是 404这是新手最常见的翻车点。3. 跑通第一条链路从环境配置到视频列表接口返回3.1 环境变量与依赖安装先把后端跑起来再管前端。后端依赖安装用npm install但 TypeScript 项目要注意devDependencies里的types/express、types/node有没有装全缺类型包编译会报一堆找不到声明的错。cd server npm install # 复制环境变量模板按实际改 cp .env.example .env # 编辑 .env至少改这几项 # PORT3000 # DB_HOST127.0.0.1 # DB_NAMEshortvideo # JWT_SECRET换成你自己的随机串 npm run dev参数说明PORT是服务监听端口前端请求基址要跟它一致。DB_HOST和DB_NAME指向数据库源码如果带 SQL 脚本先建库再导表。JWT_SECRET是签发登录令牌的密钥源码里如果写死了一个默认值务必换掉否则任何人都能伪造令牌。npm run dev依赖ts-node如果报command not found说明devDependencies没装全补一句npm install -D ts-node typescript。3.2 数据库表结构与视频字段短视频业务的核心表一般就几张用户表、视频表、点赞表、评论表。视频表里几个字段决定后面所有逻辑video_url播放地址、cover_url封面、duration时长、status审核状态、user_id作者。status这个字段特别关键源码里如果默认是 1 表示已发布那所有新上传的视频会直接可见正式环境必须改成先审后发。字段名类型说明常见坑idint主键自增无user_idint作者 ID没建索引列表查询慢video_urlvarchar播放地址存了本地路径换环境失效cover_urlvarchar封面地址为空时前端白屏durationint时长秒单位不统一有的存毫秒statustinyint0 待审 1 通过 2 拒绝默认值给错导致未审先发这张表不是让你照抄是让你对照源码里的建表语句检查。我见过最典型的翻车是video_url存了http://localhost:3000/uploads/xxx.mp4本地跑没问题一部署到别的机器全挂。正确做法是存相对路径前端拼基址或者直接上对象存储返回完整 URL。3.3 列表接口的请求与返回验证后端起来后先用 curl 验证列表接口别急着开小程序。# 请求视频列表带分页参数 curl -X GET http://127.0.0.1:3000/api/video/list?page1size10 \ -H Content-Type: application/json逻辑说明page和size是分页参数源码里如果没做上限校验size传 10000 会把数据库拖死常见做法是后端强制Math.min(size, 50)。返回体一般是{ code, data: { list, total }, msg }这种结构前端request.ts的拦截器会根据code判断成功失败。如果返回 401说明接口要登录令牌先走登录接口拿 token 再带上Authorization头。这一步验证通过说明后端链路是通的问题就缩小到前端了。4. 前端小程序联调请求封装、视频组件与登录态4.1 请求基址与拦截器配置小程序端最容易出问题的地方就是请求基址。开发者工具里可以勾「不校验合法域名」但真机预览必须配合法域名这是硬门槛。源码里utils/request.ts一般会导出一个baseURL本地调试指向http://127.0.0.1:3000上线要换成备案过的域名。// miniprogram/utils/request.ts const baseURL http://127.0.0.1:3000/api; // 本地调试用上线换域名 interface RequestOptions { url: string; method?: GET | POST; data?: Recordstring, any; } export function requestT(options: RequestOptions): PromiseT { const token wx.getStorageSync(token); // 从本地缓存取登录令牌 return new Promise((resolve, reject) { wx.request({ url: baseURL options.url, method: options.method || GET, data: options.data, header: { Content-Type: application/json, Authorization: token ? Bearer ${token} : // 有令牌就带上 }, success: (res) { if (res.statusCode 200) resolve(res.data as T); else reject(res); }, fail: reject }); }); }逻辑说明baseURL是全局唯一入口改一处全生效千万别在每个页面里写死地址。Authorization头用Bearer加令牌是常见约定后端解析时要对应。wx.getStorageSync(token)同步读取量小没问题但别在循环里调。如果接口返回 401拦截器里最好统一处理跳登录源码如果没做自己补一个否则用户令牌过期后每个页面都报错体验很差。4.2 视频组件的播放与列表复用短视频信息流的核心是视频组件。小程序原生video组件在列表里大量使用时性能吃紧常见做法是只让当前可见的那一个播放划走就暂停。源码里如果每个卡片都自动播放手机发烫、卡顿是必然的。!-- components/video-card/index.wxml -- view classcard video src{{item.video_url}} poster{{item.cover_url}} controls{{false}} autoplay{{currentId item.id}} bindplayonPlay object-fitcover / view classinfo text{{item.title}}/text text bindtaponLike{{item.liked ? 已赞 : 点赞}}/text /view /view逻辑说明autoplay绑定currentId item.id只有当前激活的那条才自动播这是控制性能的关键。controls{{false}}隐藏原生控件用自定义交互替代。object-fitcover保证视频填满容器不变形。bindplay用来在播放时把currentId更新为当前项形成互斥。这套逻辑源码里如果没写全自己补上否则列表滑动时多个视频同时播放翻车是迟早的。4.3 登录态与令牌刷新小程序登录走wx.login拿 code传给后端换 openid 和自定义令牌。源码里如果只做了首次登录没做令牌过期处理用户用一段时间就会莫名退出。// 登录并缓存令牌 export async function login() { const { code } await wx.login(); // 拿临时登录凭证 const res await request{ token: string }({ url: /user/login, method: POST, data: { code } }); wx.setStorageSync(token, res.token); // 缓存令牌 return res.token; }逻辑说明wx.login返回的 code 只能用一次五分钟内有效必须马上传给后端。后端拿 code 加 appid、secret 去换 openid再签发自己的令牌。令牌有效期源码里如果设得很短又没刷新机制建议改成七天并加静默续期。注意wx.login是异步的用await要确认基础库版本支持 Promise 化不支持就手动包一层。5. 避坑与排查这套源码最容易翻车的五个地方5.1 现象本地能播真机视频黑屏原因video_url是http协议或者localhost地址真机不认。小程序真机要求媒体资源走https且域名要在后台配置。解决把视频传到对象存储拿https完整地址回填数据库本地调试阶段在开发者工具勾「不校验合法域名」但真机预览必须配好域名没有捷径。5.2 现象上传大视频接口 413 或超时原因express.json()默认 100kb 限制或者上传接口没做分片一个大文件直接怼过去。解决上传走multipart/form-data用multer这类中间件接超过几十兆的视频建议前端分片、后端合并或者直接让前端传对象存储后端只存地址。别硬扛超时是必然的。5.3 现象列表滑动卡顿、手机发烫原因多个video同时自动播放或者列表没做虚拟滚动几百条数据全渲染。解决用currentId控制互斥播放划走的视频调pause列表分页加载别一次拉全量。源码里如果用了scroll-view且没开enhanced长列表性能也差换成recycle-view或分页。5.4 现象点赞数对不上刷新后归零原因点赞只改了前端状态没落库或者后端用了缓存但没做持久化重启就丢。解决点赞接口必须写库前端乐观更新后以接口返回为准。高并发场景用 Redis 计数再定时落库但源码级别一般直接写库就够别过度设计。5.5 现象TypeScript 编译报一堆类型错误跑不起来原因strict打开后历史代码类型不全或者types包缺失。解决先补types/node、types/express等类型包实在改不动的老代码局部用// ts-ignore顶一下但别全局关strict那是把问题埋进运行时。逐个文件修比一次性关掉强。6. 二次开发进阶把 Demo 改成能用的三个具体技巧第一个技巧是给视频表加软删除和审核状态机。源码里status往往只有 0 和 1实际业务至少要待审 / 通过 / 拒绝 / 下架四态配合deleted_at软删除避免物理删除后关联数据成孤儿。改的时候在services/video.ts里把查询条件统一加上deleted_at IS NULL别在每个接口里重复写。第二个技巧是接口返回统一加缓存头。列表接口如果每次全查库量一上来就慢。常见做法是对第一页结果做短缓存比如Cache-Control: max-age10或者后端用内存缓存加过期时间。注意点赞、评论这类写操作要清缓存否则用户点了赞刷新还是旧数据体验很怪。优化点改前改后收益列表查询全表查加索引 分页响应从秒级到毫秒视频地址本地路径对象存储 https真机可播令牌永不过期七天 续期安全且少掉线上传JSON base64分片直传大文件不超时第三个技巧是写一个最小化的冒烟测试脚本每次改完跑一遍确认登录、列表、上传、点赞四条链路没断。不用上完整测试框架一个bash脚本加curl就够。#!/bin/bash # smoke-test.sh 最小冒烟测试 BASEhttp://127.0.0.1:3000/api # 1. 登录拿令牌 TOKEN$(curl -s -X POST $BASE/user/login -H Content-Type: application/json -d {code:test} | grep -o token:[^]* | cut -d -f4) # 2. 拉列表 curl -s $BASE/video/list?page1size5 -H Authorization: Bearer $TOKEN | head -c 200 # 3. 点赞第一条 curl -s -X POST $BASE/video/like -H Authorization: Bearer $TOKEN -H Content-Type: application/json -d {videoId:1}逻辑说明grep -o加cut是从 JSON 里抠 token 的土办法够用就行。三步依次验证鉴权、读、写任何一步返回异常就说明链路断了。我一般把这个脚本放在项目根目录改完代码先跑它比开小程序点半天快得多。从那以后我每次拿到这类前后端同栈的源码都强制先跑一遍冒烟脚本再动业务代码省得改了半天发现是环境没配对。希望帮到你。本文还有配套的精品资源点击获取