前言

我们之前对首页解析按钮点击获取到解析结果后，跳转到了解析结果页进行视频展示及保存等操作，这篇文章中我们来介绍这个页面的实现。

一、页面样式

我们这边就简单设计一个视频展示位 + 三个按钮

<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直接反代，此部分会在服务端相关的文章中说到。

系列文章

github源码地址

在这里插入图片描述

欢迎浏览，欢迎star～

手把手教你做短视频去水印微信小程序系列教程（4-解析结果页）

前言