微信小程序之多文件下载的简单封装
2018-01-29 09:28
736 查看
需求
需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文字。对于这种图片生成,我们考虑过使用服务端生成,但是这样会比较耗服务器性能,所以最终决定使用本地生成。首先小程序有一个限制,包不能大于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("下载失败"); } );
欢迎关注微信公众号,更多小程序相关的干货等你。。。
参考
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html#wxdownloadfileobject相关文章推荐
- 微信小程序之多文件下载的简单封装示例
- 微信小程序之多文件下载的简单封装
- 微信小程序之网络请求简单封装
- 简单的下载Execl文件程序
- 微信小程序开发之文件上传下载应用场景(附Demo源码)
- 简单的下载文件程序
- 夺命雷公狗---微信开发21----通过程序进行下载多媒体文件
- BizTalk 2006 简单入门示例程序 Version 2.0(附源项目文件下载)
- BizTalk 2006 简单入门示例程序 Version 2.0(附源项目文件下载
- 微信小程序下载文件详解
- python selenium的使用、文件下载、登录跳转问题和简单封装
- 一个java实现的简单文件下载程序
- BizTalk 2006 简单入门示例程序(附源项目文件下载)
- wxfile在哪里?wx.saveFile把文件下载到计算机哪里?微信小程序开发
- 微信小程序网络封装(简单高效)
- 微信小程序之网络请求简单封装实例详解
- 微信小程序业务域名配置:校验文件验证失败,请下载校验文件,上传到服务器指定的目录
- PHP基础文件下载类的简单封装
- 一个简单的使用wininet的http/ftp文件下载程序
- 菜鸟研究微信小程序爬坑之旅,TLS版本,文件上传下载,本地https模拟服务器