简介这是一份基于JavaScript开发的短视频去水印微信小程序完整项目附源代码与文档说明支持扫码预览面向计算机相关专业学生、小程序开发初学者及需要课程设计或毕业设计素材的开发者。项目已实现多数主流短视频平台的去水印解析、无水印下载、积分签到、历史解析记录与记录下载并集成了福利广告接入页、帮助页和个人信息页功能链路完整。资源共70个文件其中11个js负责核心逻辑、13个json管理页面配置、12个wxss定义样式、8个wxml构建页面结构另有24张png界面素材和说明文档压缩包约280KB导入微信开发者工具即可运行调试。代码经完整测试后上传作者提及答辩评审平均分达96分并提供私聊远程教学支持适合研究接口请求封装、前后端联动及组件化页面设计也可在已有功能基础上二次修改。目前已有75人学习下载可作为小程序实战学习与毕设演示的参考。1. 短视频去水印微信小程序从分享口令到本地视频的完整技术链路提到短视频去水印微信小程序最容易被误解的一点是它不是在视频画面上擦掉水印而是通过解析分享链接从平台服务器里拿到那个未加水印的原始视频地址。真正动手做你会发现客户端代码用 JavaScript 写在微信小程序的 Page 生命周期里服务端同样可以用 Node.js 跑同一门语言整套项目的核心就落在“解析”和“下载保存”这两件事上。这个方案适合两类人一类是刚接触微信小程序、想通过视频下载项目同时练到前后端的开发者另一类是手里已有服务器、想快速交付一个能扫码预览的解析工具的从业者。先不说复杂功能最小可用版本只需要三件事解析接口、预览页面、保存能力。2. 解析链路与服务端实现从分享口令到无水印视频地址2.1 为什么解析必须放在服务端跨域、签名与风控短视频平台的分享口令通常是一段短文本加一个短链例如“7.43 abc:/ ”。小程序端直接拿这个口令去请求平台接口会有三个绕不开的问题。第一是跨域小程序wx.request的域名必须在小程序后台配置为 request 合法域名你不可能把别人平台的域名配到自己的小程序里。第二是签名平台侧的视频信息接口大多带签名参数签名算法随版本更新频繁变化把它放在客户端等于把密钥贴在门上。第三是风控平台对 User-Agent、IP 频率、Referer 都有校验来自同一 IP 的高频请求很容易被限制放在服务端至少可以把 UA 和 Referer 统一管理。所以这套项目里我把解析层默认放在 Node.js 服务端。JavaScript 在这里扮演两个角色小程序页面里的逻辑脚本负责交互服务端的 Node.js 负责请求转发和地址解析。下面从最小链路开始拆。2.2 第一步短链重定向与视频 ID 提取分享口令里的短链不是视频真实地址需要先请求一次拿到重定向后的页面 URL再从页面 URL 中提取视频 ID。常见的页面 URL 形如https://www.example.com/video/7261xxxxxx视频 ID 就是那一串数字。我一般会用下面的代码处理这个环节const https require(https); // 常见短视频分享短链的 User-Agent服务端请求时尽量带全 const UA Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36; function resolveShortUrl(shortUrl) { return new Promise((resolve, reject) { const req https.get(shortUrl, { headers: { User-Agent: UA } }, (res) { const location res.headers.location || shortUrl; res.resume(); // 尽快释放连接避免 socket 挂起 resolve(location); }); req.on(error, reject); }); } function extractVideoId(realUrl) { const match realUrl.match(/\/video\/(\d)/); return match ? match[1] : null; } async function parseShareText(shareText) { const shortUrl shareText.match(/https?:\/\/[^\s]/)?.[0]; if (!shortUrl) throw new Error(未在分享口令中找到链接); const realUrl await resolveShortUrl(shortUrl); const videoId extractVideoId(realUrl); if (!videoId) throw new Error(未能从页面 URL 中提取视频 ID); return videoId; }这里的逻辑并不复杂但有两个参数值得注意。res.resume()很多人会漏掉不消费响应体的话Socket 会一直占着不释放短链多的时候 Node.js 的连接池很快被打满。UA字符串要尽量贴近真实浏览器的版本平台分享链接对非浏览器 UA 会直接返回 403如果你用默认的Node.js/18.xUA第一步就会翻车。拿到 videoId 之后还要处理一种特殊情况有些分享口令里的短链会二次跳转第一次的 Location 是中间页中间页里的脚本再跳一次。遇到这种情况需要把resolveShortUrl循环执行两次并判断最终 URL 是否包含/video/。注意不要在客户端解析短链。小程序端的wx.request拿不到重定向的 Location 头而且平台对来自小程序的请求识别度很高解析动作放在服务端是这套架构的地基。2.3 第二步请求平台接口拿无水印播放地址有了 videoId下一步是请求平台的视频信息接口。不同平台的接口路径和返回字段不一样但结构是通用的请求方带 UA、Referer、必要参数接口返回 JSON其中通常包含无水印的视频地址列表。我用的请求模板如下function fetchVideoInfo(videoId) { return new Promise((resolve, reject) { const apiPath /aweme/v1/play/?video_id${videoId}ratio1080p; const options { hostname: api.example.com, path: apiPath, headers: { User-Agent: UA, Referer: https://www.example.com/, Accept: application/json } }; const req https.get(options, (res) { let raw ; res.on(data, (chunk) { raw chunk; }); res.on(end, () { try { const json JSON.parse(raw); const playUrl json.play_addr?.url_list?.[0]; if (!playUrl) return reject(new Error(接口未返回播放地址)); resolve(playUrl); } catch (err) { reject(err); } }); }); req.on(error, reject); }); }这段代码里最容易被忽略的是ratio1080p这个参数。很多平台默认给的是 720p 的地址加了这个参数后返回的清晰度更高反过来说有些平台不加参数时返回的地址带时间戳签名几分钟就过期。处理办法是拿到播放地址后先做一次 HEAD 请求检查状态码和有效期失效就重新拉一次function checkUrlAlive(url) { return new Promise((resolve) { const req https.request(url, { method: HEAD }, (res) { res.resume(); resolve(res.statusCode 200 res.statusCode 300); }); req.on(error, () resolve(false)); req.end(); }); }也要提醒api.example.com是示意路径不同平台的接口路径和字段名会变play_addr可能变成playaddrurl_list可能变成urls。我把这个结构抽成一个独立的解析函数平台每次升级只需要改一个文件这是这类工具能活过三个月的前提。2.4 第三步给小程序一个统一 JSON 结构小程序端不需要关心平台差异服务端返回的字段越稳定越好。我在项目中统一返回这样一个结构{ code: 0, msg: ok, data: { videoUrl: https://xxx/play/video.mp4?signxxx, cover: https://xxx/poster.jpg, duration: 153 } }videoUrl是实际可下载的无水印地址cover是封面duration是时长秒。小程序端拿到这个 JSON 后只管渲染、预览、下载平台差异全部在服务端消化掉。这样设计还有一个好处之后接新平台时小程序端一行代码都不用改。如果服务端解析失败不要让小程序端看到散乱的错误信息。统一返回{ code: 4001, msg: 解析失败请检查链接或稍后重试 }小程序端根据 code 做 toast 提示即可。错误码建议从 4000 开始分段4001 表示链接格式错误4002 表示平台未支持4003 表示平台风控拦截这样排查问题时日志里能直接看出是哪一类失败。3. 小程序端 JavaScript 实现输入口令、预览视频与保存到相册3.1 页面结构与输入校验小程序端的核心页面只需要两个控件一个文本框让用户粘贴分享口令一个按钮触发解析。我用 WXML 写一个最简页面view classcontainer textarea placeholder粘贴分享口令 bindinputonShareTextInput value{{shareText}} maxlength-1 / button typeprimary loading{{loading}} bindtaponParse 解析视频/button video wx:if{{videoUrl}} src{{videoUrl}} controls show-center-play-btn / button wx:if{{videoUrl}} bindtaponDownload 保存到相册/button /viewtextarea的maxlength-1表示不限长度分享口令通常比较长默认 140 字限制会切断链接。video组件放在解析成功后才渲染避免页面加载时就去请求空地址。这里有个细节show-center-play-btn让 Android 和 iOS 在播放器中间都显示播放按钮不加的话部分 iOS 版本只有左下角小按钮用户会以为视频没加载出来。3.2 请求封装把 wx.request 包成 Promise小程序原生的wx.request是回调风格多段逻辑叠在一起很容易写出回调地狱。我在这个项目里把请求封装成 Promise 风格这也是每次做微信小程序项目实例都会先做的一步// utils/request.js function request(options) { return new Promise((resolve, reject) { wx.request({ ...options, success: (res) { if (res.statusCode 200 res.statusCode 300) { resolve(res.data); } else { reject(new Error(HTTP ${res.statusCode})); } }, fail: reject }); }); } module.exports request;封装的时候需要注意一点wx.request在 statusCode 为 401/500 时也会走success回调所以要在内部判断状态码而不是把resolve直接交给success。把res.data当作解析结果返回后页面里就可以用async/await写逻辑了。3.3 微信小程序中的视频下载downloadFile 与 saveVideoToPhotosAlbum 的配合解析逻辑放在onParse里。先做本地校验再请求服务端最后把返回的videoUrl写入 data 用于渲染。下载则拆成wx.downloadFile和wx.saveVideoToPhotosAlbum两步const request require(../../utils/request); const downloadFile (url) new Promise((resolve, reject) { wx.downloadFile({ url, success: (res) { if (res.statusCode 200 || res.statusCode 206) { resolve(res.tempFilePath); } else { reject(new Error(下载失败)); } }, fail: reject }); }); const saveVideo (filePath) new Promise((resolve, reject) { wx.saveVideoToPhotosAlbum({ filePath, success: resolve, fail: reject }); }); Page({ data: { shareText: , videoUrl: , loading: false }, onShareTextInput(e) { this.setData({ shareText: e.detail.value }); }, async onParse() { const shareText this.data.shareText.trim(); if (!shareText) { wx.showToast({ title: 请先粘贴分享口令, icon: none }); return; } this.setData({ loading: true }); try { const res await request({ url: https://your-domain.com/api/parse, method: POST, data: { shareText }, header: { Content-Type: application/json } }); if (res.code 0) { this.setData({ videoUrl: res.data.videoUrl }); } else { wx.showToast({ title: res.msg, icon: none }); } } catch (err) { wx.showToast({ title: 解析失败请稍后重试, icon: none }); } finally { this.setData({ loading: false }); } }, async onDownload() { const videoUrl this.data.videoUrl; if (!videoUrl) return; wx.showLoading({ title: 保存中 }); try { const tmpPath await downloadFile(videoUrl); await saveVideo(tmpPath); wx.showToast({ title: 已保存到相册 }); } catch (err) { if (err.errMsg err.errMsg.includes(auth deny)) { this.promptOpenSetting(); } else { wx.showToast({ title: 保存失败, icon: none }); } } finally { wx.hideLoading(); } }, promptOpenSetting() { wx.showModal({ title: 需要相册权限, content: 请在设置中开启相册权限后重试, confirmText: 去设置, success: (res) { if (res.confirm) wx.openSetting(); } }); } });这段代码有三个容易翻车的点。第一个是wx.downloadFile的success回调里res.statusCode可能是 200 也可能是 206只判断 200 会漏掉部分平台返回的分段下载响应。第二个是saveVideoToPhotosAlbum失败时err.errMsg在不同基础库版本里措辞不一样auth deny是兼容写法用includes判断而不是全等匹配。第三个是wx.showLoading和wx.showToast不能同时显示否则 toast 会被 loading 盖掉所以代码里先hideLoading()再弹 toast。3.4 相册授权失败的两个分支保存到相册必须先获得scope.writePhotosAlbum权限。第一次调用saveVideoToPhotosAlbum时系统会自动弹授权框用户如果点了拒绝之后再不会自动弹只能去设置页手动开启。这里有个更隐蔽的情况在 iOS 上如果用户之前拒绝过相册权限调用wx.saveVideoToPhotosAlbum返回的err.errMsg不一定是auth deny可能是saveVideoToPhotosAlbum:fail fail。所以只靠错误码判断不够我的做法是在saveVideo失败后追加一次wx.getSetting检查权限状态function checkAlbumAuth() { return new Promise((resolve) { wx.getSetting({ success: (res) { const auth res.authSetting[scope.writePhotosAlbum]; resolve(auth ! false); // undefined 表示还没请求过权限 } }); }); }这个函数放在onDownload的 catch 分支里先调用再决定是直接提示失败还是引导去设置。undefined 和 false 的区别值得单独记一下undefined 意味着可以再次触发系统授权弹窗false 意味着只能引导去设置页。4. 扫码预览与交付源码结构、文档说明与体验版发布4.1 源码结构怎么组织这套项目我会拆成两个顶层目录小程序和服务端的代码不混在一起。一个常见的组织方式如下short-video-parser/ ├── miniprogram/ # 小程序端源码 │ ├── pages/ │ │ ├── index/ # 粘贴口令与解析页 │ │ └── player/ # 视频预览与保存页 │ ├── utils/ │ │ ├── request.js # Promise 化请求封装 │ │ └── auth.js # 相册权限检查 │ ├── app.js │ └── app.json ├── server/ # Node.js 解析服务 │ ├── routes/ │ │ └── parse.js # 解析接口路由 │ ├── services/ │ │ └── platform.js # 各平台解析逻辑 │ └── app.js ├── README.md # 项目说明、部署步骤、接口文档 └── project.config.json # 微信开发者工具的项目配置miniprogram/和server/分开是必须的因为运行环境完全不同小程序端跑在微信的 JavaScript 引擎里受平台 API 限制服务端跑在 Node.js 里可以自由使用https、fs等模块。把两者放同一个目录会让人误以为代码可以互相引用实际连模块规范都不一样。services/platform.js单独成文件就是为了应对平台接口升级的频繁改动后面接第二个平台时也只需要在这个目录里新增文件。4.2 README 与接口文档交付时最少要写清的四件事源代码交付出去对方第一件事是打开 README。如果 README 只写一句“启动项目”这个交付是不合格的。我会在 README 里至少覆盖下面四件事第一是环境要求。Node.js 版本、微信开发者工具版本、小程序基础库版本写清楚能省掉一半的“跑不起来”问题。第二是接口文档服务端有哪些路由、请求和响应长什么样给一个最小示例。第三是部署步骤从拉取代码到启动服务、再到把域名配到小程序后台的完整命令序列。第四是配置项说明UA、Referer、服务端口、是否启用缓存这些不能写死在代码深处。接口文档部分我习惯直接贴一段请求示例POST /api/parse Content-Type: application/json { shareText: 7.43 abc:/ 复制打开短视频平台看看... } 响应 { code: 0, msg: ok, data: { videoUrl: https://xxx/play/video.mp4, cover: https://xxx/poster.jpg, duration: 153 } }4.3 扫码预览的三种形态开发版、体验版与正式版微信小程序的“扫码预览”和普通网页的二维码不同它只在微信里有效而且分为三种形态交付时最容易搞混的就是它们三者的区别。开发版预览码来自微信开发者工具顶部的“预览”按钮扫码后打开的是当前正在调试的版本只对当前开发者微信有效且有效期很短通常用来在真机上验证本地改动。体验版需要在小程序管理后台把已上传的代码设为体验版然后把二维码发给体验成员体验版长期可用是小团队内部测试的主要形态。正式版是审核发布后才能得到的二维码任何人都可以扫。形态从哪里获取谁能扫生命周期开发版开发者工具“预览”按钮当前开发者短约 25 分钟内有效体验版小程序后台设为体验版后台添加的体验成员长期直到被替换正式版审核发布后自动生成所有微信用户长期永久这里要特别提醒如果代码上传了但没在后台“设为体验版”扫码打开会提示“版本不存在”。很多第一次做交付的人在这一步卡住以为上传代码就等于发布实际传上去的只是一个待选版本包还需要手动指定为体验版。另外涉及“扫码预览”的交付演示通常用体验版就够了没必要等正式审核体验版对客户演示已经非常接近线上效果。4.4 部署前提https 证书、域名与 downloadFile 合法域名小程序端的wx.request和wx.downloadFile都要求域名是合法的 https 地址。开发阶段可以在开发者工具里勾选“不校验合法域名”一旦换成真机预览这个开关就不生效了必须在小程序后台配置 request 合法域名和 downloadFile 合法域名。需要注意 downloadFile 合法域名是独立配置的不是配了 request 就自动覆盖。我见过有人 request 配好了、downloadFile 没配解析正常但下载永远失败日志里只有一句url not in domain list。另外如果你在服务端做过一层跳转downloadFile实际下载的地址可能和后台配置的域名不一致那就得在服务端把视频流转发回来而不是返回一个 302 跳转地址。这个取舍也是架构层面的直接返回 CDN 地址省流量但域名不受控服务端转发域名可控但要多花带宽。个人项目我一般选前者商用项目选后者。5. 常见问题与避坑域名校验、真机兼容与审核限制的 5 次翻车5.1 真机请求报 url not in domain list现象开发者工具里一切正常扫码到真机上点击解析后提示请求失败控制台输出url not in domain list。原因开发者工具默认关闭了域名校验真机上没有这个豁免。或者是后台配置了 request 合法域名但这次请求的地址是 IP 加端口而微信要求必须是域名。解决去小程序后台把服务端域名加进 request 合法域名。开发阶段临时调接口可以用开发者工具的“不校验合法域名”开关但涉及下载视频时仍建议配好 downloadFile 合法域名。如果服务器暂时没绑定域名最省事的做法是用内网穿透类工具把本地服务临时映射到公网但那只适合自测不建议作为交付方案。5.2 Android 能保存、iOS 保存失败现象同一段代码Android 手机保存视频到相册成功iPhone 上一直报“保存失败”控制台无明确错误。原因iOS 对saveVideoToPhotosAlbum写入的视频格式和编码更敏感。平台返回的源格式常常是 flv 或带特殊编码的 mp4Android 的媒体库兼容性更强iOS 会直接拒绝写入。解决不要在客户端做格式转换iOS 上你没有现成的转码能力。正确做法是在服务端把视频统一转成 H.264 编码的 mp4 再返回。用 FFmpeg 转码的命令大致是ffmpeg -i input.flv -vcodec h264 -acodec aac -movflags faststart output.mp4转完再用downloadFile下载保存。这属于服务端改动小程序端代码不用动。5.3 上午解析正常、下午所有视频解析失败现象接口上午还在正常工作下午开始返回“验证失败”或空数据过几个小时又恢复。原因平台侧的风控生效了常见诱因是同一个 IP 高频请求、UA 固定不变、或者缺少 Referer。平台对非真实用户行为的识别很敏感触发后一般会限制一段时间。解决三条措施配合。在服务端维护一个 UA 池轮流使用对同一个视频 ID 做短时间缓存把请求频率限制到每秒不超过 1 次。另外把签名参数的生成逻辑独立成一个模块平台升级时只需要改那一个文件。我的经验是这类问题没法根治只能降低触发频率所以解析层的错误率监控也要做失败率陡增时能第一时间知道是平台升级还是被风控。5.4 体验版扫码打开是白屏现象代码上传到微信后台并设为体验版体验成员扫二维码后打开小程序首页空白也没有任何报错弹窗。原因最常见的是两种情况。一是上传的代码版本和本地开发版本不一致本地有改动但没有重新上传体验版跑的是旧包二是app.json里的第一个页面路径写错了打开直接找不到页面微信端表现就是白屏。解决先把app.json的pages数组首位确认是pages/index/index再确认体验版对应的版本号是不是最新上传的那一个。我习惯在每次上传前先在开发者工具里点“预览”自测一次当前包再上传代码并设为体验版这样能保证体验版和自测版本一致。这个习惯帮我避免过多次白屏问题。5.5 提审被拒去水印字样的合规问题现象小程序提审时被退回理由是涉及侵权或含不当功能。原因审核对“去水印”这类字样的功能格外敏感因为在短视频平台上这通常与未经授权下载他人内容相关。就算你的工具是合法用途名称和介绍里直接写“去水印”也容易触发人工审核。解决功能层面把 UI 文案改成“视频解析”“视频保存助手”这类中性描述在关于页或用户协议里加一句“仅限解析已获授权的视频请遵守平台规则与版权法”。技术架构不变解析能力仍然可以是通用的。这条不完全是技术问题但在交付给客户时往往是最先被问到的我在对接时都会提前说明避免客户上线时措手不及。6. 验证方法与进阶方向从单接口解析到可维护的解析服务看一个解析项目好不好不是看代码能不能跑而是看维护成本。我给自己定的验证流程是固化 10 条不同平台的真实分享链接每次改完服务端代码后跑一遍全集统计解析成功率。低于 90% 就不要发布因为平台接口更新后失败一定会集中在某一种链接形态上回归测试能立刻暴露问题。这比看接口日志高效得多。进阶方向上个人项目可以先加缓存。同一个视频 ID 短时间内被解析两次的请求很常见在服务端用内存缓存或 Redis 存一份 videoUrlTTL 设 30 分钟能显著降低上游接口的调用量。再往后可以把 Node.js 服务整体迁移到云函数按调用付费不用养一台服务器接口逻辑和现在完全一样只是把入口换成云函数的 HTTP 触发器。还有一个更省事的做法如果用户只给自己用签名和 UA 依然留在服务端不要让关键逻辑暴露在客户端。做这个方向最深的教训是永远不要把平台接口当成稳定依赖。它的字段名、签名算法、风控策略都在变代码设计上就必须给这些变化留好位置。把解析逻辑收敛到单独的服务模块把 UA、Referer、超时时间抽成配置把错误信息统一成固定 code下次平台升级时你就不会手忙脚乱。希望这篇文章里踩过的坑能帮你少走一两次弯路祝你把项目跑通。本文还有配套的精品资源点击获取