需求
需要生成一個宣傳的圖片分享到朋友圈，這個宣傳圖片包含二維碼，包含不同的背景圖片和不同的文字。對于這種圖片生成，我們考慮過使用服務端生成，但是這樣會比較耗服務器性能，所以最終決定使用本地生成。
首先小程序有一個限制，包不能大于2m，而且我們可能多個背景圖，所以計劃把背景圖和二維碼圖片放在服務端，這樣可以減少小程序包的大小，也可以靈活的切換背景圖。
在繪制分享圖的時候，可以直接使用互聯網地址，但是遇到了一個問題，有可能不能生成圖片，所以我們需要把這個圖片文件下載下來。
下載文件的方法微信有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); } } })}使用下載方法（wx.downloadFile(obj)）需要在微信小程序配置服務器域名,服務器域名請在 小程序后臺-設置-開發設置-服務器域名 中進行配置 ，具體請參考 微信官方文檔
封裝多文件下載并且保存
多文件下載并且保存，強制規定，必須所有文件下載成功才算返回成功
參數：一個對象，包含
/** * 多文件下載并且保存，強制規定，必須所有文件下載成功才算返回成功 */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("下載失敗"); });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
