Heim > Web-Frontend > js-Tutorial > Verwendung des WeChat-Applets zum Herunterladen mehrerer Dateien

Verwendung des WeChat-Applets zum Herunterladen mehrerer Dateien

php中世界最好的语言
Freigeben: 2018-03-23 09:54:42
Original
2406 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Verwendung der Kapselung des WeChat-Miniprogramms zum Herunterladen mehrerer Dateien vorstellen. Welche Vorsichtsmaßnahmen gibt es für die Verwendung der Kapselung zum Herunterladen mehrerer Dateien des WeChat-Miniprogramms? Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

Anforderungen

Es muss ein Werbe-

Bild zum Teilen in Moments erstellt werden. Dieses Werbebild enthält einen QR-Code, einschließlich verschiedener Hintergrundbilder und Anders 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 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);
      }
    }
  })
}
Nach dem Login kopieren
Die Verwendung der Download-Methode (wx.downloadFile(obj)) erfordert die Konfiguration des

Serverdomänennamens im WeChat -Applet. Bitte konfigurieren Sie den Serverdomänennamen im Hintergrund des Applets – Einstellungen – Entwicklungseinstellungen – Serverdomänenname. Weitere Informationen finden Sie in der offiziellen WeChat-Dokumentation

Herunterladen und Speichern mehrerer Dateien kapseln

Mehrere Dateien herunterladen und speichern. Es ist zwingend erforderlich, dass alle Dateien erfolgreich heruntergeladen werden, bevor die Rückgabe erfolgreich ist.

Parameter: ein Objekt, einschließlich

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

  2. Erfolgreicher Download Erfolgreich (alle Dateien müssen erfolgreich heruntergeladen werden, um als erfolgreich zu gelten) Rückrufparameterzuordnung, Schlüssel(id) – > value ({id, savingFilePath})

  3. fail Download fehlgeschlagen, solange es einen gibt. Wenn die 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
Die komplette 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

, um sie zuerst zu importieren. Nach

import download from "download.js"
Nach dem Login kopieren
rufen Sie

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
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("下载失败");
  }
);
Nach dem Login kopieren

Empfohlene Lektüre:

Angular2-Kommunikationsmethode für Eltern-Kind-Komponenten


Eine Zusammenfassung der Methoden zur Optimierung des jQuery-Codes


So gehen Sie mit unvollständiger Seitenanzeige im 360-Browser-Kompatibilitätsmodus um

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage