上线短视频去水印功能到小程序
背景:因为其他小程序去水印还得看广告,很烦,想着自己作为程序员,就像开发一款纯净版的去水印功能,所以在全球最大同性交友网站上搜索一番,哎,果然找到了一个好项目,遂用之,哎,还挺好用,所有就放到自己的小程序上了,哎,美滋滋。
其他人开发的小程序:
去水印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】,欢迎大家订阅,我会同步文章到公众号上。