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

文章目录

手把手教你做短视频去水印微信小程序系列教程（2-首页）
前言
一、顶部banner
二、地址解析
- 1.整体代码
- 2. input框输入
- 3.input框清空
- 4.自动检测剪贴板
- 5.解析视频链接
三、广告板块
四、底bar
总结
系列文章
github源码地址

前言

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

一、顶部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）

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

短视频去水印微信小程序，免费去除视频水印
最近不知怎么的,偶然浏览到一个挺简单漂亮的视频解析小程序帖子,没过多久又偶然浏览到一个各类短视频去水印api的github项目,挺巧的,于是就花时间把两个项目结合了一下,然后自己发布了小程序(这里顺便 ...
全新UI简洁又不失美观的短视频去水印微信小程序源码,支持多做流量主模式
这是一款去水印小程序源码自带高速解析和下载接口 UI方面简洁但是又很美观实用支持一键粘贴和自动识别粘贴功能另外支持历史解析记录查看 PS:这个历史记录支持记录解析日期,点击每一个日期可以显示该日 ...
长期稳定短视频去水印微信小程序源码
大家好这一款小程序源码是一款去水印小程序源码该源码里面自带了稳定接口(目前该接口已稳定运行三个月) 支持多种短视频平台去水印,另外也支持图集去水印保存已经去好水印的作品的时候可以根据是短视频还是图 ...
微信小程序：简洁界面清爽让人非常舒服的一款短视频去水印微信小程序
总得来说这是一款以各大平台短视频去水印为主的一款小程序源码内含支持多平台的接口支持短视频和图集去水印小编个人觉得界面让人看起来特别的清爽特别的舒服没有那么多的花里胡哨的,另外小编也给它添加了多 ...
长期稳定短视频去水印微信小程序源码下载自带稳定接口支持图集解析去水印
大家好这一款小程序源码是一款去水印小程序源码该源码里面自带了稳定接口(目前该接口已稳定运行三个月) 支持多种短视频平台去水印,另外也支持图集去水印保存已经去好水印的作品的时候可以根据是短视频还是图 ...
多接口带头像挂件制作小程序源码/短视频去水印微信小程序源码
☑️ 编号:ym349 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:1.6MB ☑️ 类型:短视频去水印 ☑️ 支持:微信小程序
短视频去水印微信小程序源码前端+后端短视频微信小程序去水印解析源码
这套源码前身有很多人售卖... 我已经优化改了前端UI共享出来,未加密未授权,可调用别人的接口和自己的接口样板案例支持小程序后台流量主banner广告支持小程序后台流量主激励视频广告支持全网 ...
短视频去水印工具小程序
分享一个短视频去水印工具,支持抖音快手短视频解析在做短视频的时候,经常遇到要把视频logo去掉,看下面抖音快手短视频怎么去水印? 今天给大家提供一个免费去水印小程序微信搜索:随手去水印使用方法: ...
基于springboot的短视频社交微信小程序
前言项目可包部署(无需担心部署问题) Q 1115487855 交流群:758350964 一项目介绍随着微信的普及,小视频的流行,我们设计一款基于微信小程序端的视频社交软件 + 后台管理系统作 ...

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