微信小程序图集短视频去水印源码教程

最新推荐文章于 2024-04-27 11:02:12 发布

源码地址

最新推荐文章于 2024-04-27 11:02:12 发布

阅读量1.5k

点赞数 2

文章标签：小程序音视频微信小程序

本文链接：https://blog.csdn.net/qq_41200621/article/details/121932968

版权

一：准备工具

微信小程序账号，APPID，微信小程序开发工具。

已经做好上线的案例

二：小程序代码及逻辑

一：首页

两个swiper标签放两个图片循环展示，我的每次加载出来的图片都是不一样的，大家也可以放教程广告都可以。

一个input输入框，用户输入链接点击解析判断是图集链接还是视频连接，跳转到两个不同的页面显示。

六个view标签，图集解析，视频解析，图库功能，音乐功能，以及其他功能，大家可以自行添加。

input.js。api自己申请

Page({

  /**
   * 页面的初始数据
   */
  data: {
    kw: null, //输入
    titlee: "", //标题
    cover: "", //封面
    Videolink: "", //视频连接
    inputValue: null, //输入框值
  },

  /**
   * 生命周期函数--监听页面加载
   */
  //获取输入框内容
  getKeyword: function (t) {
    var s = t.detail.value;
    this.setData({
      kw: s
    });
  },
  //点击方法传参
  gotoplay: function () {
    var kw = this.data.kw;
    console.log(kw);
    if (kw != null) {
      wx.request({
        url: "这里放你的api接口不然不能用" + kw,
        success: function (res) {
          var n = res.data.data.type;
          var w = res.data
          console.log(w)
          console.log("我是N" + n)
          if (n == 1) {
            wx.navigateTo({
              url: "/pages/bb/bb?mid=" + kw
            });
          } else {
            wx.navigateTo({
              url: "/pages/more/more?mid=" + kw
            });
          }
        }
      });
    } else {
      wx.showModal({
        title: '提示',
        content: '请先输入内容',
        showCancel: false,
      })
    }
  },
  Pict: function () {
    wx.navigateTo({
      url: "/pages/qq/qq"
    });
  },
  Pictin: function () {
    wx.navigateTo({
      url: "/pages/dom/dom"
    });
  },
  Pictit: function () {
    wx.navigateTo({
      url: "/pages/jing/jing"
    });
  },
  Pictie: function () {
    wx.navigateTo({
       url: "/pages/rdb/rdb"
     // url: "/pages/txsp/txsp"
    });
  },
  Pictif: function () {
    wx.navigateTo({
      url: "/pages/tp/tp"
    });
  },
  Pictieff: function () {
    wx.navigateTo({
      url: "/pages/ww/ww"
    });
  },


  //清空输入框内容
  inputValue: function (e) {
    var dy = this.data.kw;
    if (dy != null) {
      this.setData({
        kw: null,
        inputValue: null,
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '请先输入内容',
        showCancel: false,
      })
    }
  },

  //获取粘贴板内容
  pasteboard: function (e) {
    var th = this;
    wx.getClipboardData({
      success(res) {
        var a = res.data;
        console.log(a)
        th.setData({
          kw: a,
          inputValue: a,
        })
      }
    })
  },

  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

input.wxml

<!--pages/index/index.wxml-->
<view>
    <swiper autoplay="{{true}}" circular="{{true}} " class="dd" current="2" indicatorActiveColor="#fff" indicatorDots="{{true}}" interval="{{3000}}">
        <swiper-item>
            <navigator url="/pages/gg/gg">
                <image class="images" src="https://api.ixiaowai.cn/api/api.php"></image>
            </navigator>
        </swiper-item>
        <swiper-item>
            <navigator url="/pages/gg/gg">
                <image class="images" src="https://api.ixiaowai.cn/mcapi/mcapi.php"></image>
            </navigator>
        </swiper-item>
    </swiper>
</view>
<!-- 查找 -->
<view class="search-Area">
    <view class="search-input">
        <input bindinput="getKeyword" class="weui-input" focus="true" maxlength="260" placeholder="请输入视频链接" type="text" value="{{inputValue}}"></input>

    </view>
</view>
<view bindtap="gotoplay">
    <button class="search-buttn">开始解析</button>
</view>

<view class="qkzt">
    <button class="ac"></button>
    <button bindtap="inputValue" class="ab">清空</button>
    <button class="ac"></button>
    <button bindtap="pasteboard" class="ae">粘贴</button>
    <button class="ac"></button>
</view>

<view class="vpan">
    <!-- 左 -->
    <view class="Pict">
        <view class="Picton" bindtap="Pict">
            <view class="Pictonesen">图集解析</view>
            <view class="Pictonesenen">
                <image class="Pictones" src="/images/11.png"></image>
            </view>
        </view>

    </view>
    <view class="vi"></view>
    <!-- 右 -->
    <view class="vide">
        <view class="Picton" bindtap="Pictin">
            <view class="Pictonesen">视频解析</view>
            <view class="Pictonesenen">
                <image class="Pictones" src="/images/12.png"></image>
            </view>
        </view>
    </view>
</view>
<!--  222-->
<!--  222-->
<!--  222-->
<view class="vpan">
    <!-- 左 -->
    <view class="videct">
        <view class="Picton" bindtap="Pictit">
            <view class="Pictonesen">精品图库</view>
            <view class="Pictonesenen">
                <image class="Pictones" src="/images/31.png"></image>
            </view>
        </view>

    </view>
    <view class="vi"></view>
    <!-- 右 -->
    <view class="videwt">
        <view class="Picton" bindtap="Pictie">
            <view class="Pictonesen">腾讯视频</view>
            <view class="Pictonesenen">
                <image class="Pictones" src="/images/22.png"></image>
            </view>
        </view>
    </view>
</view>
<!-- 333 -->
<!-- 333 -->
  <!-- 左 -->
  <view class="vpan">
    <view class="videet">
        <view class="Picton" bindtap="Pictif">
            <view class="Pictonesen">更多功能</view>
            <view class="Pictonesenen">
                <image class="Pictones" src="/images/21.png"></image>
            </view>
        </view>

    </view>
    <view class="vi"></view>
   <!-- 右 -->
    <view class="videlt">
        <view class="Picton" bindtap="Pictieff">
            <view class="Pictonesen">使用教程</view>
            <view class="Pictonesenen">
                <image class="Pictones" src="/images/32.png"></image>
            </view>
        </view>
    </view>
</view>

index.wxss

.dd{
  width: 100%;
  height: 200px;
}
.images {
  width: 100%;
  height: 200px;
}
.aaa {
  width: 100%;
  height: 30px;
}
.aa {
  width: auto;
  height: 50px;
  background-color: #a38f8f;
}
.musicContainer {
  width: 100%;
  height: 150rpx;
  display: flex;
}
.left {
  width: 150rpx;
  height: 150rpx;
  padding-left: 25rpx;
}
.center {
  width: 450rpx;
  height: 150rpx;
}
.right {
  width: 150rpx;
  height: 150rpx;
}
.left image {
  height: 120rpx;
  width: 120rpx;
  border-radius: 5px;
  margin: 30rpx 5rpx 5rpx;
}
.songName {
  font-size: 35rpx;
  color: #333;
  margin-top: 30rpx;
}



.search-Area {
  width: 100%;
  height: 100rpx;
  display: flex;
}

.search-input {
  width: 660rpx;
  height: 100rpx;
  padding-left: 20rpx;
}

.weui-input {
  width: 640rpx;
  height: 80rpx;
  padding-right: 8px;
  margin: 10rpx auto;
  padding-left: 20px;
  border-radius: 25px;
  border: 1px solid #000;
}
.search-buttn {
  background-color: rgb(73, 196, 3);
  width: 500rpx;
  height: 90rpx;
  font-size: 35rpx;
  color: rgb(255, 255, 255);
}
.weui-buttn {
  margin: 22rpx auto;
  font-size: 40rpx;
  
}
.qkzt{
  display: flex;
  width: 100%;
  height: 100rpx;
}
.ac{
  padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    width: 80px;
    height: 30px;
    margin-right: 0px;
    margin-left: 0px;
    pointer-events: none;
}

.vpan{
  width: 100%;
  height: 240rpx;
}
.Pict{
  float: left;
  width: 45%;
  height: 220rpx;
  margin-top: 10rpx;
  margin-left: 16rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 25px;
  border: 1px solid rgb(243, 231, 231);
  background: linear-gradient(to right,#46b741, #7dc73e);
}
.Picton{
  display: flex;
  padding-top: 30rpx;
  
}
.Pictones{
  width: 100rpx;
  height: 100rpx;
}
.Pictonesen{
  color: rgb(253, 251, 251);
  font-size: 36rpx;
  padding-left: 20rpx;
}

.Pictonesenen{
  padding-top: 40rpx;
  padding-left: 70rpx;
}
.vi{
  float: left;
  width: 1%;
  height: 220rpx;
}
.vide{
  float: left;
  width: 45%;
  height: 220rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 25px;
  border: 1px solid rgb(243, 231, 231);
  background: linear-gradient(to right, #d00d97, #8530a9);
}

.videct{
  float: left;
  width: 45%;
  height: 220rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 25px;
  border: 1px solid rgb(243, 231, 231);
  background: linear-gradient(to right, #8401ff, #6400fe);
}
.videwt{
  float: left;
  width: 45%;
  height: 220rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 25px;
  border: 1px solid rgb(243, 231, 231);
  background: linear-gradient(to right, #f3334c, #f80877);
}

.videet{
  float: left;
  width: 45%;
  height: 220rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 25px;
  border: 1px solid rgb(243, 231, 231);
  background: linear-gradient(to right, #03ccb1, #5dc4b8);
}

.videlt{
  float: left;
  width: 45%;
  height: 220rpx;
  margin-top: 10rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 25px;
  border: 1px solid rgb(243, 231, 231);
  background: linear-gradient(to right, #cf9905, #c9a74a);
}

字数过多，发布出去，想要可以私聊我要其他页面代码，免费提供 QQ群：273654528

一：去水印逻辑

调用免费api接口，输入框，用户提交视频链接进行解析，视频链接跳转展示视频（点击可下载），标题（点击可复制），封面链接（可复制链接），图集链接跳转展示图集，遍历循环出来图片（点击可下载），显示标题（点击可复制），背景音乐链接（可复制链接）。

源码地址

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
2
评论
微信小程序图集短视频去水印源码教程

去水印逻辑调用免费api接口，输入框，用户提交视频链接进行解析，视频链接跳转展示视频（点击可下载），标题（点击可复制），封面链接（可复制链接），图集链接跳转展示图集，遍历循环出来图片（点击可下载），显示标题（点击可复制），背景音乐链接（可复制链接）。
复制链接

扫一扫