微信小程序之多文件下载的简单封装示例

需求

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

首先小程序有一个限制，包不能大于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 下载失败，只要有一个方法失败就调用失败