WeChat applet to save albums and pictures to albums

WeChat applet to save albums and pictures to albums

I am currently developing a video and tool app, similar to Xiao Nian Gao. I need to save the albums made by users to the local phone album. The page effect is as follows:

The implemented logic is as follows:

1. Obtain user authorization. If authorized, download directly.

2. If the user has not authorized before, call up the user authorization interface and ask the user to authorize. If the user agrees, the software will be downloaded. If the user disagrees, a prompt will be displayed.

3. If authorization was previously requested but the user refused, open the settings interface and guide the user to enable authorization.

The following is the code implementation, everyone is welcome to copy, paste and comment.

First the WXML code:

<view class="album-operate"> 
    <view class="edit" bindtap="deleteAlbum" data-id="{{item.id}}" data-status="{{item.status}}">
        Delete</view>
 
    <button class="save" data-link="{{item.link}}" data-status="{{item.status}}" bindtap='downloadAlbum'>
        Save/Download</button>
 
    <view class="share" bindtap="desabledShare" wx:if="{{item.status==2}}">Share</view>
    <button class="share" open-type="share" data-id="{{item.id}}" data-cover="{{item.cover_url}}" data-name="{{item.name}}" wx:if="{{item.status!=2}}">
        Share</button>
</view>

Below is the JS code

// Authorize download downloadAlbum: function(e) {
    var that = this;
    // Album status var status = e.target.dataset.status;
    // Download link address var link = e.target.dataset.link;
 
    if (status == 2) {
        wx.showToast({
            title: 'The album is being produced, please wait',
            icon: 'none'
        });
    } else {
        // Get user authorization wx.getSetting({
            success(res) {
                // If authorized if (res.authSetting['scope.writePhotosAlbum']) {
                    that.saveAlbum(link);
                // If not authorized } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
                    //Call up user authorization wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success() {
                            that.saveAlbum(link);
                        },
                        fail() {
                            wx.showToast({
                                title: 'You don't have authorization, so you can't save it to the album',
                                icon: 'none'
                            })
                        }
                    })
                // If authorization was previously denied } else {
                    wx.openSetting({
                        success(res) {
                            if (res.authSetting['scope.writePhotosAlbum']) {
                                that.saveAlbum(link);
                            } else {
                                wx.showToast({
                                    title: 'You don't have authorization, so you can't save it to the album',
                                    icon: 'none'
                                })
                            }
                        }
                    })
                }
            }
        })
    }
},
 
// Save the album saveAlbum: function (link) {
    wx.downloadFile({
        url: link,
        success(res) {
            if (res.statusCode === 200) {
                var path = res.tempFilePath
                wx.saveVideoToPhotosAlbum({
                    filePath: path,
                    success(res) {
                        if (res.errMsg == 'saveVideoToPhotosAlbum:ok') {
                            wx.showToast({
                                title: 'Download completed',
                            })
                        }
                    }
                })
            }
        }
    })
},

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet realizes taking photos and selecting pictures from albums
  • WeChat applet save pictures to album permission settings
  • WeChat applet takes a photo or selects a picture from the album to upload code example
  • WeChat applet implements the function of saving pictures to the album
  • How to use the WeChat applet chooseImage (select an image from the local album or take a photo using the camera)
  • WeChat applet development: Get pictures from the album and use the camera to take pictures and upload local pictures

<<:  The perfect solution for forgetting the password in mysql8.0.19

>>:  Docker implements cross-host container communication based on macvlan

Recommend

Two ways to configure Vue global methods

Table of contents 1. Introduction 2. The first me...

Introduction to version management tool Rational ClearCase

Rational ClearCase is a software configuration ma...

How to implement variable expression selector in Vue

Table of contents Defining the HTML structure Inp...

Docker volume deletion operation

prune To use this command, both the client and da...

Perfect solution for theme switching based on Css Variable (recommended)

When receiving this requirement, Baidu found many...

MySQL 8.0 New Features: Hash Join

The MySQL development team officially released th...

Implementing a simple age calculator based on HTML+JS

Table of contents Preface Demonstration effect HT...

Using JS timer to move elements

Use JS timer to make an element to make a method ...

Detailed explanation of virtual DOM and diff algorithm in react

The role of virtual DOM First of all, we need to ...

Perfect solution to Google Chrome autofill problem

In Google Chrome, after successful login, Google ...

What is html file? How to open html file

HTML stands for Hypertext Markup Language. Nowada...

Implementation of dynamic rem for mobile layout

Dynamic rem 1. First, let’s introduce the current...

Differences between Windows Server 2008R2, 2012, 2016, and 2019

Table of contents Common version introduction Com...

Detailed explanation of the relationship between Linux and GNU systems

Table of contents What is the Linux system that w...