Utilisation de l'encapsulation de téléchargement multi-fichiers de l'applet WeChat-js tutoriel-php.cn

Cette fois, je vais vous présenter l'utilisation de l'encapsulation de téléchargement multi-fichiers du mini-programme WeChat. Quelles sont les précautions pour l'utilisation de l'encapsulation de téléchargement multi-fichiers du mini-programme WeChat. Ce qui suit est un cas pratique, jetons un coup d'œil.

Conditions

Vous devez générer une photo promotionnelle à partager dans votre cercle d'amis. Cette photo promotionnelle contient un code QR, comprenant différents. 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

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 de configurer le nom de domaine du serveur dans l'applet WeChat . Veuillez configurer le nom de domaine du serveur en arrière-plan de l'applet - Paramètres - Paramètres de développement - Nom de domaine du serveur 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écharger et enregistrer plusieurs fichiers. 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, comprenant

Tableau d'adresses de téléchargement d'URL, prend en charge plusieurs téléchargements d'URL [url1, url2]
téléchargement réussi Succès (tous les fichiers doivent être téléchargés avec succès pour être considérés comme réussis) Carte des paramètres de rappel, clé (id) - > value ({id, savingFilePath})
fail Le téléchargement a échoué, tant qu'il y en a un. Si la 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

Le 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

pour l'importer d'abord Après

import download from "download.js"

Copier après la connexion

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Méthode de communication des composants parent-enfant Angular2

Résumé des méthodes d'optimisation du code jQuery

Comment gérer l'affichage incomplet d'une page en mode de compatibilité du navigateur 360

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!