preface

After we clicked the resolution button on the home page to obtain the resolution result, we jumped to the resolution result page for video display and saving. In this article, we will introduce the implementation of this page.

First, page style

We simply design a video display bit + three buttons

<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">Save to album</button>
    <button bindtap="copyUrl" class="parsing copy-url">Copy the address</button>
    <button bindtap="goBack" class="parsing go-back">Return to the home page</button>
</view>
Copy the code

Parse the result page interaction

2.1 Receive forward Parameters

In the previous article, we switched to the result page after clicking the home page resolution button, and passed the URL and image parameters. We received these parameters in the result page:

data: {
    dataUrl: ' '.dataImage: ' '.preview: 0,},onLoad: function (options) {
    console.log(options)
    this.setData({
        dataUrl: decodeURIComponent(options.url),
        dataImage: decodeURIComponent(options.image),
        preview: options.preview
    })
},
Copy the code

2.2 Returning to the Home Page

GoBack = goBack

goBack: function () {
    wx.switchTab({
      url: '/pages/index/index'}); },Copy the code

2.3 Replication Address

Implement copyUrl method to provide the ability to copy the video address:

copyUrl: function() {
    wx.setClipboardData({
        data: this.data.dataUrl,
        success: function(a) {
          wx.showToast({
            title: 'Copy successful'.duration: 1200}); }}); },Copy the code

2.4 Video Saving

User authorization is required to allow storage of the following code (example) :

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: 'tip'.content: 'Save video to album requires permission of album. Please allow permission to be enabled.'.confirmText: 'confirm'.cancelText: 'cancel'.success: function (o) {
                            o.confirm ? (wx.openSetting({
                                success: function (o) {}})) :' '}})}})}})},// Call wechat downloadFile to download the file
download: function () {
    var t = this, e = t.data.dataUrl // o.default + '/downVideo.php?url=' + this.data.dataUrl
    wx.showLoading({
        title: 'Saved 0%'
    }), (n = wx.downloadFile({
        url: e,
        success: function (o) {
            wx.hideLoading(), wx.saveVideoToPhotosAlbum({
                filePath: o.tempFilePath,
                success: function (o) {
                    t.showToast('Saved successfully'.'success'), setTimeout(function () {
                        wx.setClipboardData({
                          data: ' ',
                        })
                        t.goBack()
                    }, 1e3)},fail: function (o) {
                    t.showToast('Save failed')}})},fail: function (o) {
            n = null, wx.hideLoading(), t.showToast('Download failed')
        }
    })).onProgressUpdate(function (o) {
        100 === o.progress ? ' ' : wx.showLoading({
            title: 'Saved' + o.progress + The '%'})})},Copy the code

conclusion

We ended up with a page that looked like this:

It should be noted that the wechat applet has restrictions on the domain name of the downloaded resources, while the non-watermarking address domain name resolved by various short video platforms is changed. Therefore, it is necessary to do a layer of forwarding service, from the unified domain name back to different resource domains, I use nginx direct generation, this part will be discussed in the server related article.

series

  • Hand to hand teach you to do short video to watermark wechat small program (0- Overview)
  • Teach you how to do a short video to watermark wechat small program (1- encapsulate network request & login logic)
  • Teach you to do short video to watermark wechat small program (2- home page)
  • Hand to hand teach you to do short video to watermark wechat small program (3- personal center)
  • Hand to hand teach you to do short video to watermark wechat small program (4- conversion results page)
  • Teach you to do a short video to watermark wechat small program (5- server code)
  • Teach you to do a short video to watermark wechat small program (6- advertising code) [to be completed]
  • Teach you to do short video to watermark wechat small program (7-Q&A sorting) 【 To be completed 】

Github source address

Welcome to star

  • Short video to watermark small program source – small program side
  • Short video to watermark small program source – server (PHP) [to be uploaded]