So implementieren Sie mehrere Dateidownloads im WeChat-Miniprogramm-js-Tutorial-php.cn

So implementieren Sie mehrere Dateidownloads im WeChat-Miniprogramm

亚连

Freigeben： 2018-06-09 10:09:32

Original

4774 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich ein einfaches Kapselungsbeispiel zum Herunterladen mehrerer Dateien im WeChat-Applet vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Anforderungen

Sie müssen ein Werbebild erstellen, um es in Ihrem Freundeskreis zu teilen. Dieses Werbebild enthält einen QR-Code, verschiedene Hintergrundbilder und unterschiedlichen 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-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

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
URL Die Netzwerkadresse der heruntergeladenen Datei (erfordert eine WeChat-Applet-Hintergrundkonfiguration, siehe WeChat offizielle Dokumentation für bestimmte Konfigurationsmethoden)
Der Erfolgsrückruf-Rückgabeparameter ist ein Objekt mit der ID „savedFilePath“
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);
      }
    }
  })
}

Nach dem Login kopieren

Um die Download-Methode (wx.downloadFile(obj)) zu verwenden, müssen Sie den Serverdomänennamen im WeChat-Miniprogramm konfigurieren Serverdomänenname im Hintergrund des Miniprogramms – Einstellungen – Entwicklungseinstellungen – Serverdomänenname. Weitere Informationen finden Sie in der offiziellen WeChat-Dokumentation

Mehrere Dateidownloads und -speicherungen kapseln

Mehrere Datei-Downloads und -Speicherungen. Es ist zwingend erforderlich, dass alle Dateien erfolgreich heruntergeladen wurden.

Parameter: ein Objekt, enthält

URLs Adressarray, unterstützt mehrere URL-Downloads [url1, url2]
Erfolgreicher Download ist erfolgreich (alle Dateien müssen erfolgreich heruntergeladen werden) Erfolgreiche Rückgabe) Callback-Parameterzuordnung, Schlüssel(id) -> value ({id,savedFilePath})
fail Download schlägt fehl, solange eine Methode fehlschlägt, schlägt der Aufruf fehl

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

      }
    })
  }
}

Nach dem Login kopieren

Vollständiger 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
}

Nach dem Login kopieren

Verwenden Sie

zuerst import

import download from "download.js"

Nach dem Login kopieren

und rufen Sie dann

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

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den Scroller, kehren Sie in Vue zur Seite zurück und merken Sie sich die Scrollposition

Eine detaillierte Einführung in häufig Verwendete Werkzeugklassen in der Javascript-Kapselung (ausführliches Tutorial)

Einführung in die Quellcode-Eintragsdatei in Vue im Detail (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mehrere Dateidownloads im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!