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

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

其他人开发的小程序:

 

 

 

 

 
 
 
 

 

 

 

 
 
 

去水印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】,欢迎大家订阅,我会同步文章到公众号上。

posted @ 2024-10-30 22:54  一方_self  阅读(14)  评论(0编辑  收藏  举报