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

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

需求

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

首先小程序有一个限制,包不能大于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推荐 黄金广告位招租... 更多推荐

相关推荐

  • 归纳整理微信小程序权限接口

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

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

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

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

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

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

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

    2025年4月28日 建站经验
    000
  • 开发微信小程序需要掌握哪些基础知识

    开发微信小程序需要掌握以下基础知识:1. 前端基础:html、css 和 javascript。2. 小程序特有技术:wxml、wxss 和小程序框架。3. 开发工具与调试技巧:使用微信开发者工具。4. 后端知识与 api 调用:理解 ht…

    2025年4月28日
    000
  • 如何使用 WXML 和 WXSS 构建微信小程序界面

    wxml 和 wxss 是构建微信小程序界面的关键技术。1)wxml 定义界面结构和内容,支持数据绑定。2)wxss 控制界面样式和布局,支持响应式设计和动画。通过结合使用,它们能创建美观、高效的用户界面。 引言 在探索如何使用 WXML …

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

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

    2025年4月28日
    000
  • 微信开发者工具如何创建新的小程序项目

    微信开发者工具创建新的小程序项目步骤如下:1. 打开微信开发者工具,点击右上角“+”号,选择“新建小程序项目”。2. 填写项目名称、目录和appid(可选“无appid”)。3. 配置project.config.json文件,确保appi…

    2025年4月28日
    000
  • 零基础也能制作微信小程序教你如何轻松上手

    如果你认为制作微信小程序是一项只有编程高手才能完成的任务,那么我可以自信地告诉你:你错了!今天,我将揭示如何在没有任何基础的情况下,轻松掌握制作自己的微信小程序。 首先,让我们澄清一些误解。制作微信小程序并不需要你精通复杂的编程语言,它更像…

    2025年4月28日
    000
  • 微信小程序怎样做出弹出框功能

    这次给大家带来微信小程序怎样做出弹出框功能,微信小程序怎样做出弹出框功能的注意事项有哪些,下面就是实战案例,一起来看一下。 电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式…

    编程技术 2025年3月31日
    100

发表回复

登录后才能评论