上线短视频去水印功能到小程序

上线短视频去水印功能到小程序已关闭评论
4 次浏览

A+

所属分类：Web前端

摘要

背景：因为其他小程序去水印还得看广告，很烦，想着自己作为程序员，就像开发一款纯净版的去水印功能，所以在全球最大同性交友网站上搜索一番，哎，果然找到了一个好项目，遂用之，哎，还挺好用，所有就放到自己的小程序上了，哎，美滋滋。

便宜好用的国外VPS推荐

其他人开发的小程序：

去水印github项目地址：
https://github.com/5ime/video_spider

代码是php版本的，核心就两个文件，方便改造成其他语言：

看代码是支持很多个平台，官方介绍：

这么多平台，我也没有一个个尝试，但是我试了皮皮虾是能百分之百成功的。

代码挺简洁明了，每个平台不一样的提取方式，现在本地搭建一下运行环境。我使用upupw这个php集成环境：

第一次请求就跑通了：

跑一下连续测试看看平均请求时间：

10次大概平均请求时间在1.5秒左右，这个速度还可以了。

有了服务，还得一台服务器才行，我就部署到了我在阿里云买的99一年的服务器上了，大概配置是这样的：

装了宝塔：

把项目部署一下：

域名解析：

文件上传：

申请个ssl：

postman测试：

漂亮，一次过！

再把域名添加到小程序request合法域名中：

每个平台还得添加下载域名，有的平台还不知道下载域名是什么，所以要一个平台一个平台尝试获取下载的域名才行。

突然想到还可以用云开发作为后端，这样连域名和服务器都不需要了，还不用做服务器维护，只需要每个月交钱就行，我的uniapp云开发每个月最低档5块钱都用不完，但是得把php的代码改成js，因为不复杂，直接把两个文件丢给chatgpt就行，让它帮我们把代码改成js代码。

云开发调用也不会报跨域。

因为下面我会使用uniapp的云开发模型进行开发，又因为php的已经就部署好了，可以直接调用了，所以我下面只会将如何使用uniapp云开发。

万事俱备，接下来就是接入小程序了！

我们先将php的代码转成uniapp云对象代码：

额，好像没能如愿得进行转换，自己一个个高还是有点工作量的，那不走云开发的方式了，还是走之前搭建好的php服务了。

还简单点，只需要调用接口即可提取无水印的视频了。

基础代码就这么点：

这就完成了数据请求部分，接下来是页面显示部分，页面部分只能自由发挥了，因为没有UI。

大概样式就是：上面一个输入框，下面一个解析按钮，点击解析就loading，成功就显示封面可以播放，可以下载封面和视频，大概就时这么简单的界面。失败就提示失败原因。

让我们简单写个页面：

初始状态：

解析中：

解析成功：

以上是顺利解析的情况，当然还得兼容解析失败的情况了，俗话说做两手准备嘛。

对输入的内容检查：

如：为空的情况：

比如随便输入的就不行，需要正则检查输入内容是否为链接：

这样基本杜绝一些无效请求到后端。

正则校验代码（gpt给我的，能用）：

/**  * 检查字符串中是否包含链接  * 正则表达式的解释如下：  (?:https?://|www.)：非捕获组，匹配 http://、https:// 或 www. 开头。  [w-.]+：匹配域名的一部分，允许字母、数字、连字符和点。  (?:.[w-.]+)+：非捕获组，匹配域名后缀，如 .com、.org 等，可以有多个。  [w-._~:/?#[]@!$&'()*+,;=]+：匹配 URL 的路径和查询参数部分，允许多种字符。  (?:.[w]+)?：非捕获组，匹配文件扩展名，如 .html、.jpg 等，这是可选的。  */  export const containsLink = (str) => {  // 正则表达式匹配包含链接的字符串  const regex = /(?:https?://|www.)[w-.]+(?:.[w-.]+)+[w-._~:/?#[]@!$&'()*+,;=]+(?:.[w]+)?/gi;  return regex.test(str);  }

对解析失败的处理：