前言
这里为了方便，我使用了一个现成的小程序模板，没有从头一点一点的写布局、调样式、设计页面，我最初得到的只是一个简单的静态页，我在此基础上，进行修改和交互的扩充。
在这里插入图片描述
一、顶部banner
顶部使用一个简单的图标罗列，告知用户我们支持的平台，只是静态展示，没有任何功能。
短视频去水印小帮手支持以下平台,部分平台不支持直接保存到相册
抖音
快手
皮皮虾
火山视频
微视
美拍
小咖秀
最右
二、地址解析
1.整体代码
@ yaqi.wang.com
其中有3个关键的部分：input框输入双向绑定、清空输入框、解析视频链接。
2. input框输入
微信小程序从基础库 2.9.3 开始支持input数据双向绑定modal:value="{{videoUrl}}"，这里我们通过 简易双向绑定 来实现输入url的赋值
代码如下（示例）：
3.input框清空
代码如下（wxml）：
代码如下（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.解析视频链接
上面我们的按钮绑定了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,
})
}
})
}
三、广告板块
由于我们的功能其实很单一，其余部分准备用广告代码填充，暂时用空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-广告代码）
- 手把手教你做短视频去水印微信小程序（7-Q&A整理）【待完成】
github源码地址
20200312162118248.jpg
欢迎浏览，欢迎star～
- 短视频去水印小程序源码-小程序端
- 短视频去水印小程序源码-服务端（php）