Simple encapsulation example for downloading many files in WeChat applets and mini-Programs

Simple encapsulation example for downloading large numbers of files in a small program.

Requirement

You need to generate a promotional image to share it with your friends. This promotional image contains a QR code that contains different background images and different texts. For this image generation, we have considered using server generation, but this will consume a lot of server performance, so we finally decided to use local generation.

First, the small program has a limit, the package cannot be greater than 2 m, and we may have multiple background images, so we plan to put the background images and QR code images on the server, which can reduce the size of the small package, you can also flexibly switch the background image.

You can directly use an Internet address when creating a shared image. However, if you encounter a problem, you may not be able to generate an image. Therefore, you need to download this image file.

The method for downloading files is API, but the temporary path of the file is returned. It can only be used normally during the startup of the applet. To save the file permanently, you must call wx. saveFile can be accessed at the next startup of the applet.

Therefore, we first encapsulate the downloaded and saved files.

Encapsulate download and save an object

This method is relatively simple

Parameter: an object that contains

1. Id: the id of the object to be downloaded. If the download url is not passed by default, the id is required because we need to download multiple files. You can distinguish the downloaded file from the one
2. The Network Address of the url file to be downloaded (the background configuration of the applet is required. For specific configuration methods, refer to the official documentation)
3. Success callback the return parameter is an object containing id, savedFilePath
4. Fail failure callback, download failed, save all are considered failed

/*** Download and save a file */function downloadSaveFile (obj) {let that = this; let success = obj. success; let fail = obj. fail; let id = ""; let url = obj. url; if (obj. id) {id = obj. id;} else {id = url;} // console.info ("% s start download... ", Obj. url); wx. downloadFile ({url: obj. url, success: function (res) {wx. saveFile ({tempFilePath: res. tempFilePath, success: function (result) {result. id = id; if (success) {success (result) ;}}, fail: function (e) {console.info ("failed to save a file"); if (fail) {fail (e) ;}}) }, fail: function (e) {console.info ("An error occurred while downloading an object"); if (fail) {fail (e );}}})}

Use the download method (wx. downloadFile (obj) requires configuring the server domain name in the applet. For the server domain name, go to the applet background-settings-development settings-server domain name. For details, see the official documentation.

Encapsulate multi-File Download and save

Download and save multiple files. It is mandatory that all files must be successfully downloaded before success.

Parameter: an object that contains

1. Urls array, supporting multiple urls to download [url1, url2]
2. Success download succeeded (all files must be downloaded successfully before returning success) callback parameter map, key (id)-> value ({id, savedFilePath })
3. Failed to download fail, as long as one method fails to be called

/*** Download and save multiple files. It is mandatory that all files must be successfully downloaded before success */function downloadSaveFiles (obj) {// lele.info ("prepare for download... "); Let that = this; let success = obj. success; // the download is successful. let fail = obj. fail; // download failed let urls = obj. urls; // array, supporting multiple urls to download [url1, url2] let savedFilePaths = new Map (); let urlsLength = urls. length; // There are several urls to download for (let I = 0; I <urlsLength; I ++) {downloadSaveFile ({url: urls [I], success: function (res) {// console. dir (res); // a file is successfully downloaded and saved. let savedFilePath = res. savedFilePath; savedFilePaths. set (res. id, res); lele.info ("savedFilePath: % s", savedFilePath); if (savedFilePaths. size = urlsLength) {// if all URLs are considered successful, if (success) {success (savedFilePaths) }}, fail: function (e) {console.info ("Download failed"); if (fail) {fail (e );}}})}}

Complete download. js File

/*** Download Manager * Created by general topic on 2018/1/27. * // *** download and save a file */function downloadSaveFile (obj) {let that = this; let success = obj. success; let fail = obj. fail; let id = ""; let url = obj. url; if (obj. id) {id = obj. id;} else {id = url;} // console.info ("% s start download... ", Obj. url); wx. downloadFile ({url: obj. url, success: function (res) {wx. saveFile ({tempFilePath: res. tempFilePath, success: function (result) {result. id = id; if (success) {success (result) ;}}, fail: function (e) {console.info ("failed to save a file"); if (fail) {fail (e) ;}}) }, fail: function (e) {console.info ("An error occurred while downloading an object"); if (fail) {fail (e) ;}})}/*** multiple files are downloaded and saved. it is mandatory that all files must be downloaded successfully to return success */function DownloadSaveFiles (obj) {// lele.info ("prepare to download... "); Let that = this; let success = obj. success; // the download is successful. let fail = obj. fail; // download failed let urls = obj. urls; // array, supporting multiple urls to download [url1, url2] let savedFilePaths = new Map (); let urlsLength = urls. length; // There are several urls to download for (let I = 0; I <urlsLength; I ++) {downloadSaveFile ({url: urls [I], success: function (res) {console. dir (res); // a file is successfully downloaded and saved. let savedFilePath = res. savedFilePath; savedFilePaths. set (res. id, res); lele.info ("savedFilePath: % s", savedFilePath); if (savedFilePaths. size = urlsLength) {// if all URLs are considered successful, if (success) {success (savedFilePaths) }}, fail: function (e) {console.info ("Download failed"); if (fail) {fail (e) ;}}}} module. exports = {downloadSaveFiles: downloadSaveFiles}

Use

First Import

import download from "download.js"

Call later

Let url1 = 'https: // your url2 = 'https: // your ({urls: [url1, url2], success: function (res) {// console. dir (res); console.info (res. get (url2 ). savedFilePath)}, fail: function (e) {console.info ("Download failed ");});

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.