本文主要介紹微信小程式之多檔案下載的簡單封裝範例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
需求
需要產生一個宣傳的圖片分享到朋友圈,這個宣傳圖片包含二維碼,包含不同的背景圖片和不同的文字。對於這種圖片生成,我們考慮過使用服務端生成,但是這樣會比較耗伺服器效能,所以最終決定使用本地生成。
首先小程式有一個限制,套件不能大於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("下载失败"); } );
相關推薦:
以上是微信小程式多檔案下載的簡單封裝實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!