WeChat アプレットの複数ファイルのダウンロードのカプセル化の使用

今回は、WeChat ミニ プログラムの複数の ファイル ダウンロード のパッケージ化について説明します。WeChat ミニ プログラムの複数のファイル ダウンロードのカプセル化を使用する場合の の注意事項について説明します。実際のケースを見てみましょう。

要件

画像 を生成する必要があります。このプロモーション画像には、QR コード、さまざまな背景画像、さまざまなテキストが含まれています。この種の画像生成には、サーバーサイド生成を使用することも検討しましたが、サーバーのパフォーマンスをより多く消費するため、最終的にローカル生成を使用することにしました。

ダウンロードをカプセル化してファイルを保存します

1. id を含むオブジェクト渡されない場合はダウンロードする必要があります。デフォルトはダウンロード URL です。ID が必要な理由は、ダウンロードが 1 つのファイルであることを区別できるためです。ダウンロードされたファイル (WeChat アプレットのバックグラウンド設定が必要です。具体的な設定方法は WeChat 公式ドキュメントを参照してください)

2. success 成功コールバックの戻りパラメータは、id、savedFilePath を含むオブジェクトです

3. fail 失敗コールバック、ダウンロード失敗、および保存はすべて失敗とみなされます

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

ログイン後にコピー
4. ダウンロード メソッド (wx.downloadFile( obj)) を使用して、WeChat

   ミニ プログラムでサーバー ドメイン名を構成する必要があります。ミニ プログラムのバックグラウンドでサーバー ドメイン名を構成してください。詳細については、WeChat の公式ドキュメントを参照してください。

複数のファイルをダウンロードして保存する前に、すべてのファイルが正常にダウンロードされている必要があります。戻りは成功しました

パラメータ:

urls ダウンロード アドレス配列を含むオブジェクト、複数の URL ダウンロードをサポート [url1, url2]

success ダウンロードは成功しました (成功したとみなされるには、すべてのファイルが正常にダウンロードされる必要があります) コールバック パラメータマップ、キー(id) -> 値 ({id,savedFilePath})
fail ダウンロードは失敗します。1 つのメソッドが失敗する限り、呼び出しは失敗します

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

   ログイン後にコピー
download.js ファイルを完了します

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

   ログイン後にコピー

まず

import download from "download.js"

をインポートしてから、

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

推奨読書:

jQueryコードの最適化方法のまとめ

360ブラウザ互換モードで不完全なページ表示に対処する方法

以上がWeChat アプレットの複数ファイルのダウンロードのカプセル化の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。