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

尤晓兰 · 3 天前

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

去水印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);
}

复制代码

　　
对解析失败的处理：

页面大部分代码：

js大部分代码：

在绝大多数机型上能适配页面：

真机效果：

整体功能完工！再加上分享的配置：
得益于之前的代码基础，现在配置一个页面的分享参数很简单，只需要加一个json即可，图标是在阿里巴巴矢量图找的：

在页面使用也很简单，一行代码即可：

页面就可以分享了：

不知道微信给不给上线，看着有类似的小程序也是个人的，试试看吧。
这篇分享文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。
想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。
感谢你的阅读与支持，期待在未来的文章中与你再次相遇！
我的微信公众号：【xdub】，欢迎大家订阅，我会同步文章到公众号上。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册