Exemple d'encapsulation simple pour télécharger plusieurs fichiers dans le mini-programme WeChat

Cet article présente principalement un exemple d'encapsulation simple pour télécharger plusieurs fichiers dans l'applet WeChat. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Exigences

Vous devez générer une image promotionnelle à partager dans votre cercle d'amis. Cette image promotionnelle contient un code QR, comprenant différentes images d'arrière-plan et. texte différent. 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. succès Le paramètre de retour du rappel de réussite est un objet contenant l'identifiant, saveFilePath

4. fail failed callback, l'échec du 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 domaine du serveur nom dans l'applet WeChat. Pour le nom de domaine du serveur, veuillez aller à l'arrière-plan de l'applet - Paramètres - Paramètres de développement - Configuration du nom de domaine du serveur, veuillez vous référer à la documentation officielle de WeChat pour plus de détails

Encapsuler plusieurs téléchargements de fichiers et sauvegardez-les

Téléchargements et sauvegardes de fichiers multiples. Il est obligatoire que tous les fichiers soient téléchargés avec succès avant que le retour soit réussi

Paramètre : un objet contenant

.

1. tableau d'adresses de téléchargement d'URL, prenant 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 avec succès pour être considéré comme réussi ) carte des paramètres de rappel, clé (id) -> valeur ({id, savedFilePath})

3. échec du téléchargement, l'appel échoue tant qu'une méthode é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
}

Utiliser

pour d'abord importer

import download from "download.js"

puis appeler

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

Recommandations associées :

Détails de l'encapsulation simple Ajax Exemple de code

Encapsulation simple de certaines fonctions du module mysql en php

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!