首页 >

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

微信小程序|小程序开发微信小程序之多文件下载的简单封装
微信小程序,多文件下载,微信小程序,文件下载
微信小程序-小程序开发
本篇文章主要介绍了微信小程序之多文件下载的简单封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
tinytcp源码,ubuntu怎样删除内核,用爬虫爬maven,php filebox,seo绩效目标lzw
需求
nginx 源码注释,vscode bazel,ubuntu开机分辨率,tomcat中文名字是什么,sqlite 迅雷 508,网页设计师收费标准,服务器托管 20m独享 多线 什么价位,js遮罩层 插件推荐,p前端开发框架,人类爬虫类,龙华php,银行seo,网站后台日常维护,网页颜色变换特效代码,bjui下载模板,微信h5页面源代码,asp.net 图片管理系统,小程序 商城 免费下载lzw
需要生成一个宣传的图片分享到朋友圈,这个宣传图片包含二维码,包含不同的背景图片和不同的文字。对于这种图片生成,我们考虑过使用服务端生成,但是这样会比较耗服务器性能,所以最终决定使用本地生成。
收徒网站源码php,vscode 马保国,ubuntu 放桌面,tomcat启动太快,sqlite3更新行,爬虫式相关组合练习都有哪些,php中文参考手册,吉安运营seo推广,建站网站模板下载,网页 flash 音乐播放器,织梦58代理模板lzw
首先小程序有一个限制,包不能大于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("下载失败");  });

微信小程序之多文件下载的简单封装
  • php实现文件下载更能介绍
  • php实现文件下载更能介绍 | php实现文件下载更能介绍 ...

    微信小程序之多文件下载的简单封装
  • 新手必备的微信小程序开发指南
  • 新手必备的微信小程序开发指南 | 新手必备的微信小程序开发指南 ...

    微信小程序之多文件下载的简单封装
  • vscode中怎么进行微信小程序的发布(步骤详解)
  • vscode中怎么进行微信小程序的发布(步骤详解) | vscode中怎么进行微信小程序的发布(步骤详解) ...