需求
需要生成一个宣传的图片分享到朋友圈，这个宣传图片包含二维码，包含不同的背景图片和不同的文字。对于这种图片生成，我们考虑过使用服务端生成，但是这样会比较耗服务器性能，所以最终决定使用本地生成。
首先小程序有一个限制，包不能大于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(下载失败); } );
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angular2 父子组件通信方式
jquery代码优化方式的总结
360浏览器兼容模式的页面显示不全怎么处理
以上就是微信小程序的多文件下载封装使用的详细内容。