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

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

需求

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

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

参考

原文发布时间为:2018年01月29日
原文作者:quanke_ 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
27天前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
3月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
106 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
3月前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
4月前
|
小程序 前端开发
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
216 3
|
4月前
|
小程序 开发工具 开发者
入职必会-开发环境搭建31-微信开发者工具下载和安装
微信开发者工具是一款由微信官方推出的开发工具,旨在帮助开发者更高效地进行微信小程序和微信公众号的开发与调试。该工具集成了代码编辑、代码上传、实时预览、调试等功能,能够提供便捷的开发环境和调试工具,帮助开发者快速定位和解决问题。
|
4月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
4月前
|
小程序 C++
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
【微信小程序-原生开发】实用教程19 - 表单范例 VS 表单校验(含必填校验函数封装,实时数字校验)
71 0
|
4月前
|
小程序 定位技术 开发工具
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
【微信小程序-原生开发+TDesign】通用功能页封装——地点搜索(含腾讯地图开发key 的申请方法)
51 0
|
4月前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
61 0
|
5月前
|
Java
微信公众号素材下载之java
微信公众号素材下载之java