微信小程序之多文件下載的簡(jiǎn)單封裝示例

2019-11-19 14:27:41

字體：大中小

供稿：網(wǎng)友

需求

需要生成一個(gè)宣傳的圖片分享到朋友圈，這個(gè)宣傳圖片包含二維碼，包含不同的背景圖片和不同的文字。對(duì)于這種圖片生成，我們考慮過(guò)使用服務(wù)端生成，但是這樣會(huì)比較耗服務(wù)器性能，所以最終決定使用本地生成。

首先小程序有一個(gè)限制，包不能大于2m，而且我們可能多個(gè)背景圖，所以計(jì)劃把背景圖和二維碼圖片放在服務(wù)端，這樣可以減少小程序包的大小，也可以靈活的切換背景圖。

在繪制分享圖的時(shí)候，可以直接使用互聯(lián)網(wǎng)地址，但是遇到了一個(gè)問(wèn)題，有可能不能生成圖片，所以我們需要把這個(gè)圖片文件下載下來(lái)。

下載文件的方法微信有API，但是返回的是文件的臨時(shí)路徑，只在小程序本次啟動(dòng)期間可以正常使用，如需持久保存，需在主動(dòng)調(diào)用 wx.saveFile，才能在小程序下次啟動(dòng)時(shí)訪問(wèn)得到。

所以我們先把下載文件和保存文件封裝

封裝下載并且保存一個(gè)文件

這個(gè)方法比較簡(jiǎn)單

參數(shù)：一個(gè)對(duì)象，包含

id 需要下載文件的id，如果不傳默認(rèn)是下載的url，之所以需要id，是因?yàn)槲覀円龆辔募螺d，可以區(qū)分下載的是一個(gè)文件
url 下載文件的網(wǎng)絡(luò)地址（需要微信小程序后臺(tái)配置，具體配置方法請(qǐng)參考微信官方文檔）
success 成功回調(diào) 返回參數(shù)是一個(gè)對(duì)象包含 id,savedFilePath
fail 失敗回調(diào) ,下載失敗，保存都是都算失敗

/** * 下載保存一個(gè)文件 */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 開(kāi)始下載。。。", 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è)文件失敗");          if (fail) {            fail(e);          }        }      })    },    fail: function (e) {      console.info("下載一個(gè)文件失敗");      if (fail) {        fail(e);      }    }  })}

使用下載方法（wx.downloadFile(obj)）需要在微信小程序配置服務(wù)器域名,服務(wù)器域名請(qǐng)?jiān)?小程序后臺(tái)-設(shè)置-開(kāi)發(fā)設(shè)置-服務(wù)器域名中進(jìn)行配置，具體請(qǐng)參考微信官方文檔

封裝多文件下載并且保存

多文件下載并且保存，強(qiáng)制規(guī)定，必須所有文件下載成功才算返回成功

參數(shù)：一個(gè)對(duì)象，包含

urls 下載地址數(shù)組，支持多個(gè) url下載 [url1,url2]
success 下載成功（必須所有文件下載成功才算返回成功）回調(diào)參數(shù) map ，key(id) -> value ({id,savedFilePath})
fail 下載失敗，只要有一個(gè)方法失敗就調(diào)用失敗

/** * 多文件下載并且保存，強(qiáng)制規(guī)定，必須所有文件下載成功才算返回成功 */function downloadSaveFiles(obj) {  // console.info("準(zhǔn)備下載。。。");  let that = this;  let success = obj.success; //下載成功  let fail = obj.fail; //下載失敗  let urls = obj.urls; //下載地址 數(shù)組，支持多個(gè) url下載 [url1,url2]  let savedFilePaths = new Map();  let urlsLength = urls.length; // 有幾個(gè)url需要下載  for (let i = 0; i < urlsLength; i++) {    downloadSaveFile({      url: urls[i],      success: function (res) {        //console.dir(res);        //一個(gè)文件下載保存成功        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. *//** * 下載保存一個(gè)文件 */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 開(kāi)始下載。。。", 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è)文件失敗");          if (fail) {            fail(e);          }        }      })    },    fail: function (e) {      console.info("下載一個(gè)文件失敗");      if (fail) {        fail(e);      }    }  })}/** * 多文件下載并且保存，強(qiáng)制規(guī)定，必須所有文件下載成功才算返回成功 */function downloadSaveFiles(obj) {  // console.info("準(zhǔn)備下載。。。");  let that = this;  let success = obj.success; //下載成功  let fail = obj.fail; //下載失敗  let urls = obj.urls; //下載地址 數(shù)組，支持多個(gè) url下載 [url1,url2]  let savedFilePaths = new Map();  let urlsLength = urls.length; // 有幾個(gè)url需要下載  for (let i = 0; i < urlsLength; i++) {    downloadSaveFile({      url: urls[i],      success: function (res) {        console.dir(res);        //一個(gè)文件下載保存成功        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}

使用

首先導(dǎo)入

import download from "download.js"

之后調(diào)用

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("下載失敗");  });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：實(shí)例學(xué)習(xí)JavaScript讀取和寫(xiě)入cookie

下一篇：JS中Object對(duì)象的原型概念基礎(chǔ)