手把手教你做短视频去水印微信小程序（2-首页）

手把手教你做短视频去水印微信小程序系列教程（2-首页）

---

前言

这里为了方便，我使用了一个现成的小程序模板，没有从头一点一点的写布局、调样式、设计页面，我最初得到的只是一个简单的静态页，我在此基础上，进行修改和交互的扩充。

---

一、顶部banner

顶部使用一个简单的图标罗列，告知用户我们支持的平台，只是静态展示，没有任何功能。

<view class="platforms">
    <text class="platforms-title">短视频去水印小帮手支持以下平台,部分平台不支持直接保存到相册</text>
    <view class="page-body">
      <view class="page-section page-section-spacing swiper">
        <swiper>
          <swiper-item>
            <view class="swiper-item {{item}}">
              <view class="platforms-item">
                <image src="../../images/logo-douyin.png"></image>
                <text>抖音</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-gitShow.png"></image>
                <text>快手</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-ppx.png"></image>
                <text>皮皮虾</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-volcano.png"></image>
                <text>火山视频</text>
              </view>
            </view>
            <view class="swiper-item {{item}}">
              <view class="platforms-item">
                <image src="../../images/logo-microview.png"></image>
                <text>微视</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-meipai.png"></image>
                <text>美拍</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-xiaokaxiu.png"></image>
                <text>小咖秀</text>
              </view>
              <view class="platforms-item">
                <image src="../../images/logo-zuiyou.png"></image>
                <text>最右</text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>

二、地址解析

1.整体代码

<view class="watermark">
  <view class="watermark-input">
    <input id="inputText" placeholder=" 请复制视频链接，粘贴到这里" type="text" modal:value="{{videoUrl}}"></input>
    <button bindtap="inputClear" id="clearInputText">
      <image src="../../images/icon-clear.png" wx:if="{{videoUrl==''}}"></image>
      <image src="../../images/icon-clear-active.png" wx:else></image>
    </button>
  </view>
  <button bindgetuserinfo="getUserInfo" class="parsing" hoverClass="parsing-btn-hover" openType="getUserInfo" >一键去除水印</button>
  <view class="center">@ yaqi.wang.com</view>
</view>

其中有3个关键的部分：input框输入双向绑定、清空输入框、解析视频链接。

2. input框输入

微信小程序从基础库 2.9.3 开始支持input数据双向绑定modal:value="{{videoUrl}}"，这里我们通过 简易双向绑定 来实现输入url的赋值
代码如下（示例）：

<input id="inputText" placeholder=" 请复制视频链接，粘贴到这里" type="text" modal:value="{{videoUrl}}"></input>

3.input框清空

代码如下（wxml）：

<button bindtap="inputClear" id="clearInputText">
 <image src="../../images/icon-clear.png" wx:if="{{videoUrl==''}}"></image>
  <image src="../../images/icon-clear-active.png" wx:else></image>
</button>

代码如下（js）：

// inputClear 清空输入框
inputClear: function () {
  this.setData({
    videoUrl: ''
  })
},

4.自动检测剪贴板

为了提升用户体验，我们增加这样一种功能：判断剪切板是否有url，如果有则提示用户是否自动填入。

• onShow阶段调用wx.getClipboardData()方法剪切板内容

  onShow() {
      // 如果剪切板内有内容则尝试自动填充
      wx.getClipboardData({ success: res => {
        var str = res.data.trim()
        // 如果是合法url则提示用户是否自动填入
        if (this.regUrl(str)) {
          wx.showModal({
            title: '检测到剪切板有视频地址，是否自动填入？',
            success: res => {
              if (res.confirm) {
                this.setData({
                  videoUrl: str
                })
              }
            }
          })
        }
      }})
  },
  

  这里提一句，关于剪切板小程序低版本基础库有一个bug，就是wx.getClipboardData方法会有有两次success回调，官方在 2.13.1 版本进行了修复。

• 匹配剪切板字符串是否是url

   // 视频地址匹配是否合法
    regUrl: function (t) {
      return /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(t)
    },
  

这样，在用户进入小程序时，如果复制了url则可以自动填入了。

5.解析视频链接

<button bindgetuserinfo="parseVideo" class="parsing" hoverClass="parsing-btn-hover" openType="getUserInfo" >一键去除水印</button>

上面我们的按钮绑定了parseVideo函数，来将输入的url请求到服务端获取解析后的视频地址，这里我们暂时在函数内部先仅用toast，后续再添加具体的解析逻辑。

// 视频解析按钮绑定该提交函数
submit: function() {
  // 优先判断是否还有免费次数
  var num;
  var today = util.formatDate(new Date(), '');
  var lastParseDate = wx.getStorageSync('lastParseDate');
  if (lastParseDate != today) {
    wx.setStorageSync('lastParseDate', today);
    wx.setStorageSync('dailyFreeParseNum', app.globalData.defaultDailyFreeParseNum);
    num = app.globalData.defaultDailyFreeParseNum;
  } else {
    num = wx.getStorageSync('dailyFreeParseNum');
  }
  if (num > 0) {
    this.parseVideo();
  } else {
    wx.showToast({
      title: '免费解析次数已用完！',
      icon: 'none'
    })
    //目前我们还没有广告能力，后续开通了广告主再修改此部分。
    // // 超免费次数需要观看激励广告
    // wx.showModal({
    //   title: "解析视频",
    //   content: "免费解析次数已用完，需观看完广告才可继续解析！",
    //   confirmColor: "#00B269",
    //   cancelColor: "#858585",
    //   success: (res) => {
    //     if (res.confirm) {
    //       videoAd.show().catch(() => {
    //         // 失败重试
    //         videoAd.load()
    //           .then(() => videoAd.show())
    //           .catch(err => {
    //             console.log('激励视频 广告显示失败')
    //           })
    //       })
    //     } else if (res.cancel) {
    //       wx.showToast({
    //         title: '广告观看完才可继续解析！',
    //         icon: 'none'
    //       })
    //     }
    //   }
    // })
  }
},

// 视频解析
parseVideo: function () {
  app.apiRequest({
    url: '/video-parse',
    method: 'POST',
    data: {
      url: this.data.videoUrl
    },
    success: res => {
      var noWaterUrl = encodeURIComponent(res.data.url);
      var imageUrl = encodeURIComponent(res.data.image);
      var preview = res.data.preview;
      wx.setStorageSync('dailyFreeParseNum',  wx.getStorageSync('dailyFreeParseNum') - 1);
      // 跳转到解析结果页做展示
      wx.navigateTo({
        url: "../video/video?url=" + noWaterUrl + '&image=' + imageUrl + '&preview=' + preview,
      })
    }
  })
}

解析成功后获取到url地址，进行页面跳转，同时将url等参数传递到结果页

url地址需要尽心url编码后传递，到解析结果页后再解码。

三、广告板块

由于我们的功能其实很单一，其余部分准备用广告代码填充，暂时用空view站位：

<view style="height: 300px;"></view>

//Todo 广告代码接入见后续章节

四、底bar

在app.json中增加底bar的配置：

"tabBar": {
    "custom": false,
    "color": "#dbdbdb",
    "selectedColor": "#337AFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon-home.png",
        "selectedIconPath": "images/icon-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/icon-me.png",
        "selectedIconPath": "images/icon-me-selected.png"
      }
    ]
  },

这里我们只设计“首页”、“我的”两个菜单。

---

总结

最终我们页面长这个样子：

---

系列文章

• 手把手教你做短视频去水印微信小程序（0-概述）
• 手把手教你做短视频去水印微信小程序（1-封装网络请求&登陆逻辑）
• 手把手教你做短视频去水印微信小程序（2-首页）
• 手把手教你做短视频去水印微信小程序（3-个人中心）
• 手把手教你做短视频去水印微信小程序（4-转换结果页）
• 手把手教你做短视频去水印微信小程序（5-服务端代码）
• 手把手教你做短视频去水印微信小程序（6-广告代码）

github源码地址

欢迎浏览，欢迎star～

• 短视频去水印小程序源码-小程序端
• 短视频去水印小程序源码-服务端（php）