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

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

需求

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

首先小程序有一个限制，包不能大于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("下载失败");
    }
);

参考

mp.weixin.qq.com/debug/wxado…

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 微信小程序之多文件下载的简单封装