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

本篇文章主要介绍了微信小程序之多文件下载的简单封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求

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

首先小程序有一个限制,包不能大于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 

完整的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 

使用

首先导入

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中文网!

相关推荐:

微信小程序 循环及嵌套循环的使用

微信小程序之分享页面如何返回首页

以上就是微信小程序之多文件下载的简单封装的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/1747372.html

(0)
上一篇 2025年2月19日 23:30:24
下一篇 2025年2月19日 23:31:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何在Laravel中使用中间件进行微信小程序开发

    如何在Laravel中使用中间件进行微信小程序开发 引言:微信小程序在移动应用开发中越来越受欢迎,而Laravel作为一款强大的PHP框架,也被广泛用于Web应用的开发。在使用Laravel进行微信小程序开发时,我们可以利用Laravel中…

    2025年5月3日
    000
  • 微信小程序的前端框架(如 Taro、uni-app)使用教程

    taro 和 uni-app 是用于开发微信小程序的高效前端框架。1. taro 采用 react 语法,uni-app 基于 vue.js。2. 它们通过编译器将代码转换为各平台原生代码,支持跨平台开发。3. 使用示例包括基本页面创建和复…

    2025年5月2日
    000
  • 在微信小程序中如何使用progress组件实现显示进度

    这篇文章主要介绍了微信小程序使用progress组件实现显示进度功能,涉及progress组件相关属性设置操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下 本文实例讲述了微信小程序使用progress组件实现显示进度功能。分享给大家…

    2025年5月1日
    000
  • UniApp实现微信小程序原生组件的扩展与使用技巧

    uniapp是一款基于vue.js开发的跨平台应用开发框架,在开发微信小程序时,我们常常需要使用到微信小程序原生组件。本文将介绍如何在uniapp中扩展和使用微信小程序原生组件,并分享一些使用技巧。 一、扩展微信小程序原生组件 UniApp…

    编程技术 2025年5月1日
    000
  • 如何在uniapp中使用微信小程序的API接口

    如何在uniapp中使用微信小程序的API接口 随着微信小程序的流行,越来越多的开发者希望将微信小程序的功能应用到其他平台上。而uniapp作为一个跨平台开发框架,为开发者提供了一个方便的方式来实现这一目标。本文将详细介绍在uniapp中如…

    2025年5月1日
    000
  • ThinkPHP 微信小程序后端API开发实战

    可以使用thinkphp高效开发微信小程序后端api。1)定义路由并在控制器中处理请求,返回数据。2)实现分页、搜索和排序功能。3)注意请求验证、数据格式和错误处理。4)通过缓存、数据库索引和异步处理优化性能,并遵循最佳实践编写可维护代码。…

    2025年4月30日
    000
  • 归纳整理微信小程序权限接口

    本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了微信小程序中的权限接口的相关内容,包括了用户授权接口、获取用户权限设置接口、打开用户权限设置接口等内容,下面一起来看一下,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 1、…

    2025年4月28日 建站经验
    000
  • 微信小程序之页面路由知识点总结

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一下,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 什么是路由? 路由(r…

    2025年4月28日 建站经验
    000
  • 微信小程序开发常用功能汇总

    本篇文章给大家带来了关于微信小程序的相关知识,主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 获取用户信息 调用 wx.…

    2025年4月28日 建站经验
    000
  • 微信小程序全局配置以及页面配置详解

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于全局配置以及页面配置的详细解析,其中包括了全局配置文件及常用配置项、小程序窗口组成部分、设置导航栏的标题、背景色、标题颜色等等内容,下面一起来看一下,希望对大家有帮助。 【相关…

    2025年4月28日 建站经验
    000

发表回复

登录后才能评论