Uniapp 短视频去水印解析工具开发实现

繁依Fanyi

发布于 2025-02-16 20:04:57

6100

代码可运行

文章被收录于专栏：繁依Fanyi 的专栏繁依Fanyi 的专栏

运行总次数：0

代码可运行

最近搞了一个有意思的小工具——短视频去水印解析器！这玩意儿可以把短视频中的水印给抹掉，还能提取视频、封面等资源。整个项目用了 Uniapp 开发，做完后体验了一下，发现还挺顺手。今天就来跟大家聊聊实现思路和代码细节~

需求分析

我们的目标是做一个简单易用的小工具，支持以下功能：

输入短视频链接，识别并解析出视频内容。
展示视频信息：视频封面、作者信息、标题等。
下载和复制功能：可以方便地复制视频链接、封面链接和标题。

代码拆解与讲解

先来看代码的大体结构，我们把主要部分放在 <template> 和 <script> 里，当然还有一些样式细节。不要着急，我们会逐段剖析，干货满满~

页面模板部分 (`<template>`)

首先是页面的结构，用 Vue 的模板语法来布局。这里用了 uni-notice-bar 来放一些提醒，避免用户乱用这工具（你懂的，必要的免责声明）。

<uni-notice-bar
  :show-icon="true"
  :scrollable="true"
  :single="true"
  text="本工具仅供学习交流实用，请勿用于商业用途。"
></uni-notice-bar>

这段代码很简单，就是一个横幅通知条，提示用户“仅供学习用途”，毕竟，咱们要做个守法的好公民。

接下来是输入框、识别按钮、展示结果的区域：

<view class="input-section card">
  <input v-model="inputText"  placeholder="请输入文本" class="input-box" />
  <view class="button-group">
    <button class="action-button" @tap="clearText">清空</button>
    <button class="action-button" @tap="extractLinks">识别</button>
  </view>
</view>

input：绑定 v-model="inputText"，获取用户输入的链接。
按钮组：两个按钮，一个清空输入框，一个开始识别。

识别链接功能 (`extractLinks` 方法)

代码如下：

async extractLinks() {
  const urlPattern = /(https?:\/\/[^\s]+)/g;
  const links = this.inputText.match(urlPattern);
  if (links && links.length > 0) {
    this.extractedLinks = links;
    this.showNoLinkMessage = false;
    await this.fetchVideoData(links[0]);
  } else {
    this.extractedLinks = [];
    this.showNoLinkMessage = true;
  }
}

正则匹配链接：简单地通过正则表达式来识别用户输入中的 URL。
调用视频解析函数：识别到 URL 后，就调用 fetchVideoData，尝试解析视频信息。

请求视频解析接口 (`fetchVideoData` 方法)

通过接口请求获取视频信息，这里用了 uni.request 方法。

async fetchVideoData(link) {
  const encodedURL = encodeURIComponent(link);
  await uni.request({
    url: `${VideoParserAPI}?url=${encodedURL}`,
    method: 'GET',
    success: (response) => {
      if (response.data.code === 200) {
        this.data = response.data.data;
      } else {
        this.data = null;
        uni.showToast({ title: response.data.msg || '解析失败', icon: 'none' });
      }
    },
    fail: () => {
      this.data = null;
      uni.showToast({ title: '请求出错', icon: 'none' });
    }
  });
}

URL编码：encodeURIComponent 确保链接传递正确。
请求成功：如果 code === 200，则表示解析成功，数据就放在 this.data 里，后面展示就靠这个了。
请求失败：不管啥原因，直接 uni.showToast 弹个错误提示就完事了。

视频播放与信息展示

解析成功后，我们会展示作者、标题、封面等信息，顺便整了个播放按钮。

<view class="card" v-if="data">
  <view class="author">
    <image :src="data.author.avatar" class="avatar"></image>
    <text class="author-name">{{ data.author.name }}</text>
  </view>
  <text class="title">{{ data.title }}</text>
  <image :src="data.cover_url" class="cover"></image>
  <button class="play-button" @tap="playVideo">播放视频</button>
</view>

v-if="data"：只有当 data 有内容时才显示。
播放视频：点击按钮后 playVideo 方法会显示 <video> 标签，开始播放视频。

playVideo() {
  this.showVideo = true;
}

下载和复制功能

提供了几个按钮，可以让用户复制视频的标题、链接等信息。代码如下：

copyTitle() {
  if (this.data && this.data.title) {
    uni.setClipboardData({
      data: this.data.title,
      success: () => {
        uni.showToast({ title: '标题已复制', icon: 'success' });
      },
      fail: () => {
        uni.showToast({ title: '复制失败', icon: 'none' });
      }
    });
  }
}

其他按钮（如复制视频链接、复制封面链接）逻辑类似，就不赘述了。

样式与美化

页面的样式主要集中在 <style> 标签内，针对不同组件进行样式定义，比如 card、input-box、button-group 等等。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
}
.input-box {
  width: 100%;
  height: 60rpx;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  margin-bottom: 10rpx;
}
.action-button {
  width: 45%;
  height: 60rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
}

样式设计保持简洁，让用户可以愉快地使用，整个页面风格清新、简洁。

下面是效果展示：