Einfaches Kapselungsbeispiel zum Herunterladen mehrerer Dateien im WeChat-Miniprogramm

In diesem Artikel wird hauptsächlich ein einfaches Kapselungsbeispiel zum Herunterladen mehrerer Dateien im WeChat-Applet vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Anforderungen

Sie müssen ein Werbebild erstellen, um es in Ihrem Freundeskreis zu teilen. Dieses Werbebild enthält einen QR-Code, einschließlich verschiedener Hintergrundbilder anderer Text. Für diese Art der Bildgenerierung haben wir überlegt, die serverseitige Generierung zu verwenden, aber dies würde mehr Serverleistung verbrauchen, weshalb wir uns schließlich für die lokale Generierung entschieden haben.

Zuallererst gibt es für das Miniprogramm eine Einschränkung. Das Paket darf nicht größer als 2 m sein und wir haben möglicherweise mehrere Hintergrundbilder. Daher planen wir, die Hintergrundbilder und QR-Codebilder auf dem Server abzulegen können Sie die Größe des Mini-Programmpakets reduzieren. Sie können auch Hintergrundbilder flexibel wechseln.

Beim Zeichnen eines freigegebenen Bildes können Sie direkt die Internetadresse verwenden, aber wir sind auf ein Problem gestoßen und konnten das Bild möglicherweise nicht generieren, daher müssen wir die Bilddatei herunterladen.

WeChat verfügt über eine API zum Herunterladen von Dateien, es wird jedoch der temporäre Pfad der Datei zurückgegeben, der nur beim aktuellen Start des Miniprogramms normal verwendet werden kann. Wenn Sie sie dauerhaft speichern müssen, müssen Sie dies tun Rufen Sie wx.saveFile aktiv auf, bevor Sie das Applet beim nächsten Start aufrufen können.

Also kapseln wir zunächst die heruntergeladene Datei und die gespeicherte Datei

Kapseln Sie die heruntergeladene und gespeicherte Datei

Diese Methode ist relativ einfach

Parameter: ein Objekt, einschließlich

1. ID der Datei, die heruntergeladen werden muss. Wenn nicht, ist die Standardeinstellung der Grund, warum die ID benötigt wird Dies liegt daran, dass wir mehrere Dateien herunterladen müssen und sie unterscheiden können. Was heruntergeladen wird, ist eine Datei

2. URL Die Netzwerkadresse der heruntergeladenen Datei (erfordert eine WeChat-Applet-Hintergrundkonfiguration, siehe WeChat offizielle Dokumentation für bestimmte Konfigurationsmethoden)

3. Der Erfolgsrückruf-Rückgabeparameter ist ein Objekt mit der ID „savedFilePath“

4. Fehler-Rückruf, Download-Fehler, und Speichern gelten alle als Fehler

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

Die Verwendung der Download-Methode (wx.downloadFile(obj)) erfordert die Konfiguration des Serverdomänennamens im WeChat-Applet. Für den Serverdomänennamen gehen Sie bitte zum Hintergrund des Applets – Einstellungen – Entwicklungseinstellungen – Konfiguration des Serverdomänennamens. Weitere Informationen finden Sie in der offiziellen Dokumentation von WeChat.

Kapseln Sie mehrere Dateidownloads und Speichern Sie sie

Mehrere Dateidownloads und -speicherungen. Es ist zwingend erforderlich, dass alle Dateien erfolgreich heruntergeladen wurden

Parameter: ein Objekt, das

enthält

1. URLs-Download-Adress-Array, unterstützt mehrere URL-Downloads [URL1, URL2]

2. Erfolgreicher Download ist erfolgreich (alle Dateien müssen erfolgreich heruntergeladen werden, um als erfolgreich zu gelten), Rückrufparameter map, key(id) -> value ({id,savedFilePath})

3. fail download failed, Der Aufruf schlägt fehl, solange eine Methode fehlschlägt

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

      }
    })
  }
}

Vollständige download.js-Datei

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

Verwenden Sie

um zuerst

import download from "download.js"

zu importieren und dann

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

Verwandte Empfehlungen aufzurufen:

Detaillierte Einführung in die einfache Ajax-Kapselung

Das WeChat-Applet realisiert die einfache Kapselung von Netzwerkanforderungen. Codebeispiel

Einfache Kapselung einiger Funktionen des MySQL-Moduls in PHP

Das obige ist der detaillierte Inhalt vonEinfaches Kapselungsbeispiel zum Herunterladen mehrerer Dateien im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!