How to implement multiple file downloads in WeChat mini program

This article mainly introduces a simple encapsulation example for downloading multiple files in WeChat applet. Now I share it with you and give it as a reference.

Requirements

You need to generate a promotional image to share in your circle of friends. This promotional image contains a QR code, different background images and different text. For this kind of image generation, we considered using server-side generation, but this would consume more server performance, so we finally decided to use local generation.

First of all, the mini program has a limitation. The package cannot be larger than 2m, 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 mini program package. You can also flexibly switch background images.

When drawing a shared image, you can directly use the Internet address, but we encountered a problem and may not be able to generate the image, so we need to download the image file.

WeChat has an API for downloading files, but it returns the temporary path of the file, which can only be used normally during the current startup of the mini program. If you need to save it persistently, you need to actively call wx.saveFile before you can download the file. The applet can be accessed the next time it is started.

So we first encapsulate the downloaded file and the saved file

Encapsulate the download and save a file

This method is relatively simple

Parameter: an object, containing

1. id. The id of the file that needs to be downloaded. If not passed, the default is the download url. The reason why the id is needed is because we need to download multiple files and can distinguish them. What is downloaded is a file

2. url The network address of the downloaded file (requires WeChat applet background configuration, please refer to WeChat official documentation for specific configuration methods)

3. success The return parameter of the success callback is an object containing id, savedFilePath

4. ##fail The failure callback, download failure, and saving are all considered failures

/**
 * 下载保存一个文件
 */
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 开始下载。。。", 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("保存一个文件失败");
          if (fail) {
            fail(e);
          }
        }
      })
    },
    fail: function (e) {
      console.info("下载一个文件失败");
      if (fail) {
        fail(e);
      }
    }
  })
}

Using the download method (wx.downloadFile(obj)) requires configuring the server domain name in the WeChat applet. Please configure the server domain name in the applet background-settings-development settings-server domain name. For details, please refer to the WeChat official documentation

Encapsulate multiple file downloads and saves

Multiple file downloads and saves, it is mandatory that all files must be downloaded successfully before the return is successful

Parameters: an object, Contains

1. urls download address array, supports multiple url downloads [url1, url2]

2. success download is successful (all files must be downloaded successfully) Returns successfully) Callback parameter map, key(id) -> value ({id,savedFilePath})

3. fail Download fails, as long as one method fails, the call fails

/**
 * 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
 */
function downloadSaveFiles(obj) {
  // console.info("准备下载。。。");
  let that = this;
  let success = obj.success; //下载成功
  let fail = obj.fail; //下载失败
  let urls = obj.urls; //下载地址 数组，支持多个 url下载 [url1,url2]
  let savedFilePaths = new Map();
  let urlsLength = urls.length; // 有几个url需要下载
  for (let i = 0; i < urlsLength; i++) {
    downloadSaveFile({
      url: urls[i],
      success: function (res) {
        //console.dir(res);
        //一个文件下载保存成功
        let savedFilePath = res.savedFilePath;
                
        savedFilePaths.set(res.id, res);
        console.info("savedFilePath:%s", savedFilePath);
        if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
          if (success){
            success(savedFilePaths)
          }
          
        }
      },
      fail: function (e) {
        console.info("下载失败");
        if (fail) {
          fail(e);
        }

      }
    })
  }
}

Complete download.js file

/**
 * 下载管理器
 * Created by 全科 on 2018/1/27.
 */
/**
 * 下载保存一个文件
 */
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 开始下载。。。", 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("保存一个文件失败");
          if (fail) {
            fail(e);
          }
        }
      })

    },
    fail: function (e) {
      console.info("下载一个文件失败");
      if (fail) {
        fail(e);
      }

    }
  })
}
/**
 * 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
 */
function downloadSaveFiles(obj) {
  // console.info("准备下载。。。");
  let that = this;
  let success = obj.success; //下载成功
  let fail = obj.fail; //下载失败
  let urls = obj.urls; //下载地址 数组，支持多个 url下载 [url1,url2]
  let savedFilePaths = new Map();
  let urlsLength = urls.length; // 有几个url需要下载
  for (let i = 0; i < urlsLength; i++) {
    downloadSaveFile({
      url: urls[i],
      success: function (res) {
        console.dir(res);
        //一个文件下载保存成功
        let savedFilePath = res.savedFilePath;                
        savedFilePaths.set(res.id, res);
        console.info("savedFilePath:%s", savedFilePath);
        if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功
          if (success){
            success(savedFilePaths)
          }          
        }
      },
      fail: function (e) {
        console.info("下载失败");
        if (fail) {
          fail(e);
        }
      }
    })
  }
}
module.exports = {
  downloadSaveFiles: downloadSaveFiles
}

Use

First import

import download from "download.js"

and then call

let url1 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
let url2 = 'https://xcx.upload.utan.com/article/coverimage/2018/01/26/eyJwaWMiOiIxNTE2OTcyNDg0NDUzOSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
download.downloadSaveFiles({
  urls: [url1, url2],
  success: function (res) {
    // console.dir(res);
   
    console.info(res.get(url2).savedFilePath)
  },
  fail: function (e) {
    console.info("下载失败");
  }
);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement scroller return to the page in vue and remember the scroll position

Detailed introduction to commonly used tool classes in javascript Encapsulation (detailed tutorial)

Introducing the source code entry file in vue in detail (detailed tutorial)

The above is the detailed content of How to implement multiple file downloads in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!