本篇文章主要介紹了微信小程式之多文件下載的簡單封裝範例，現在分享給大家，也給大家做個參考。
需求
需要產生一個宣傳的圖片分享到朋友圈，這個宣傳圖片包含二維碼，包含不同的背景圖片和不同的文字。對於這種圖片生成，我們考慮過使用服務端生成，但是這樣會比較耗伺服器效能，所以最終決定使用本地生成。
首先小程式有一個限制，套件不能大於2m，而且我們可能多個背景圖，所以打算把背景圖和二維碼圖片放在服務端，這樣可以減少小程式包的大小，也可以靈活的切換背景圖。
在繪製分享圖的時候，可以直接使用網路位址，但遇到了一個問題，有可能不能產生圖片，所以我們需要下載這個圖片檔案。
下載檔案的方法微信有API，但是傳回的是檔案的臨時路徑，只在小程式本次啟動期間可以正常使用，如需持久保存，需在主動呼叫wx.saveFile，才能在小程式下次啟動時存取得到。
所以我們先把下載檔案和儲存檔案封裝
封裝下載並且儲存一個檔案
這個方法比較簡單
參數：一個對象，包含
id 需要下載檔案的id，如果不傳預設是下載的url，之所以需要id，是因為我們要做多檔案下載，可以區分下載的是一個檔案
url 下載檔案的網路位址（需要微信小程式後台配置，具體設定方法請參考微信官方文件）
success 成功回呼回傳參數是一個物件包含id,savedFilePath
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);
}
}
})
}登入後複製
使用下載方法（wx.downloadFile(obj)）需要在微信小程式配置伺服器網域名稱,伺服器網域請在小程式後台-設定-開發設定-伺服器網域中進行配置，具體請參考微信官方文件
封裝多文件下載並且保存
多文件下載並且保存，強制規定，必須所有文件下載成功才算返回成功
參數：一個對象，包含
urls 下載位址數組，支援多個url下載[url1,url2]
success 下載成功（必須所有檔案下載成功才算回傳成功） 回呼參數map ，key(id) -> value ({id,savedFilePath})
fail 下載失敗，只要有一個方法失敗就呼叫失敗
/**
* 多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
*/
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檔案
/**
* 下载管理器
* 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("下载失败");
}
);登入後複製
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
在vue中scroller返回頁面並且記住滾動位置如何實現
詳細介紹javascript中常用工具類的封裝（詳細教學）
在vue中詳細介紹原始碼入口檔案（詳細教學）
#
以上是在微信小程式中如何實現多檔案下載的詳細內容。更多資訊請關注PHP中文網其他相關文章！
