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


Posted in Javascript onJanuary 29, 2018

需求

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

首先小程序有一个限制,包不能大于2m,而且我们可能多个背景图,所以计划把背景图和二维码图片放在服务端,这样可以减少小程序包的大小,也可以灵活的切换背景图。

在绘制分享图的时候,可以直接使用互联网地址,但是遇到了一个问题,有可能不能生成图片,所以我们需要把这个图片文件下载下来。

下载文件的方法微信有API,但是返回的是文件的临时路径,只在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,才能在小程序下次启动时访问得到。

所以我们先把下载文件和保存文件封装

封装下载并且保存一个文件

这个方法比较简单

参数:一个对象,包含

  1. id 需要下载文件的id,如果不传默认是下载的url,之所以需要id,是因为我们要做多文件下载,可以区分下载的是一个文件
  2. url 下载文件的网络地址(需要微信小程序后台配置,具体配置方法请参考微信官方文档)
  3. success 成功回调 返回参数是一个对象 包含 id,savedFilePath
  4. 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))需要在微信小程序配置服务器域名,服务器域名请在 小程序后台-设置-开发设置-服务器域名 中进行配置 ,具体请参考 微信官方文档

封装多文件下载并且保存

多文件下载并且保存,强制规定,必须所有文件下载成功才算返回成功

参数:一个对象,包含

  1. urls 下载地址 数组,支持多个 url下载 [url1,url2]
  2. success 下载成功 (必须所有文件下载成功才算返回成功) 回调参数 map ,key(id) -> value ({id,savedFilePath})
  3. 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("下载失败");
  }
);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
原生js调用json方法总结
Feb 22 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
JS中Object对象的原型概念基础
Jan 29 #Javascript
vue.js实现只弹一次弹框
Jan 29 #Javascript
javascript trie前缀树的示例
Jan 29 #Javascript
Vue官网todoMVC示例代码
Jan 29 #Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 #jQuery
Angular2 父子组件通信方式的示例
Jan 29 #Javascript
jQuery代码优化方法总结
Jan 29 #jQuery
You might like
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php短信接口代码
2016/05/13 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
GWebs公司笔试题
2012/05/04 面试题
问卷调查计划书
2014/01/10 职场文书
创先争优一句话承诺
2014/05/29 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
孔子观后感
2015/06/08 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
javascript对象3个属性特征
2021/11/17 Javascript