Ein einfaches Paket 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 Editor und werfen Sie einen Blick darauf.

Anforderungen

Sie müssen ein Werbebild erstellen, um es in Ihrem Freundeskreis zu teilen. Dieses Werbebild enthält einen QR-Code und verschiedene Hintergründe, Bilder und verschiedene Texte. 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-Code-Bilder auf dem Server abzulegen können Sie die Größe des Mini-Programmpakets reduzieren. Außerdem können Sie 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 der Standardwert die Download-URL 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 in Das WeChat-Miniprogramm. Bitte geben Sie den Serverdomänennamen in das Miniprogramm ein. Hintergrundeinstellungen-Entwicklungseinstellungen-Serverdomänenname. Einzelheiten zur Konfiguration finden Sie in der offiziellen WeChat-Dokumentation.

Kapseln Sie mehrere Dateidownloads und Speichern Sie sie

Mehrere Dateidownloads und speichern Sie sie. Es ist zwingend erforderlich, dass alle Dateien erfolgreich heruntergeladen wurden, bevor die Rückgabe als erfolgreich gilt

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ückruf Parameterzuordnung, Schlüssel(id) -> Wert ({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

Importieren Sie zuerst

import download from "download.js"

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

Das Obige auf ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

WeChat-Miniprogramm Die Verwendung von Schleifen und verschachtelten Schleifen

So kehren Sie zur Startseite der WeChat-Applet-Sharing-Seite zurück

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