今回は、WeChat ミニ プログラムの複数の ファイル ダウンロード のパッケージ化について説明します。WeChat ミニ プログラムの複数のファイル ダウンロードのカプセル化を使用する場合の の注意事項について説明します。実際のケースを見てみましょう。
要件
友達のサークルで共有するには、プロモーション まず、ミニプログラムには制限があり、パッケージは2mを超えることはできず、複数の背景画像がある可能性があるため、背景画像とQRコード画像をサーバーに配置することでサイズを削減する予定ですミニプログラムパッケージの背景画像を柔軟に切り替えます。 共有画像を描画する場合、インターネットアドレスを直接使用できますが、問題が発生したため画像を生成できない可能性があるため、画像ファイルをダウンロードする必要があります。 WeChat にはファイルをダウンロードするための API がありますが、ファイルの一時パスを返します。これはミニ プログラムの現在の起動中にのみ通常使用できます。ファイルを永続的に保存する必要がある場合は、積極的に wx を呼び出す必要があります。次回ミニ プログラムが開始される前に saveFile が起動時にアクセスされます。 そこで、まずダウンロードしたファイルと保存したファイルをカプセル化しますダウンロードをカプセル化してファイルを保存します
このメソッドは比較的単純です パラメータ:/** * 下载保存一个文件 */ 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); } } }) }
ミニ プログラムでサーバー ドメイン名を構成する必要があります。ミニ プログラムのバックグラウンドでサーバー ドメイン名を構成してください。詳細については、WeChat の公式ドキュメントを参照してください。
複数のファイルをダウンロードして保存する前に、すべてのファイルが正常にダウンロードされている必要があります。戻りは成功しました
パラメータ:
urls ダウンロード アドレス配列を含むオブジェクト、複数の URL ダウンロードをサポート [url1, url2]
/** * 多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功 */ 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); } } }) } }
/** * 下载管理器 * 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("下载失败");
}
);
推奨読書:
Angular2の親子コンポーネントの通信方法以上がWeChat アプレットの複数ファイルのダウンロードのカプセル化の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。