コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

php中世界最好的语言
リリース： 2018-03-23 09:54:42
オリジナル
2374 人が閲覧しました

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

要件

友達のサークルで共有するには、プロモーション

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

まず、ミニプログラムには制限があり、パッケージは2mを超えることはできず、複数の背景画像がある可能性があるため、背景画像とQRコード画像をサーバーに配置することでサイズを削減する予定ですミニプログラムパッケージの背景画像を柔軟に切り替えます。

共有画像を描画する場合、インターネットアドレスを直接使用できますが、問題が発生したため画像を生成できない可能性があるため、画像ファイルをダウンロードする必要があります。

WeChat にはファイルをダウンロードするための API がありますが、ファイルの一時パスを返します。これはミニ プログラムの現在の起動中にのみ通常使用できます。ファイルを永続的に保存する必要がある場合は、積極的に wx を呼び出す必要があります。次回ミニ プログラムが開始される前に saveFile が起動時にアクセスされます。

そこで、まずダウンロードしたファイルと保存したファイルをカプセル化します

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

このメソッドは比較的単純です

パラメータ:

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

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

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

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

    2. 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);
        }
      }
    })
  }
}
    ログイン後にコピー
    3. 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("下载失败");
  }
);
ログイン後にコピー
を呼び出します。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angular2の親子コンポーネントの通信方法

​​

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

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

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

関連ラベル：
使用 アプレット ドキュメントをダウンロード
ソース：php.cn
前の記事：JSでObjectオブジェクトのプロトタイプを使用する方法 次の記事：JS文字列にインターセプト関数slice()、substring()、substr()を実装する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ApacheのどこにCustomLogディレクティブを配置すればよいですか 私はphp:7.2-apachedockerを使用しています。ヘルスチェック URL ログイン アクセス ログを無効にする必要があります。このリンクに基づいて、Customlog ...
から 2024-04-06 22:03:59
0
1
990
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート