上線短影片去水印功能到小程式

一方_self發表於2024-10-30

背景：因為其他小程式去水印還得看廣告，很煩，想著自己作為程式設計師，就像開發一款純淨版的去水印功能，所以在全球最大同性交友網站上搜尋一番，哎，果然找到了一個好專案，遂用之，哎，還挺好用，所有就放到自己的小程式上了，哎，美滋滋。

其他人開發的小程式：

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

}

對解析失敗的處理：