A simple package for downloading multiple files in WeChat mini program-Mini Program Development-php.cn

This article mainly introduces a simple encapsulation example for downloading multiple files in WeChat applet. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Requirements

You need to generate a promotional image to share in your circle of friends. This promotional image contains a QR code and different backgrounds. Pictures 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

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
url The network address of the downloaded file (requires WeChat applet background configuration, please refer to WeChat official documentation for specific configuration methods)
success The return parameter of the success callback is an object containing id, savedFilePath
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);
      }
    }
  })
}

Copy after login

Using the download method (wx.downloadFile(obj)) requires configuring the server domain name in the WeChat applet. Please enter the server domain name in the background of the applet - Settings - Development Settings - Server Domain Name For configuration, please refer to WeChat official documentation for details.

Encapsulation of multiple file downloads and saves

Multiple file downloads and saves. It is mandatory that all files must be downloaded successfully before the return is considered Success

Parameters: an object containing

urls download address array, supports multiple url downloads [url1, url2]
success Download is successful (all files must be downloaded successfully to be considered successful) Callback parameter map, key(id) -> value ({id,savedFilePath})
fail Download failed , the call fails as long as one method 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);
        }

      }
    })
  }
}

Copy after login

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
}

Copy after login

Use

first import

import download from "download.js"

Copy after login

and then call

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

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program The use of loops and nested loops

How to return to the homepage of the sharing page of the WeChat applet

The above is the detailed content of A simple package for downloading multiple files in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!