Comment implémenter plusieurs téléchargements de fichiers dans le mini-programme WeChat

Cet article présente principalement un exemple d'encapsulation simple pour télécharger plusieurs fichiers dans une applet WeChat. Maintenant, je le partage avec vous et le donne comme référence.

Exigences

Vous devez générer une image promotionnelle à partager dans votre cercle d'amis. Cette image promotionnelle contient un code QR, différentes images d'arrière-plan et différents textes. Pour ce type de génération d'images, nous avons envisagé d'utiliser la génération côté serveur, mais cela consommerait plus de performances du serveur, nous avons donc finalement décidé d'utiliser la génération locale.

Tout d'abord, le mini-programme a une limitation. Le package ne peut pas dépasser 2 m, et nous pouvons avoir plusieurs images d'arrière-plan, nous prévoyons donc de mettre les images d'arrière-plan et les images de code QR sur le serveur, ce qui peut réduire la taille du mini-programme. Vous pouvez également changer de manière flexible les images d'arrière-plan.

Lorsque vous dessinez une image partagée, vous pouvez utiliser directement l'adresse Internet, mais nous avons rencontré un problème et nous ne pourrons peut-être pas générer l'image, nous devons donc télécharger le fichier image.

WeChat dispose d'une API pour télécharger des fichiers, mais le chemin temporaire du fichier est renvoyé, qui ne peut être utilisé normalement que lors du démarrage actuel du mini-programme. Si vous devez le sauvegarder de manière persistante, vous devez le faire. appelez activement wx.saveFile avant de pouvoir le faire. L'applet sera accessible au prochain démarrage.

Nous encapsulons donc d'abord le fichier téléchargé et le fichier enregistré

Encapsulons le fichier téléchargé et enregistré

Cette méthode est relativement simple

Paramètres : un objet, comprenant

1. id. L'identifiant du fichier qui doit être téléchargé. S'il n'est pas transmis, la valeur par défaut est l'URL de téléchargement. La raison pour laquelle l'identifiant est nécessaire. c'est parce que nous devons télécharger plusieurs fichiers et pouvons les distinguer. Ce qui est téléchargé est un fichier

2. url L'adresse réseau du fichier téléchargé (nécessite la configuration en arrière-plan de l'applet WeChat, veuillez vous référer à WeChat. documentation officielle pour les méthodes de configuration spécifiques)

3. Le paramètre de retour de rappel de réussite est un objet contenant l'identifiant, SaveFilePath

4. échec de rappel, échec de téléchargement, et l'enregistrement sont tous considérés comme des échecs

/**
 * 下载保存一个文件
 */
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);
      }
    }
  })
}

L'utilisation de la méthode de téléchargement (wx.downloadFile(obj)) nécessite la configuration du nom de domaine du serveur dans le mini programme WeChat. nom dans le nom de domaine du mini-programme background-settings-development settings-server Pour plus de détails, veuillez vous référer à la documentation officielle de WeChat

Encapsuler le téléchargement et l'enregistrement de plusieurs fichiers

Téléchargez et enregistrez plusieurs fichiers. Il est obligatoire que tous les fichiers soient téléchargés avec succès pour être considérés comme réussis.

Paramètre : un objet, y compris

1. tableau d'adresses de téléchargement d'URL. , prend en charge plusieurs téléchargements d'URL [url1, url2]

2. le téléchargement réussi est réussi (tous les fichiers doivent être téléchargés Le retour n'est réussi que s'il réussit) Carte des paramètres de rappel, clé (id) - > value ({id, savingFilePath})

3. fail Le téléchargement échoue, tant qu'une méthode échoue, l'appel échoue

/**
 * 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
 */
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);
        }

      }
    })
  }
}

Fichier download.js complet

/**
 * 下载管理器
 * 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
}

Utilisez

première importation

Après

import download from "download.js"

appelez

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("下载失败");
  }
);

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter le retour du scroller à la page en vue et mémoriser la position de défilement

Une introduction détaillée aux classes d'outils utilisées dans javascript Encapsulation (tutoriel détaillé)

Présentation du fichier d'entrée de code source dans vue en détail (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!