您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
微信小程序之多文(wén)件下(xià)載的簡單封裝
發表時間：2021-3-31
發布人：葵宇科技
浏覽次數：53
需求
需要生成一個(gè)宣傳的圖片分享到朋友圈，這個(gè)宣傳圖片包含二維碼，包含不同的背景圖片和(hé)不同的文(wén)字。對于這種圖片生成，我們考慮過使用服務端生成，但是這樣會比較耗服務器(qì)性能，所以最終決定使用本地生成。
首先小程序有一個(gè)限制，包不能大于2m，而且我們可(kě)能多個(gè)背景圖，所以計劃把背景圖和(hé)二維碼圖片放在服務端，這樣可(kě)以減少(shǎo)小程序包的大小，也可(kě)以靈活的切換背景圖。
在繪制分享圖的時候，可(kě)以直接使用互聯網地址，但是遇到了一個(gè)問(wèn)題，有可(kě)能不能生成圖片，所以我們需要把這個(gè)圖片文(wén)件下(xià)載下(xià)來。
下(xià)載文(wén)件的方法微信有API，但是返回的是文(wén)件的臨時路(lù)徑，隻在小程序本次啟動(dòng)期間可(kě)以正常使用，如(rú)需持久保存，需在主動(dòng)調用 wx.saveFile，才能在小程序下(xià)次啟動(dòng)時訪問(wèn)得到。
所以我們先把下(xià)載文(wén)件和(hé)保存文(wén)件封裝
封裝下(xià)載并且保存一個(gè)文(wén)件
這個(gè)方法比較簡單
參數：一個(gè)對象，包含
- id 需要下(xià)載文(wén)件的id，如(rú)果不傳默認是下(xià)載的url，之所以需要id，是因為我們要做多文(wén)件下(xià)載，可(kě)以區分下(xià)載的是一個(gè)文(wén)件
- url 下(xià)載文(wén)件的網絡地址（需要微信小程序後台配置，具體配置方法請參考微信官方文(wén)檔）
- success 成功回調 返回參數是一個(gè)對象 包含
id,savedFilePath - fail 失敗回調 ,下(xià)載失敗，保存都是都算失敗
/**
* 下(xià)載保存一個(gè)文(wén)件
*/
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 開始下(xià)載。。。", 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("保存一個(gè)文(wén)件失敗");
if (fail) {
fail(e);
}
}
})
},
fail: function (e) {
console.info("下(xià)載一個(gè)文(wén)件失敗");
if (fail) {
fail(e);
}
}
})
}
使用下(xià)載方法（wx.downloadFile(obj)）需要在微信小程序配置服務器(qì)域名,服務器(qì)域名請在
小程序後台-設置-開發設置-服務器(qì)域名中(zhōng)進行配置 ，具體請參考 微信官方文(wén)檔
封裝多文(wén)件下(xià)載并且保存
多文(wén)件下(xià)載并且保存，強制規定，必須所有文(wén)件下(xià)載成功才算返回成功
參數：一個(gè)對象，包含
- urls 下(xià)載地址 數組，支持多個(gè) url下(xià)載 [url1,url2]
- success 下(xià)載成功 （必須所有文(wén)件下(xià)載成功才算返回成功） 回調參數 map ，key(id) -> value ({id,savedFilePath})
- fail 下(xià)載失敗，隻要有一個(gè)方法失敗就調用失敗
/**
* 多文(wén)件下(xià)載并且保存，強制規定，必須所有文(wén)件下(xià)載成功才算返回成功
*/
function downloadSaveFiles(obj) {
// console.info("準備下(xià)載。。。");
let that = this;
let success = obj.success; //下(xià)載成功
let fail = obj.fail; //下(xià)載失敗
let urls = obj.urls; //下(xià)載地址 數組，支持多個(gè) url下(xià)載 [url1,url2]
let savedFilePaths = new Map();
let urlsLength = urls.length; // 有幾個(gè)url需要下(xià)載
for (let i = 0; i < urlsLength; i++) {
downloadSaveFile({
url: urls[i],
success: function (res) {
//console.dir(res);
//一個(gè)文(wén)件下(xià)載保存成功
let savedFilePath = res.savedFilePath;
savedFilePaths.set(res.id, res);
console.info("savedFilePath:%s", savedFilePath);
if (savedFilePaths.size == urlsLength) { //如(rú)果所有的url 才算成功
if (success){
success(savedFilePaths)
}
}
},
fail: function (e) {
console.info("下(xià)載失敗");
if (fail) {
fail(e);
}
}
})
}
}
完整的download.js文(wén)件
/**
* 下(xià)載管理器(qì)
* Created by 全科 on 2018/1/27.
*/
/**
* 下(xià)載保存一個(gè)文(wén)件
*/
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 開始下(xià)載。。。", 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("保存一個(gè)文(wén)件失敗");
if (fail) {
fail(e);
}
}
})
},
fail: function (e) {
console.info("下(xià)載一個(gè)文(wén)件失敗");
if (fail) {
fail(e);
}
}
})
}
/**
* 多文(wén)件下(xià)載并且保存，強制規定，必須所有文(wén)件下(xià)載成功才算返回成功
*/
function downloadSaveFiles(obj) {
// console.info("準備下(xià)載。。。");
let that = this;
let success = obj.success; //下(xià)載成功
let fail = obj.fail; //下(xià)載失敗
let urls = obj.urls; //下(xià)載地址 數組，支持多個(gè) url下(xià)載 [url1,url2]
let savedFilePaths = new Map();
let urlsLength = urls.length; // 有幾個(gè)url需要下(xià)載
for (let i = 0; i < urlsLength; i++) {
downloadSaveFile({
url: urls[i],
success: function (res) {
console.dir(res);
//一個(gè)文(wén)件下(xià)載保存成功
let savedFilePath = res.savedFilePath;
savedFilePaths.set(res.id, res);
console.info("savedFilePath:%s", savedFilePath);
if (savedFilePaths.size == urlsLength) { //如(rú)果所有的url 才算成功
if (success){
success(savedFilePaths)
}
}
},
fail: function (e) {
console.info("下(xià)載失敗");
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("下(xià)載失敗");
}
);
參考
- mp.weixin.qq.com/debug/wxado…
