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

266 阅读4分钟

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

其他人开发的小程序:

去水印github项目地址:
github.com/5ime/video_…

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