微信小程序之多文件下载的简单封装示例
作者:quanke_ 发布时间:2023-10-19 21:10:06
需求
需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文字。对于这种图片生成,我们考虑过使用服务端生成,但是这样会比较耗服务器性能,所以最终决定使用本地生成。
首先小程序有一个限制,包不能大于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://my.oschina.net/quanke/blog/1614797
猜你喜欢
- 在练习列表的操作的时候我发现赋值之后的列表会随着被赋值的列表改变而改变,就像是C语言中用指向同一实际变量的指针进行操作一样。这是因为Pyth
- 生产定制一个彩条标签。首先导入:import matplotlib.pyplot as pltimport numpy as npfrom
- 近年来,广告已成为很多网站的主要收入来源。不久前,在线广告往往遭到访客的拒绝,广告客户也不确定它的价值和效力。今天,大多数访客期望在商业网站
- 背景时间过得太快了,春节假期感觉光速般就结束了,转眼间就要继续搬砖上班了。紧接着很快就要进入金三银四的求职面试高峰期,程序猿小枫还没有找到令
- 场景:在页面中点击按钮,数量增加,值是存在store中的,点击事件,值没变。<script setup lang="ts&q
- 要写出一个五子棋游戏,我们最先要解决的,就是如何下子,如何判断已经五子连珠,而不是如何绘制画面,因此我们先确定棋盘五子棋采用15*15的棋盘
- 1. 前言所谓的逃逸分析(Escape analysis)是指由编译器决定内存分配的位置吗不需要程序员指定。函数中申请一个新的对象如果分配在
- 前言我们通常把RPC用作内部通信,而使用Restful Api进行外部通信。为了避免写两套应用,我们使用grpc-gateway把gRPC转
- 在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计:这种设计
- 什么是拼音转换在我们学习语言之前,我们一般会学习拼音来认识汉字,并学会如何读汉字。所以,拼音在对于我们语言的重要性不言而喻。而拼音转换指的是
- 写在前面对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Ho
- PyQt5表格控件QTableView简介在通常情况下,一个应用需要和一批数据进行交互,然后以表格的形式输出这些信息,这时就需要用到QTab
- 科讯5.0 标签和之前版本变化不大,如果用老版本的科讯,可以参考这个标签使用。相关文章:新云4.0 模板通用标签说明 标签清单:======
- Python 的元组与列表类似,不同之处在于元组的元素不能修改。元组使用小括号,列表使用方括号。元组创建很简单,只需要在括号中添加元素,并使
- 一、连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1、例1:连接到本机上的MySQL: 首先在打开DOS窗口,
- 本文实例为大家分享了python使用Matplotlib绘制分段函数的具体代码,供大家参考,具体内容如下环境Python3Mac OS代码#
- HTTP应答头概述 Web服务器的HTTP
- 首先我们创建数据库表:CREATE TABLE `t_demo` ( `id` int(32) NOT NULL, `name` varch
- 安装模块如果使用的是Linux系统,并且安装了pip,可以直接使用pip安装xlrd, xlwt:pip install xlwtpip i
- 在使用一些 Javascript 框架时,或许会看到类似的代码var MyClass = new Class({initialize: fu