手把手教你做短视频去水印微信小程序系列教程(4-解析结果页)
文章目录
前言
我们之前对首页解析按钮点击获取到解析结果后,跳转到了解析结果页进行视频展示及保存等操作,这篇文章中我们来介绍这个页面的实现。
一、页面样式
我们这边就简单设计一个视频展示位 + 三个按钮
<view class="wrap">
<video class="video-box" src="{{dataUrl}}" poster="{{dataImage}}" wx:if="{{preview && dataUrl!=''}}"></video>
<image class="video-box" src="{{dataImage}}" wx:else></image>
<button bindgetuserinfo="postSave" class="parsing" openType="getUserInfo">保存到相册</button>
<button bindtap="copyUrl" class="parsing copy-url">复制地址</button>
<button bindtap="goBack" class="parsing go-back">返回首页</button>
</view>
三、解析结果页交互
2.1 接收跳转参数
在之前的文章中,我们对首页解析按钮点击后跳转了结果页,并传递了url、image参数,我们在结果页接收这些参数:
data: {
dataUrl: '',
dataImage: '',
preview: 0,
},
onLoad: function (options) {
console.log(options)
this.setData({
dataUrl: decodeURIComponent(options.url),
dataImage: decodeURIComponent(options.image),
preview: options.preview
})
},
2.2 返回首页
实现goBack
函数跳转首页:
goBack: function () {
wx.switchTab({
url: '/pages/index/index',
});
},
2.3 复制地址
实现 copyUrl
方法提供视频地址的复制能力:
copyUrl: function() {
wx.setClipboardData({
data: this.data.dataUrl,
success: function(a) {
wx.showToast({
title: '复制成功',
duration: 1200
});
}
});
},
2.4 视频保存
需用户授权允许存储
代码如下(示例):
postSave: function (o) {
var t = this
wx.getSetting({
success: function (o) {
o.authSetting['scope.writePhotosAlbum'] ? t.download() : wx.authorize({
scope: 'scope.writePhotosAlbum',
success: function () {
t.download()
},
fail: function (o) {
wx.showModal({
title: '提示',
content: '视频保存到相册需获取相册权限请允许开启权限',
confirmText: '确认',
cancelText: '取消',
success: function (o) {
o.confirm ? (wx.openSetting({
success: function (o) { }
})) : ''
}
})
}
})
}
})
},
// 调用微信downloadFile方法下载文件
download: function () {
var t = this, e = t.data.dataUrl // o.default + '/downVideo.php?url=' + this.data.dataUrl
wx.showLoading({
title: '保存中 0%'
}), (n = wx.downloadFile({
url: e,
success: function (o) {
wx.hideLoading(), wx.saveVideoToPhotosAlbum({
filePath: o.tempFilePath,
success: function (o) {
t.showToast('保存成功', 'success'), setTimeout(function () {
wx.setClipboardData({
data: '',
})
t.goBack()
}, 1e3)
},
fail: function (o) {
t.showToast('保存失败')
}
})
},
fail: function (o) {
n = null, wx.hideLoading(), t.showToast('下载失败')
}
})).onProgressUpdate(function (o) {
100 === o.progress ? '' : wx.showLoading({
title: '保存中 ' + o.progress + '%'
})
})
},
总结
最终我们的页面长这个样子:
这里需要注意的是,微信小程序对下载资源的域名有限制,而各种短视频平台解析出来的无水印地址域名是变化的。所以需要做一层中转服务,从统一的域名回源不同的资源域,我使用的是nginx直接反代,此部分会在服务端相关的文章中说到。
系列文章
- 手把手教你做短视频去水印微信小程序(0-概述)
- 手把手教你做短视频去水印微信小程序(1-封装网络请求&登陆逻辑)
- 手把手教你做短视频去水印微信小程序(2-首页)
- 手把手教你做短视频去水印微信小程序(3-个人中心)
- 手把手教你做短视频去水印微信小程序(4-转换结果页)
- 手把手教你做短视频去水印微信小程序(5-服务端代码)
- 手把手教你做短视频去水印微信小程序(6-广告代码)
github源码地址
欢迎浏览,欢迎star~