Comment implémenter plusieurs téléchargements de fichiers dans le mini-programme WeChat-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-09 10:09:32

original

4850 Les gens l'ont consulté

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

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
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)
Le paramètre de retour de rappel de réussite est un objet contenant l'identifiant, SaveFilePath
é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);
      }
    }
  })
}

Copier après la connexion

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

tableau d'adresses de téléchargement d'URL. , prend en charge plusieurs téléchargements d'URL [url1, url2]
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})
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);
        }

      }
    })
  }
}

Copier après la connexion

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
}

Copier après la connexion

Utilisez

première importation

Après

import download from "download.js"

Copier après la connexion

appelez

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

Copier après la connexion

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.