微信小程序之多文件下载的简单封装示例
需求
需要生成一个宣传的图片分享到朋友圈，这个宣传图片包含二维码，包含不同的背景图片和不同的文字。对于这种图片生成，我们考虑过使用服务端生成，但是这样会比较耗服务器性能，所以最终决定使用本地生成。
首先小程序有一个限制，包不能大于2m，而且我们可能多个背景图，所以计划把背景图和二维码图片放在服务端，这样可以减少小程序包的大小，也可以灵活的切换背景图。
在绘制分享图的时候，可以直接使用互联网地址，但是遇到了一个问题，有可能不能生成图片，所以我们需要把这个图片文件下载下来。
下载文件的方法微信有API，但是返回的是文件的临时路径，只在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用wx.saveFile，才能在小程序下次启动时访问得到。
所以我们先把下载文件和保存文件封装
封装下载并且保存一个文件
这个方法比较简单
参数：一个对象，包含
- id需要下载文件的id，如果不传默认是下载的url，之所以需要id，是因为我们要做多文件下载，可以区分下载的是一个文件
- url下载文件的网络地址（需要微信小程序后台配置，具体配置方法请参考微信官方文档）
- success成功回调返回参数是一个对象包含id,savedFilePath
- fail失败回调,下载失败，保存都是都算失败
/**
*下载保存一个文件
*/
functiondownloadSaveFile(obj){
letthat=this;
letsuccess=obj.success;
letfail=obj.fail;
letid="";
leturl=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下载失败，只要有一个方法失败就调用失败
/**
*多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
*/
functiondownloadSaveFiles(obj){
//console.info("准备下载。。。");
letthat=this;
letsuccess=obj.success;//下载成功
letfail=obj.fail;//下载失败
leturls=obj.urls;//下载地址数组，支持多个url下载[url1,url2]
letsavedFilePaths=newMap();
leturlsLength=urls.length;//有几个url需要下载
for(leti=0;i
完整的download.js文件
/**
*下载管理器
*Createdby全科on2018/1/27.
*/
/**
*下载保存一个文件
*/
functiondownloadSaveFile(obj){
letthat=this;
letsuccess=obj.success;
letfail=obj.fail;
letid="";
leturl=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);
}
}
})
}
/**
*多文件下载并且保存，强制规定，必须所有文件下载成功才算返回成功
*/
functiondownloadSaveFiles(obj){
//console.info("准备下载。。。");
letthat=this;
letsuccess=obj.success;//下载成功
letfail=obj.fail;//下载失败
leturls=obj.urls;//下载地址数组，支持多个url下载[url1,url2]
letsavedFilePaths=newMap();
leturlsLength=urls.length;//有几个url需要下载
for(leti=0;i
使用
首先导入
importdownloadfrom"download.js"
之后调用
leturl1='https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=';
leturl2='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("下载失败");
}
);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。