未分类

微信小程序之多文件下载的简单封装示例_javascript技巧_脚本之家

26 3月 , 2020  

多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功

所以我们先把下载文件和保存文件封装

/** * 下载保存一个文件 */function downloadSaveFile { let that = this; let success = obj.success; let fail = obj.fail; let id = ""; let url = obj.url; if { id = obj.id; }else{ id = url; } // console.info("%s 开始下载。。。", obj.url); wx.downloadFile({ url: obj.url, success: function  { wx.saveFile({ tempFilePath: res.tempFilePath, success: function  { result.id = id; if  { success; } }, fail: function  { console.info; if ; } } }) }, fail: function  { console.info; if ; } } })}

urls 下载地址 数组,支持多个 url下载 [url1,url2] success 下载成功
回调参数 map ,key -> value fail
下载失败,只要有一个方法失败就调用失败

需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文字。对于这种图片生成,我们考虑过使用服务端生成,但是这样会比较耗服务器性能,所以最终决定使用本地生成。

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  { // console.dir; console.info.savedFilePath) }, fail: function  { console.info;

需求

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

封装多文件下载并且保存

使用

在绘制分享图的时候,可以直接使用互联网地址,但是遇到了一个问题,有可能不能生成图片,所以我们需要把这个图片文件下载下来。

下载文件的方法微信有API,但是返回的是文件的临时路径,只在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用
wx.saveFile,才能在小程序下次启动时访问得到。

/** * 多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功 */function downloadSaveFiles { // 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  { //console.dir; //一个文件下载保存成功 let savedFilePath = res.savedFilePath; savedFilePaths.set; console.info("savedFilePath:%s", savedFilePath); if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功 if { success } } }, fail: function  { console.info { fail }}

id
需要下载文件的id,如果不传默认是下载的url,之所以需要id,是因为我们要做多文件下载,可以区分下载的是一个文件
url
下载文件的网络地址(需要微信小程序后台配置,具体配置方法请参考微信官方文档)
success 成功回调 返回参数是一个对象 包含 id,savedFilePath fail 失败回调
,下载失败,保存都是都算失败

完整的download.js文件

/** * 下载管理器 * Created by 全科 on 2018/1/27. *//** * 下载保存一个文件 */function downloadSaveFile { let that = this; let success = obj.success; let fail = obj.fail; let id = ""; let url = obj.url; if { id = obj.id; }else{ id = url; } // console.info("%s 开始下载。。。", obj.url); wx.downloadFile({ url: obj.url, success: function  { wx.saveFile({ tempFilePath: res.tempFilePath, success: function  { result.id = id; if  { success; } }, fail: function  { console.info; if ; } } }) }, fail: function  { console.info; if ; } } })}/** * 多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功 */function downloadSaveFiles { // 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  { console.dir; //一个文件下载保存成功 let savedFilePath = res.savedFilePath; savedFilePaths.set; console.info("savedFilePath:%s", savedFilePath); if (savedFilePaths.size == urlsLength) { //如果所有的url 才算成功 if { success } } }, fail: function  { console.info { fail }}module.exports = { downloadSaveFiles: downloadSaveFiles}

首先小程序有一个限制,包不能大于2m,而且我们可能多个背景图,所以计划把背景图和二维码图片放在服务端,这样可以减少小程序包的大小,也可以灵活的切换背景图。

使用下载方法需要在微信小程序配置服务器域名,服务器域名请在
小程序后台-设置-开发设置-服务器域名 中进行配置 ,具体请参考 微信官方文档

封装下载并且保存一个文件


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图